Jq-三级菜单(一二级为水平，三级为垂直)

最新推荐文章于 2021-03-04 17:58:59 发布
最新推荐文章于 2021-03-04 17:58:59 发布
阅读量254 收藏
点赞数
文章标签： xhtml
原文链接：https://yq.aliyun.com/articles/369964
版权
 
<!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" xml:lang="en">
<head>
    <title>豪情</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <style type="text/css">
        *{margin:0;padding:0;}
        body{font-size:12px;}
        li{list-style:none;}
        a{text-decoration:none;}
        a:link{color:#000;text-decoration:none;}
        a:hover{text-decoration:none;}
        #nav{width:500px;margin:0 auto;padding-top:20px;}
        #nav li{text-align:center;float:left;position:relative;}
        #nav li a{float:left;width:65px;height:30px;line-height:30px;border:1px solid #ccc;margin-right:15px;}
        #nav li a:hover{background:#eee;}
        #nav li ul{position:absolute;top:30px;left:0px;width:600px;display:none;}
        #nav li ul li a{width:65px;height:30px;line-height:30px;border:1px solid #ccc;}
        #nav li ul li ul{position:absolute;top:30px;left:0px;display:none;}
        #nav li ul li ul li{float:none;}
        #nav li ul li ul li a{float:none;display:block;}
        .a{border:#ff80c0 solid 2px;width:300px;height:200px;}
    </style>
    
    
</head>
<body>
    <ul id="nav">
        <li><a href="#">菜单一</a>
            <ul>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">菜单一</a>
            <ul>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">菜单一</a>
            <ul>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">菜单一</a>
            <ul>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">菜单一</a>
            <ul>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
                <li><a href="#">菜单二</a>
                    <ul>
                        <li><a href="#">菜单三1</a></li>
                        <li><a href="#">菜单三2</a></li>
                        <li><a href="#">菜单三3</a></li>
                        <li><a href="#">菜单三4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>








本文转自豪情博客园博客，原文链接：http://www.cnblogs.com/jikey/archive/2010/07/01/1769317.html，如需转载请自行联系原作者


weixin_33686714
关注
jq三级菜单
02-03
jQuery判断导航下拉到一定高度后导航固定到头部特效，这种效果经常看到一些分享网站，其实这种效果也是很方面用户不需要返回导航可以点击自己想要去的栏目，其实原理很简单，先给浏览器绑定滚动条滚动事件，获取当前浏览器滚动页面的高度，然后在获取导航条div距离头部的高度，如果他们一样的时候，那么加上一个class，css控制就是position:fixed;top:0px;即可
jquery水晶六级横向下拉菜单导航
06-05
<li><a href="#">二级菜单</a></li> <!-- 更多子菜单... --> <!-- 更多菜单项... --> ``` ```css .submenu { display: none; } .menu li:hover .submenu { display: block; } ``` ```javascript $...
jQuery实现三级菜单
weixin_45815557的博客
03-04 481
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src
jQuery 三级菜单
小田同學的博客
05-09 2622
在写这个的时候，首先要捋顺思路。点一个菜单的时候，其他的要闭合，点一级菜单的时候，二三级菜单要闭合，等等。 大致代码如下：<body> <aside> <ul class="one"> <li> <a href="#" class="a">目录A</a> <ul class="two" style="display:
jquery的三级菜单
weixin_34405332的博客
06-09 118
<!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"><head>...
jQuery五级导航下拉菜单
05-01
对于具有多级分类的网站，传统的水平或垂直菜单可能无法完全展示所有信息，此时下拉菜单就显得尤为重要。五级导航下拉菜单能够优雅地解决这个问题，用户只需鼠标悬停，就能看到多层次的子菜单，无需滚动页面或点击多...
jQ响应式多级菜单.zip
07-04
jQ响应式多级菜单作为一种流行的技术，不仅满足了网页在不同设备上的自适应需求，还为用户提供了一种流畅、直观的浏览体验。本文将深入探讨jQ响应式多级菜单的设计原理、实现方式以及优化策略。 一、设计原理 jQ...
jQuery垂直多级导航菜单代码分享
10-23
例如，二级目录可以通过额外的和组合来表示，三级目录可以继续嵌套。通过这样的层级结构，能够构建出多级菜单。 4. 图片与内容展示：在导航菜单中嵌入图片，可以增加界面的直观性和美观性。例如，使用来展示更多...
jQuery后台页面左侧竖直二级导航栏特效代码
03-20
本资源"jQuery后台页面左侧竖直二级导航栏特效代码"正是利用jQuery的强大功能来实现后台管理界面中的一个关键组件：二级垂直导航栏。 一、jQuery基础 jQuery的核心理念是“Write Less, Do More”，通过简洁的语法...
漂亮的jquery三级下拉菜单
03-09
漂亮的下拉菜单 jquery三级下拉菜单
垂直左部三级菜单垂直左部三级菜单
07-01
垂直左部三级菜单垂直左部三级菜单垂直左部三级菜单垂直左部三级菜单垂直左部三级菜单垂直左部三级菜单
jQuery三级下拉列表导航菜单.zip
05-25
jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js，可无限极分类，可智能判断是否有下级菜单，鼠标经过上次菜单显示下级菜单。
二级,三级下拉列表菜单
04-14
三级下拉列表菜单,就是选择地址效果,即 中国 四川 成都,实用
Jquery实现三级菜单的制作
Wangdanting123的博客
05-08 6319
Jquery实现三级菜单的制作
jQuery实现三级联动菜单
m0_46390103的博客
05-27 1307
jQuery实现三级联动菜单效果 思路：首先需要获取相对数据接口，我这里举例的城市接口，我准备在city.json文件中。然后使用jquery中的方法实现三级菜单联动。 js代码如下： <script> ! function($) { let $show = $('#show'); //显示框 let $prov = $('#prov'); //省份 let $city = $('#city'); //城市
基于jQuery垂直多级导航菜单代码
weixin_34174322的博客
06-25 240
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载。效果图如下： 在线预览    源码下载 实现的代码。 html代码： &lt;ul class="ce"&gt; &lt;li&gt; &lt;a class="xz" href="#"&gt;目录A&lt;/a&gt; &lt;/li&gt;
js原生加jq写三级联动下拉菜单
qq_40057138的博客
10-17 375
HTML代码 <form> <div class="area"> <label> <select name="province" id="province"></select> </label> <label> ...
帮我写一个jq三级菜单
最新发布
01-30
好的，下面是一个基于 jQuery 的三级菜单的简单示例： ``` <script src="https://code.jquery.com/jquery-3.6.0.min.js"> .sub-menu { display: none; } .menu-item:hover .sub-menu { display: block; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值