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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
javascript iframe编程相关代码
Dec 28 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
小程序富文本提取图片可放大缩小
May 26 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
详细分析JavaScript中的深浅拷贝
Sep 17 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
PHP微信支付开发实例
2016/06/22 PHP
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
浅析Jquery操作select
2016/12/13 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
python中的字典详细介绍
2014/09/18 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
一些Solaris面试题
2015/12/22 面试题
大学在校生求职信范文
2013/11/21 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
公务员年度个人总结
2015/02/12 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
DIY胆机必读:各国电子管评价
2022/04/06 无线电