jquery实现具有收缩功能的垂直导航菜单

本文介绍一种比较常见的导航菜单是如何实现的,它具有垂直结构,点击导航主标题可以展开或者折叠二级菜单。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>垂直导航菜单</title>
<style type="text/css">
body{
 margin:0;
 padding:0 0 12px 0;
 font-size:12px;
 line-height:22px;
 font-family:"\5b8b\4f53", "Arial Narrow";
 background:#fff;
}
form, ul, li, p, h1, h2, h3, h4, h5, h6{
 margin:0;
 padding:0;
}
input, select{
 font-size:12px;
 line-height:16px;
}
img{border:0;}
ul, li{list-style-type:none;}
a{
 color:#00007F;
 text-decoration:none;
}
a:hover{
 color:#bd0a01;
 text-decoration:underline;
}
.box{
 width:150px;
 margin:0 auto;
}
.menu{
 overflow:hidden;
 border-color:#C4D5DF;
 border-style:solid;
 border-width:0 1px 1px;
}
.menu li.level1 a{
 display:block;
 height:28px;
 line-height:28px;
 background:#EBF3F8;
 font-weight:700;
 color:#5893B7;
 text-indent:14px;
 border-top:1px solid #C4D5DF;
}
.menu li.level1 a:hover{
 text-decoration:none;
}
.menu li.level1 a.current{
 background:#B1D7EF;
}

.menu li ul{
 overflow:hidden;
}
.menu li ul.level2{
 display:none;
}
.menu li ul.level2 li a{
 display:block;
 height:28px;
 line-height:28px;
 background:#ffffff;
 font-weight:400;
 color:#42556B;
 text-indent:18px;
 border-top:0px solid #ffffff;
 overflow:hidden;
}
.menu li ul.level2 li a:hover {
    color:#f60;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".level1 > a").click(function(){
  $(this).addClass("current")
  .next().show()
  .parent().siblings().children("a").removeClass("current")
  .next().hide();
  return false;
 });
});
</script>
</head>
<body>
<div class="box">
 <ul class="menu">
  <li class="level1">
   <a href="#none">前端专区</a>
   <ul class="level2">
    <li><a href="#none">html教程</a></li>
    <li><a href="#none" >css教程</a></li>
    <li><a href="#none" >div教程</a></li>
    <li><a href="#none" >jquery教程</a></li>
   </ul>
  </li>
  <li class="level1">
   <a href="#none">资源专区</a>
   <ul class="level2">
    <li><a href="#none">特效下载</a></li>
    <li><a href="#none">电脑特效</a></li>
    <li><a href="#none">手机特效</a></li>
    <li><a href="#none">图片下载</a></li>
   </ul>
  </li>
  <li class="level1">
  <a href="#none">蚂蚁部落</a>
   <ul class="level2">
    <li><a href="#none">前端专区</a></li>
    <li><a href="#none">特效专区</a></li>
    <li><a href="#none">站长交流</a></li>
    <li><a href="#none">管理专区</a></li>
   </ul>
  </li>
 </ul>
</div>
</body>
</html>

上面的代码实现了垂直导航菜单效果,下面介绍一下它的实现过程。
一.实现过程分解:
1.<div class="box"></div>最外层的box元素能够将整个导航栏实现了水平居中效果,css代码如下:

.box{
 width:150px;
 margin:0 auto;
}

2.折叠菜单的结构布局:

<li class="level1">
 <a href="#none">前端专区</a>
 <ul class="level2">
  <li><a href="#none">html教程</a></li>
  <li><a href="#none" >css教程</a></li>
  <li><a href="#none" >div教程</a></li>
  <li><a href="#none" >jquery教程</a></li>
 </ul>
</li>

上面的代码是折叠菜单的结构,作为主导航的链接a被使用display:block设置为块级元素,这样就可以设置它的尺寸,同时在默认状态下,作为二级菜单的ul元素是隐藏的,也就是说二级菜单是折叠的。
二.jquery代码注释:
1.$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
2.$(".level1 > a").click(function(){}),为class属性值为level1元素下的一级a元素注册click事件处理函数,也就是为主导航链接注册事件处理函数。
3.$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide(),这段代码是一个链式调用效果,实现了点击主导航链接实现当前点击主导航后面的二级菜单展开,其他菜单折叠效果。
4.return false,取消主导航链接的跳转效果。

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

时间: 2016-02-15

jQuery纵向导航菜单效果实现方法

本文实例讲述了jQuery纵向导航菜单效果实现方法.分享给大家供大家参考,具体如下: 效果如下: 核心代码如下: $( document ).ready( function(e){ var $catCont = $( ".cat-cont" ); //二级菜单div var $catList = $( ".J_Cat" ); //一级菜单li $catList.on( "mouseenter", function(){ var index = $

Jquery网页内滑动缓冲导航的实现代码

如果网页过长,需要页内导航的时候,我们一般是在目标出设置ID,比如<div id="footer"></div>,然后在当前页面某个链接地址设置如:<a href="#footer">点击指向到底部</a>,这样点击该链接后就会马上转到网页底部,默认是直接转到底部,有的访客会莫名其妙,怎么突然就到底部了. 在越来越关注用户体验的今天,这点我们要解决,下面就是一段简单的Jquery代码,实现滑动缓冲的方式实现页内导航,用

jQuery插件StickUp实现网页导航置顶

实用的jQuery网页元素固定导航置顶插件StickUp,简单的jQuery插件,实现网页元素固定,如导航固定让其总是保持在视图中可见,在one-page页面中就可以看出效果,大家可以研究研究. 使用方法: 1.加载插件和jQuery <script src="js/jquery.js">script> <script src="js/stickUp.min.js">script> <link href="stic

jQuery网页定位导航特效实现方法

本文实例讲述了jQuery网页定位导航特效实现方法.分享给大家供大家参考,具体如下: 描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离(相对于顶部),如果滚动距离大于等于楼层距离,即进入了相应楼层,然后通过一个变量来记录该楼层的信息,最后传递给右边高亮显示 1.点击右边固定导航项时,左边的内容跟着切换. 只需将右边a的href设置为左边区块的id加

jquery实现网页定位导航

不知道大家有没有注意到有的网页由于页面信息量太大所以使用了页面定位导航来实现跳转,点击旁边的菜单的某一项页面就跳到那一项对应的内容,而且我们滚动滚动条,当滚动到某一项内容,旁边菜单对应的那一项也会高亮显示.今天我就来讲讲这样的效果是如何实现的. 先贴上显示效果: 实现:  这个的页面布局很简单,大家下去多试试就OK了,值得注意的是需要在菜单布局里的每一个li里面添加a标签并且给a标签的 href 赋上对应的id号,可以让其点击立即跳到id对应的内容 然后就是jquery是如何实现的: 1.我们需

jQuery仿京东商城楼梯式导航定位菜单

实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项! 涉及知识点:find().parent().offset().scroll()等jQ函数,请自觉复习各种函数! html代码: <!-- 导航菜单 --> <div id="menu"> <ul> <li>1F<span>服饰</span></li> <li>2F<span>美妆</span></

jQuery+css实现非常漂亮的水平导航菜单效果

本文实例讲述了jQuery+css实现非常漂亮的水平导航菜单效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 用到的背景图片tab.gif如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单

本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

jQuery+CSS实现一个侧滑导航菜单代码

侧滑菜单在网站设计中应用比较广泛,在许多网站上都可以看到此种类型的菜单.它可以展示重点信息,使其更有可读性和美观性,满足用户体验价值! 今天小编给大家展示如何使用jquery和css实现侧滑菜单. 效果展示      源码下载 为了建立导航菜单,让我们先看看html结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

让网页跳转到指定位置的jquery代码非书签

调用: 复制代码 代码如下: var offset = 10; var hash = globalHash; if (hash) { scrollBodyTopTo($("div#c_"+hash).offset().top-offset); } 方法: 复制代码 代码如下: function scrollBodyTopTo(pos) { $("html,body").animate({scrollTop:pos}); }

jQuery实现网页顶部固定导航效果代码

本文实例讲述了jQuery实现网页顶部固定导航效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

JQUERY实现网页右下角固定位置展开关闭特效的方法

本文实例讲述了JQUERY实现网页右下角固定位置展开关闭特效的方法.分享给大家供大家参考.具体如下: html代码: <div class="tagbox"> <div class="tag"> <span>热门标签...</span> <ul> <li><a href='/tag/js展开收起_1.html' target="_blank">js展开收起<

jquery实现垂直和水平菜单导航栏

本文实例为大家分享了jquery菜单导航栏的实现代码,供大家参考,具体内容如下 1. HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>竖直导航菜单</title> <link href="css/Vmenu.css" rel="stylesheet" /> <script

css实现会折叠、展开的菜单导航栏效果

function show(c_Str) {if(document.all(c_Str).style.display=='none') {document.all(c_Str).style.display='block';} else{document.all(c_Str).style.display='none';}} function high(){ if (event.srcElement.className=="k"){ event.srcElement.style.backg

使用jQuery.Pin垂直滚动时固定导航

ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQuery.Pin,这个插件可在用来固定页面中的元素. http://webpop.github.io/jquery.pin/ 添加脚本 向页面中添加脚本,使用 jquery.pin 来固定导航.为了减少添加脚本的次数,可以将脚本添加到布局中,这样所有使用该局的页面都会应用到. 1. 布局组件 -> 默认

jQuery实现的简洁下拉菜单导航效果代码

本文实例讲述了jQuery实现的简洁下拉菜单导航效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现简洁下拉菜单导航效果,代码规范,兼容性方面:支持 IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+.简洁明快的jquery网站菜单,请参阅代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-down-show-menu-nav-codes/ 具体代码

bootstrap自定义样式之bootstrap实现侧边导航栏功能

bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单,参考了很多官网的侧滑,实现方法各有不同,优缺点也十分明显,有的官网首页为了仅仅实现一个侧滑的效果,用了owl.carousel滑屏的插件,个人觉得小题大做了.这个bootstrap侧滑菜单更专业的名字叫做手机导航栏.我也比较这个名字,更符合bootstrap的特性.所以我这篇文章介绍的更容易的一种做法,

用CSS开发时髦的导航栏第二篇

解决方案 在一个导航系统中显示子菜单最好的办法是在一个列表中创建子列表.这样标记的两级导航栏很容易被理解 – 哪怕浏览器不支持CSS. 为了产生多级导航栏,我们创建一个嵌套的列表,为这些新的列表项样式化颜色.边界和链接属性: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <ht

jQuery实现导航栏头部菜单项点击后变换颜色的方法

本文实例讲述了jQuery实现导航栏头部菜单项点击后变换颜色的方法.分享给大家供大家参考,具体如下: 实现效果如下: 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ text-decoration: none; color

php+jQuery实现的三级导航栏下拉菜单显示效果

本文实例讲述了php+jQuery实现的三级导航栏下拉菜单显示效果.分享给大家供大家参考,具体如下: 首先看看效果图: 1.数据配置文件 db.php <?php return array( array( 'one' => '关于我们', 'two' => array( array( 'three_tit' => '公司介绍', 'three_cont' => array( '企业概况', '组织架构', '发展历程', '企业文化', '服务理念' ) ), array(

jQuery+css实现的蓝色水平二级导航菜单效果代码

本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

7款风格新颖的jQuery/CSS3菜单导航分享

一款优秀的菜单对网站而言是非常重要的,它不仅可以让用户方便地找到想要的信息,而且更让人有一种特殊的用户体验.下面给大家分享7款风格新颖的jQuery/CSS3菜单导航,希望大家会喜欢. 1.CSS3立体飘带状菜单 CSS3立体飘带状菜单,该菜单鼠标滑过时,菜单项向上立体凸起,结合黑色的木质背景,整个菜单显得非常立体生动. 在线演示 /源码下载 2.CSS3个人资料导航菜单 该菜单是用来展示登录的用户信息,包括用户的快捷操作按钮,另外菜单还提供一个个性化的搜索框. 在线演示 /源码下载 3.jQu