jQuery实现简洁的导航菜单效果


Posted in Javascript onNovember 23, 2015

本文实例讲述了JavaScript实现的伸展收缩型菜单代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

jQuery实现简洁的导航菜单效果

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

页面代码,菜单的每一项都是一个 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实现简洁的导航菜单效果的关键代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
Bootstrap每天必学之表格
Nov 23 #Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 #Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 #Javascript
js实现简单计算器
Nov 22 #Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 #Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 #Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 #Javascript
You might like
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
解析CodeIgniter自定义配置文件
2013/06/18 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
删除重复数据的算法
2006/11/23 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
python中split方法用法分析
2015/04/17 Python
python文件名和文件路径操作实例
2017/09/29 Python
pandas值替换方法
2018/07/10 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
Ruby如何定义一个类
2012/10/08 面试题
体育教育专业毕业生自荐信
2013/11/15 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
项目合作协议书范本
2014/04/16 职场文书
三年级小学生评语
2014/04/22 职场文书
城管综合整治方案
2014/05/01 职场文书
求职信结尾怎么写
2014/05/26 职场文书
竞聘书的秘诀
2019/04/02 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL