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解析获取JSON数据
Apr 08 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery treeview树形结构应用
Mar 24 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语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
PHP 8新特性简介
2020/08/18 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
Python中字典和集合学习小结
2017/07/07 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python基础教程之while循环
2019/08/14 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
检举信的格式及范文
2014/04/04 职场文书
社区娱乐活动方案
2014/08/21 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
新闻稿标题
2015/07/18 职场文书
2019教师的学习计划
2019/06/25 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
如何使用PyCharm及常用配置详解
2021/06/03 Python
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers