189 8069 5689

jQuery如何实现Nav导航菜单效果

这篇文章给大家分享的是有关jQuery如何实现Nav导航菜单效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

目前创新互联已为上1000家的企业提供了网站建设、域名、雅安服务器托管、网站托管、服务器托管、企业网站设计、尼元阳网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

自己写的一个简单的导航菜单,先看效果:

jQuery如何实现Nav导航菜单效果

鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项。

页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一个 div 则是底部的蓝条,需要给第一项和最后一项设置不同的 class ,样式需要用到:


  
    
      
  • 首页
  •       首页          
      
                  
  • A
  •       A          
                     
  • A
  •       A                            
  • 退出
  •       退出               

    样式,主要就是每个菜单项的左右边框的设置以及 ul 和 li 的位置设置:

    *
    {
      padding: 0;
      margin: 0;
    }
    body
    {
      background-color: #fffff3;
      font: 12px/1.6em Helvetica, Arial, sans-serif;
    }
    ul,li{
      list-style: none;
    }
    #nav
    {
      text-align: center;
      height: 50px;
      font-size: 10px;
      line-height: 30px;
      background-color: #F0E6DB;
      margin-bottom: 10px;
    }
    .navItem
    {
      cursor: pointer;
      position: relative;
      float: left;
      width: 100px;
      height: 50px;
      font-size: 15px;
      border-right: 2px solid rgb(255,255,255);
      border-left: 2px solid rgb(255,255,255);
      overflow: hidden;
      font-weight:bold;
    }
    .indexNavItem
    {
      border-left: 4px solid rgb(255,255,255);
      margin-left: 10px;
    }
    .lastNavItem
    {
      border-right: 4px solid rgb(255,255,255);
    }
    .logoutNavItem
    {
      float: right;
      width: 120px;
      margin-right: 10px;
      border-left: 4px solid rgb(255,255,255);
    }
    .navUl
    {
      position: relative;
      height: 100px;
      width: 100%;
      border-bottom: 5px solid rgb(2,159,212);
    }
    .navUl li
    {
      height: 50px;
      line-height: 50px;
    }
    .highlighter
    {
      position: absolute;
      bottom: 0;
      height: 5px;
      width: 100%;
    }
    .selectedNav
    {
      background-color: #029FD4;
    }
    .hoverLi
    {
      background-color: #029FD4;
      color: #ffffff;
    }

    接下来就是给菜单编写悬浮和单击事件的 js 代码了,悬浮时将 ul 上移 li 的高度,鼠标移开后再恢复,点击之后就是给蓝条的 div 添加样式即可:

    $(function() {
      $(".navItem").hover(function() {
        $(this).children("ul").animate({
          top: "-50px"
        }, 100);
      }, function() {
        $(this).children("ul").animate({
          top: "0px"
        }, 100);
      });
      $(".navItem").click(function(event) {
        $(this).siblings().children('.highlighter').removeClass('selectedNav');
        $(this).children('.highlighter').addClass('selectedNav');
      });
    })

    感谢各位的阅读!关于“jQuery如何实现Nav导航菜单效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


    当前文章:jQuery如何实现Nav导航菜单效果
    文章URL:http://cdxtjz.cn/article/igcgdj.html

    联系我们

    您好HELLO!
    感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
    • 电话:028- 86922220 18980695689
    • 商务合作邮箱:631063699@qq.com
    • 合作QQ: 532337155
    • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

    小谭建站工作室

    成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

    小谭观点

    相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
    我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。