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 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 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
mysql 性能的检查和优化方法
2009/06/21 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
python将unicode转为str的方法
2017/06/21 Python
深入浅析python with语句简介
2018/04/11 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
房地产开发计划书
2014/01/10 职场文书
高一历史教学反思
2014/01/13 职场文书
幼儿教师培训感言
2014/03/08 职场文书
2014年教师节活动总结
2014/08/29 职场文书
优秀党员个人总结
2015/02/14 职场文书
一文搞懂Redis中String数据类型
2022/04/03 Redis