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


Posted in jQuery onMarch 29, 2017

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

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

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

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

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

<div id="nav">
<div class="navItem indexNavItem">


<ul class="navUl">



<li>首页</li>



<li class="hoverLi">首页</li>


</ul>


<div class="highlighter selectedNav"></div>

</div>

<div class="navItem">


<ul class="navUl">



<li>A</li>



<li class="hoverLi">A</li>
    </ul>


<div class="highlighter"></div>

</div>

<div class="navItem lastNavItem">


<ul class="navUl">



<li>A</li>



<li class="hoverLi">A</li>


</ul>


<div class="highlighter"></div>

</div>

<div id="logoutNavItem" class="navItem logoutNavItem lastNavItem">


<ul class="navUl">



<li>退出</li>



<li class="hoverLi">退出</li>


</ul>


<div class="highlighter"></div>  

</div>
</div>

样式,主要就是每个菜单项的左右边框的设置以及 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程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 #jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 #jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 #jQuery
jQuery插件之validation插件
Mar 29 #jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 #jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 #jQuery
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 #jQuery
You might like
新版PHP极大的增强功能和性能
2006/10/09 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
Symfony控制层深入详解
2016/03/17 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
使用pdb模块调试Python程序实例
2015/06/02 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
从0开始的Python学习016异常
2019/04/08 Python
Python tkinter三种布局实例详解
2020/01/06 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
电子信息毕业生自荐信
2013/11/16 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang