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 相关文章推荐
Javascript 解疑
Nov 11 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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 读取Postgresql中的数组
2013/04/14 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
js常用代码段整理
2011/11/30 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python抖音表白程序源代码
2019/04/07 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
python ssh 执行shell命令的示例
2020/09/29 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
机电一体化专业求职信
2014/07/22 职场文书
材料员岗位职责
2015/02/10 职场文书
生日寿星公答谢词
2015/09/29 职场文书
入党转正申请书范文
2019/05/20 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python