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运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
Vue接口封装的完整步骤记录
May 14 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
可以在线执行PHP代码包装修正版
2008/03/15 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
vue-cli 首屏加载优化问题
2018/11/06 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
手写一个python迭代器过程详解
2019/08/27 Python
教你打造完美的创业计划书
2014/01/06 职场文书
股份合作协议书
2014/04/12 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
汽车转让协议书
2015/01/29 职场文书
《火烧云》教学反思
2016/02/23 职场文书
Python闭包的定义和使用方法
2022/04/11 Python