jQuery实现简单漂亮的Nav导航菜单效果

前端之家收集整理的这篇文章主要介绍了jQuery实现简单漂亮的Nav导航菜单效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery实现简单漂亮的Nav导航菜单效果分享给大家供大家参考,具体如下:

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

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

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

        
logoutNavItem" class="navItem logoutNavItem lastNavItem">          
Highlighter">
  

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

logoutNavItem { float: right; width: 120px; margin-right: 10px; border-left: 4px solid rgb(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 添加样式即可:

Highlighter').removeClass('selectedNav'); $(this).children('.Highlighter').addClass('selectedNav'); }); })

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》、《》及《用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

原文链接:https://www.f2er.com/jquery/40347.html

猜你在找的jQuery相关文章