CNET中国旗舰网站

ZDNet China | CNET科技资讯网 | 政府采购 | 行业网站联盟





 
标题: [转贴] 100分求教,如何做成这样的导航栏效果
mz89757053
版主
Rank: 7Rank: 7Rank: 7


UID 304999
精华 0
积分 6933
帖子 8295
威望 116
ZD币 1002 元
阅读权限 250
注册 2008-3-10
状态 离线
  楼主
发表于 2008-3-18 14:04  资料  个人空间  短消息  加为好友 
开发者在线

100分求教,如何做成这样的导航栏效果

100分求教,如何做成这样的导航栏效果, 网址如下!最好给出javascript/Css/ajax   
  代码,如何实现顶层的菜单导航功效.可以自动收缩的菜单和显示的div   form   
  http://atlas.freshlogicstudios.com/




顶部
热点频道推荐: C/S开发| 数据库| WEB开发| 嵌入式| 项目管理|
mz89757053
版主
Rank: 7Rank: 7Rank: 7


UID 304999
精华 0
积分 6933
帖子 8295
威望 116
ZD币 1002 元
阅读权限 250
注册 2008-3-10
状态 离线
  沙发
发表于 2008-3-18 14:04  资料  个人空间  短消息  加为好友 
<!DOCTYPE   html   PUBLIC   "-//W3C//DTD   XHTML   1.0   Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  <html   xmlns="http://www.w3.org/1999/xhtml">   
  <head>   
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312"   />   
  <title>无标题文档</title>   
  <style   type="text/css">   
  body   {   
  margin:   36px   0   20px   0;   
  background-color:   #fff;   
  text-align:   center;   
  }   
   
  a   img   {   
  border:   none;   
  }   
   
  form   {   
  margin:   0;   
  padding:   0;   
  }   
   
  .cleared   {   
  clear:   both;   
  line-height:   0;   
  }   
   
  .clear   {   
  clear:   both;   
  }   
   
  table   {   
  border-collapse:   collapse;   
  }   
   
  td   {   
  vertical-align:   top;   
  }   
   
  #navBar   {   
  background-color:   #303030;   
  margin:   2px   0   0   0;   
  height:   30px;   
  }   
   
  #navBar   ul   li   {   
  list-style-type:   none;   
  display:   block;   
  float:   left;   
  }   
   
  #navBar   ul   li   a   {   
  color:   #d6d6d6;   
  border-right:   1px   solid   #fff;   
  }   
   
  #navBar   ul   li   a:hover   {   
  background-color:   #415166;   
  color:   #fff;   
  text-decoration:   none;   
  }   
   
  #bodyContent   {   
  background:   url(../images/2col_bg.gif)   top   center   repeat-y;   
  padding:   0   20px;   
  }   
   
  #bodyContent   a   {   
  font-weight:   bold;   
  }   
   
  /*   Dropdowns   */   
   
  #nav,   #nav   ul   {   
  padding:   0;   
  margin:   0;   
  list-style:   none;   
  }   
   
   
  #nav   a   {   
  display:   block;   
  }   
   
  #nav   li   ul   {   
  position:   absolute;   
  left:   -999em;   
  }   
   
   
  #nav   li:hover   ul,   #nav   li.sfhover   ul   {   
  left:   auto;   
  }   
   
  #nav   li   ul   li   a   {   
  background-color:   #303030;   
  color:   #f2f2f2;   
  font-size:   12px;   
  padding:   5px   0   2px   7px;   
  border-top:   1px   solid   #fff;   
  font-weight:   bold;   
  }   
   
  #nav   ul   li   a:hover   {   
  text-decoration:   none;   
  background-color:   #415166;   
  color:   #fff;   
  font-size:   12px;   
  font-weight:   bold;   
  }   
   
  /*#nav   ul   li   a.last   {   border-bottom:   none;   }*/   
   
  #subMenuAbout,   #subMenuAbout   li   a,   #subMenuAbout   li   a:hover   {width:   130px;}   
   
  #subMenuServices,   #subMenuServices   li   a,   #subMenuServices   li   a:hover   {width:   160px;}   
   
  #subMenuPortfolio,   #subMenuPortfolio   li   a,   #subMenuPortfolio   li   a:hover   {width:   100px;}   
   
  #subMenuResources,   #subMenuResources   li   a,   #subMenuResources   li   a:hover   {width:   120px;}   
   
  #subMenuNews,   #subMenuNews   li   a,   #subMenuNews   li   a:hover   {width:   100px;}   
   
   
  </style>   
  <script   language="javascript"   type="text/javascript">   
  <!--//-->&lt;![CDATA[//><!--   
   
  sfHover   =   function()   {   
  var   sfEls   =   document.getElementById("nav").getElementsByTagName("LI");   
  for   (var   i=0;   i<sfEls.length;   i++)   {   
  sfEls.onmouseover=function()   {   
  this.className+="   sfhover";   
  }   
  sfEls.onmouseout=function()   {   
  this.className=this.className.replace(new   RegExp("   sfhover\\b"),   "");   
  }   
  }   
  }   
  if   (window.attachEvent)   window.attachEvent("onload",   sfHover);   
   
  //--><!]]&gt;   
  </script>   
  </head>   
   
  <body>   
   
   
  <div   id="navBar">   
  <ul   id="nav">                                                                           
  <li><a   href="/"   tabindex="10"   title="Return   to   the   Quirk   home   page"><img   src="/images/nav/home.gif"   alt="Home"   class="imgover"   /></a></li>   
  <li   id="menuAbout"><a   href="/about"   tabindex="1"   title="About   Quirk"><img   src="/images/nav/about.gif"   alt="About"   class="imgover"   /></a>   
  <ul   id="subMenuAbout">   
  <li><a   href="/about"   title="About   Quirk">About   Us</a></li>   
  <li><a   href="/team/members"   title="The   Team   at   Quirk"   class="last">Our   Team</a></li>   
  <li><a   href="/career/wannawork.q"   title="emarketing   careers">Wannawork@quirk?</a></li>   
   
  </ul></li>   
  <li   id="menuServices"><a   href="/services"   tabindex="2"   title="The   services   offered   by   Quirk"><img   src="/images/nav/services.gif"   alt="Services"   class="imgover"   /></a>   
  <ul   id="subMenuServices">   
  <li><a   href="/services"   title="eMarketing   Strategy">eMarketing   Strategy</a></li>   
  <li><a   href="/website-development/home"   title="Website   Design   and   Development">Website   Development</a></li>   
  <li><a   href="/searchengine-marketing/home"   title="All   about   Search   Engine   Marketing">Search   Engine   Marketing</a></li>   
  <li><a   href="/emarketing/ppc"   title="Pay   Per   Click   Advertising">Pay   Per   Click</a></li>   
   
  <li><a   href="/emarketing/online-advertising"   title="Online   and   Banner   Advertising">Online   Advertising</a></li>   
  <li><a   href="/emarketing/affiliate"   title="Affiliate   Marketing   and   Management">Affiliate   Marketing</a></li>   
  <li><a   href="/emarketing/viral"   title="Viral   Marketing   and   Campaigns">Viral   Marketing</a></li>   
  <li><a   href="/emarketing/web-pr"   title="Web   based   Public   Relations   Services">Web   PR</a></li>   
  <li><a   href="/email-marketing/home"   title="Email   Marketing">Email   Marketing</a></li>   
  <li><a   href="/emarketing/conversion"   title="Conversion   Optimisation">Conversion   Optimisation</a></li>   
  </ul></li>   
   
  <li   id="menuPortfolio"><a   href="/portfolio/home"   tabindex="3"   title="A   portfolio   of   our   work"><img   src="/images/nav/portfolio.gif"   alt="Portfolio"   class="imgover"   /></a>   
  <ul   id="subMenuPortfolio">   
  <li><a   href="/portfolio/home"   title="A   Portfolio   of   our   Work">Our   Work</a></li>   
  <li><a   href="/portfolio/clients"   title="Quirks'   Client   List">Clients</a></li>   
  <li><a   href="/portfolio/testimonials"   title="Client   Testimonials"   class="last">Testimonials</a></li>   
  </ul></li>   
  <li   id="menuResources"><a   href="/resources/home"   tabindex="4"   title="Useful   resources"><img   src="/images/nav/resources.gif"   alt="Resources"   class="imgover"   /></a>   
  <ul   id="subMenuResources">   
   
  <li><a   href="/searchstatus"   title="SearchStatus   Firefox   Pluging">SearchStatus</a></li>   
  <li><a   href="/resources/clicktracks"   title="Click   Tracks">ClickTracks</a></li>   
  <li><a   href="/resources/articles.q"   title="Articles   by   Quirk">Articles</a></li>   
  <li><a   href="/resources/jse-report"   title="JSE   Top   100   SEO   Report">JSE   Report</a></li>   
  <li><a   href="/resources/links"   title="Links   to   Useful   Sites">Links</a></li>   
  <li><a   href="/resources/myquirk"   title="MyQuirk">MyQuirk</a></li>   
   
  <li><a   href="/resources/newsletterarchive.q"   title="Newsletter   Archive">Newsletter   Archive</a></li>   
  <li><a   href="/resources/vault.q"   title="Viral   video   clip   archive">Viral   Vault</a></li>   
  </ul></li>   
  <li   id="menuNews"><a   href="/news.q"   tabindex="5"   title="Latest   Quirk   news   and   our   newsletter   archives"><img   src="/images/nav/news.gif"   alt="News"   class="imgover"   /></a>   
  <ul   id="subMenuNews"   >   
  <li><a   href="/news.q"   title="All   the   Latest   Quirk   News">Latest   News</a></li>   
  <li><a   href="http://www.gottaquirk.com"   title="The   Quirk   Blog"   target="_blank">Blog</a></li>   
   
  </ul></li>   
  <li   style="border-right:   none;"><a   href="/contact/contactus.q"   tabindex="6"   title="Contact   Quirk"><img   src="/images/nav/contact.gif"   alt="Contact"   class="imgover"   /></a></li>   
  </ul></div>   
   
  </div></div>   
  </body>   
  </html>




顶部
热点频道推荐: C/S开发| 数据库| WEB开发| 嵌入式| 项目管理|
 



当前时区 GMT+8, 现在时间是 2009-7-4 18:54

  Powered by Discuz! 5.5.0 © 2001-2007 Comsenz Inc.
Processed in 0.096496 second(s), 3/3 queries

清除 Cookies - 联系我们 - ZDNetChina中文社区 - 无图版