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 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
vue中的scope使用详解
Oct 29 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
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
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
教你如何使用php session
2013/10/28 PHP
dedecms中使用php语句指南
2014/11/13 PHP
js Html结构转字符串形式显示代码
2011/11/15 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python如何为图片添加水印
2016/11/25 Python
windows下python连接oracle数据库
2017/06/07 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
python画微信表情符的实例代码
2019/10/09 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
Ajax的优点和缺点
2014/11/21 面试题
科室工作个人总结的自我评价
2013/10/29 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
拉歌口号大全
2014/06/13 职场文书
博士生导师推荐信
2014/07/08 职场文书
商场促销活动策划方案
2014/08/18 职场文书
工程部部长岗位职责
2015/02/12 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
婚礼家长致辞
2015/07/27 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis