jquery应用一(导航菜单)

最新推荐文章于 2024-06-11 09:49:39 发布
最新推荐文章于 2024-06-11 09:49:39 发布
阅读量295 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zqw280057394/article/details/52261936
版权


<html>

<head>
<title>可折叠展开的导航条</title>
<style>
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;
}
/* lv1 */
.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;}
/* lv2 */
.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="jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function(){
 $(".level1 > a").click(function(){
  $(this).addClass("current") //给当前元素添加"current"样式
  .next().show() //下一个元素显示
  .parent().siblings().children("a").removeClass("current")
  //父元素的兄弟元素的子元素<a>移除"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">短袖衬衫</a></li>
    <li><a href="#none">长袖衬衫</a></li>
    <li><a href="#none">短袖T恤</a></li>
    <li><a href="#none">长袖T恤</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>
Hanxuyue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery菜单导航：一到多级导航
ZlikeN的博客
10-08 692
jq自行下载 html部分： <nav class="nav"> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a> <ul> <li><a href="#"
jquery导航菜单
style201904的博客
06-17 1669
*{ margin: 0; padding: 0; } ul{ width: 800px; overflow: hidden; background-color: #000000; position: relative; margin: 0 auto; } li{ position: relative; ...
推荐使用：jQuery navobile —— 优雅的响应式导航解决方案
最新发布
gitblog_00009的博客
06-11 361
推荐使用：jQuery navobile —— 优雅的响应式导航解决方案 项目地址:https://gitcode.com/madetech/jquery-navobile 项目介绍 jQuery navobile 是一个轻量级且易于使用的jQuery插件，专为创建响应式的移动导航菜单而设计。通过简单的API调用，你可以将任何现有的HTML结构转换为适应各种屏幕尺寸的导航栏，提供无缝的用户体验。该...
分享20个漂亮强大的jQuery导航菜单（转）
weixin_30462049的博客
01-30 172
　【IT168 技术】在网页中，菜单导航要的功能是十分重要的，它能告诉你要寻找信息的准确位置。在jQuery中，有众多的优秀的脚本可以帮助你去实现某一方面的功能，但在导航菜单方面，数量虽然也不少，但优秀的导航菜单却不是很多。本文将选取了20个漂亮强大的使用jQuery菜单的插件或教程，并给出了下载或学习的地址，其中必定有你所喜欢的。 　　1 漂亮的滑动弹出效果 　　这是一款漂亮的向右滑动弹出的...
jquery实现导航菜单
u012311282的专栏
05-12 389
1、html文件jquery-1.12.3.min.js 自己去官方下载 html> html lang="en"> head> meta charset="UTF-8"> script src="jquery-1.12.3.min.js">script> script src="testjquerys.js">script> link rel="styles
jQuery响应式导航菜单.zip
07-04
"jQuery响应式导航菜单"是一个专为实现这一目的而设计的解决方案。这个项目使用了两个核心JavaScript库：jQuery 1.8.3和pgwmenu.min.js，它们共同创建了一种动态、适应性强的菜单系统，尤其适用于现代网页设计，特别...
jQuery垂直多级导航菜单代码
04-07
本教程将深入探讨如何使用jQuery创建一款黑色风格的垂直多级导航菜单。jQuery是一种强大的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得创建交互式网页变得更加简单。 首先，我们需要了解基础HTML结构...
jquery下拉横向导航菜单
06-05
jQuery是一款广泛使用的JavaScript库，它为开发者提供了许多便利的功能，其中包括创建动态和交互式的下拉导航菜单。本篇文章将深入探讨如何使用jQuery实现一个下拉横向导航菜单，并且讲解如何通过二级下拉菜单直接...
jQuery动画下拉导航菜单代码
06-24
jQuery作为一种强大的JavaScript库，提供了丰富的功能来增强网站的用户体验，其中包括制作动态、交互式的下拉导航菜单。本篇文章将深入探讨jQuery动画下拉导航菜单的实现原理和相关知识点。 首先，jQuery动画下拉...
jQuery+css实现非常漂亮的水平导航菜单效果
10-21
主要介绍了jQuery+css实现非常漂亮的水平导航菜单效果,通过each方法遍历元素再使用removeClass与addClass变换页面元素样式实现导航菜单的切换效果,需要的朋友可以参考下
jQuery多级无限级导航下拉菜单代码
04-12
jQuery多级无限级导航下拉菜单代码, jQuery多级无限级导航下拉菜单代码是一款可智能判断有没有下级菜单列表的网站下拉菜单特效。 js代码 [removed] $(document).ready(function() { $("ul.nav li").hover(function(){ $(this).addClass("on"); }, function(){ $(this).removeClass("on"); }) }); $(document).ready(function() { $("ul.nav li").hover(function(){ $(this).parent("ul").siblings("h3").addClass("choice"); }, function(){ $(this).parent("ul").siblings("h3").removeClass("choice"); }) }); $(document).ready(function() { if ($("ul.nav li").find("ul") .html()!="") { $("ul.nav li").parent("ul").siblings("h3").append("<span class='sub'></span>"); } }); [removed]
jQuery网站导航下拉菜单实例
07-24
而下拉菜单更是导航菜单的一种常见且实用的设计模式，尤其在内容丰富的网站中，它能有效地节省空间并提供清晰的层级结构。这个“jQuery网站导航下拉菜单实例”就是针对这一需求的实现方案。 jQuery，一个轻量级的...
使用jQuery实现图书菜单导航栏
weixin_67224308的博客
10-14 432
点击 " 更多" ，图书分类展开至全部。用if...else结构书写点击 " 简化☚ " ，图书分类收起至五个（前四个+最后一个）。三、在HTML里引入css布局（link）一、首先我们先写一个HTML布局。四、引入JQ类库---书写代码。二、接下来我们来写css的布局。
46 jQuery-列表中的导航菜单
LiGuogang
12-30 342
1. 效果图 2.html代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;45 jQuery-列表中的导航菜单&amp;lt;/title&amp;g
jquery实现导航下拉菜单
joan_yb的博客
07-29 1960
jquery实现导航下拉菜单
15个很棒的jQuery导航菜单
12-15 140
导航设计是任何网站 ，因为您的访问者将很多可能看到他们的第一次访问的一个非常重要的组成部分 。 理想的情况下，有一个良好的主菜单导航，使您的网站上方便，快捷，最重要的是你的访问者会舒服浏览您的网站。 然而，一些网站仍然采用了可怜的看着导航; 简单的白色背景，上面有文字像超链接。 所以我们要使用jQuery的力量，使它们看起来好和专业有15个jQuery的导航菜单插件。 请享用。 相关文章： ...
分享20个漂亮强大的jQuery导航菜单
smile725775的专栏
06-21 5142
在网页中，菜单导航要的功能是十分重要的，它能告诉你要寻找信息的准确位置。在jQuery中，有众多的优秀的脚本可以帮助你去实现某一方面的功能，但在导航菜单方面，数量虽然也不少，但优秀的导航菜单却不是很多。本文将选取了20个漂亮强大的使用jQuery菜单的插件或教程，并给出了下载或学习的地址，其中必定有你所喜欢的。　　1 漂亮的滑动弹出效果　　这是一款漂亮的向右滑动弹出的效果，其运
jQuery示例：折叠菜单与JavaScript高级技巧
本篇文章主要探讨了jQuery在JavaScript技术中的实际应用，特别是通过一个折叠式菜单（Accordion）的实例来展示其功能。折叠式菜单在网页设计中常用于提供更清晰的导航结构，用户可以通过点击主菜单项，实现二级菜单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值