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实现一个简单的验证码功能
Jun 26 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery实现影院选座订座效果
Apr 13 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
ezSQL PHP数据库操作类库
2010/05/16 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
python 将md5转为16字节的方法
2018/05/29 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
python和php哪个更适合写爬虫
2020/06/22 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
Europcar比利时:租车
2019/08/26 全球购物
一篇.NET面试题
2014/09/29 面试题
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
管理站站长岗位职责
2013/11/27 职场文书
应届毕业生自我评价分享
2013/12/15 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
爱心捐款感谢信
2015/01/20 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
班级班风口号大全
2015/12/25 职场文书