jQuery+css超滑二级下拉菜单--（法1）

最新推荐文章于 2024-01-17 21:31:23 发布
最新推荐文章于 2024-01-17 21:31:23 发布
阅读量839 收藏
点赞数
分类专栏： div+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ysydao/article/details/9096677
版权

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码" />
<meta name="description" content="jQuery+css超滑二级下拉菜单" />
<title>jQuery+css超滑二级下拉菜单</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<style type="text/css">
    html, body, ul, li, h1, h2, h3, h4, h5, h6, p, fieldset, legend {padding:0; margin:0;}
body {font:12px/normal Verdana, Arial,"微软雅黑", Helvetica, sans-serif;}
ul,li {list-style-type:none; text-transform:capitalize;}
.clear {clear:both; *display:inline;/*IE only*/}

/*menu*/
#nav {margin:0 auto 60px; width:1080px; display:block;}
#nav .jquery_out {background:#000;float:left;line-height:32px;display:block;width:140px; border-right:1px solid #fff; text-align:center; color:#fff;font:18px/32px ;}
#nav .mainlevel {background:#ffe60c; float:left; border-right:1px solid #fff; width:140px;/*IE6 only*/}
#nav .mainlevel a {color:#000; text-decoration:none; line-height:32px; display:block; padding:0 20px; width:100px;}
#nav .mainlevel a:hover {color:#fff; text-decoration:none; background:#062723 url(../images/slide-panel_03.png) 0 0 repeat-x;}
#nav .mainlevel ul {display:none; position:absolute;}
#nav .mainlevel li {border-top:1px solid #fff; background:#ffe60c; width:140px;/*IE6 only*/}
.log {text-align:center; color:skyblue; line-height:24px; text-transform:capitalize; margin:50px auto;}
</style>
<script type="text/javascript">
    $(document).ready(function(){
 
  $('li.mainlevel').mouseover(function(){
  $(this).find('ul').slideDown();//you can give it a speed
  });
  $('li.mainlevel').mouseleave(function(){
  $(this).find('ul').slideUp("fast");
  });
 
});
</script>
</head>

<body>


<div id="menu">
<ul id="nav">

    <li class="jquery_out">let jquery
    </li>
   
    <li class="mainlevel" id="mainlevel_01"><a href="#">do touch me</a>
    <ul id="sub_01">
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">slideUp</a></li>
    <li><a href="#">slideDown</a></li>
    <li><a href="#">up and down</a></li>
    <li><a href="#">animate</a></li>
    </ul>
    </li>
   
    <li class="mainlevel" id="mainlevel_02"><a href="#">do touch me</a>
    <ul id="sub_02">
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">slideUp</a></li>
    <li><a href="#">slideDown</a></li>
    <li><a href="#">up and down</a></li>
    <li><a href="#">animate</a></li>
    </ul>
    </li>
   
    <li class="mainlevel" id="mainlevel_03"><a href="#">do touch me</a>
    <ul id="sub_03">
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">slideUp</a></li>
    <li><a href="#">slideDown</a></li>
    <li><a href="#">up and down</a></li>
    <li><a href="#">animate</a></li>
    </ul>
    </li>
   
    <li class="mainlevel" id="mainlevel_04"><a href="#">do touch me</a>
    <ul id="sub_04">
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">slideUp</a></li>
    <li><a href="#">slideDown</a></li>
    <li><a href="#">up and down</a></li>
    <li><a href="#">animate</a></li>
    </ul>
    </li>
   
    <li class="mainlevel" id="mainlevel_05"><a href="#">do touch me</a>
    <ul id="sub_05">
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">slideUp</a></li>
    <li><a href="#">slideDown</a></li>
    <li><a href="#">up and down</a></li>
    <li><a href="#">animate</a></li>
    </ul>
    </li>
   
    <li class="mainlevel" id="mainlevel_06"><a href="#">do touch me</a>
    <ul id="sub_06">
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">slideUp</a></li>
    <li><a href="#">slideDown</a></li>
    <li><a href="#">up and down</a></li>
    <li><a href="#">animate</a></li>
    </ul>
    </li>
    <div class="clear"></div>

</ul>
</div>


</body>
</html>

养有道
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用css制作二级下拉菜单
何淑女的博客
10-26 1420
利用css制作二级下拉菜单 一目了然、通俗易懂——利用css制作二级下拉菜单
纯CSS实现二级导航下拉菜单
05-06
纯css实现二级导航下拉菜单，在一级导航的基础上建二级导航。不使用JavaScript，使用纯css来实现。
纯css 二级下拉菜单
树欲静而风不止
04-11 531
编程语言 .net java php c++ 国家语言 普通话 英语 法语 乐器 吉他 钢琴 古筝 二弦 编程职业 前端开发 后台开发 android开发 测试员 销售 熟练程度 一般 熟练 精通 #menu,#menu1,#menu2,#menu3,#menu4{ display:inline-block; position:relative; }
纯css实现二级下拉菜单
allenchang1987的专栏
09-27 757
ul { position: relative; list-style:none; margin: 0px; padding: 0px; } ul li { display: inline; float
css用div二级下拉菜单,“div+css”下拉菜单
weixin_29502483的博客
08-04 332
html, body {margin: 0;padding: 0;}.btn-group{font-size: 14px;position: relative;}.open>.dropdown-menu{display: block;}.btn{padding: 10px 30px;border: 1px #E8940B solid;background: #f1f1f1;}.dropdow...
非常酷炫的jQuery+css超滑二级下拉菜单
03-05
本资源"非常酷炫的jQuery+css超滑二级下拉菜单"正是针对这一需求，提供了一种既美观又流畅的解决方案。 首先，jQuery是一种轻量级、高性能的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画制作以及...
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
11-24
在本文中，我们将探讨如何使用jQuery和CSS技术创建一个炫丽的横向二级下拉菜单，同时提供源码供下载。这个菜单设计适用于网站导航，它不仅具有良好的视觉效果，还能帮助用户更方便地访问二级子菜单中的内容。 首先...
jquery+css实现横向二级下拉菜单
06-06
<li><a href="#">二级菜单1-1</a></li> <li><a href="#">二级菜单1-2</a></li> <li><a href="#">一级菜单2</a></li> <!-- 更多一级菜单项... --> ``` 接下来，我们用CSS来设置基础样式，确保菜单在默认...
jQuery+CSS3多功能下拉菜单
04-02
"jQuery+CSS3多功能下拉菜单"就是一个旨在提供高效、美观且响应式的菜单解决方案。这个菜单结合了JavaScript库jQuery和CSS3的强大功能，为用户提供丰富的交互体验。 jQuery是一个轻量级的JavaScript库，它的出现极...
css自学框架之二级下拉菜单
zhaoyang314的博客
09-22 935
用纯CSS实现鼠标经过后出现下拉菜单，二级下拉菜单，简单实用。
css3动画_二级下拉菜单
08-10
用css3 动画，渐变写的网页二级下拉菜单，无js，无图片，网页只有8k
初级基础HTML CSS实现二级下拉菜单
weixin_67318211的博客
04-21 6210
我们在日常浏览网页时，会经常看到有二级下拉菜单列表的应用。它在我们日常网页，特别是在头部导航运用较多，那我们如何通过HTML和CSS来实现它呢？ 1.HTML部分 HTML整体部分较为简单，看到这个结构，我们可以首先想到的是运用ul列表标签和a标签来整体实现。话不多说，代码如下： <header> <ul> <li> <a href="#">英雄介绍</a> .
css实现二级导航下拉菜单
最新发布
xiaozhou4233的博客
01-17 883
这是一个简单的二级导航下拉菜单，大伙觉得有用，可以点个赞，直接上代码了!
CSS二级菜单
weixin_30687587的博客
06-12 440
0.需求：当鼠标hover到按钮上时，出现下拉菜单导航条。 1.问题拆解： （1）HTML应该如何组织比较方便合理 因为题中要求下拉菜单位于按钮的正下方，可以使用列表<li>中嵌套无序列表<ul>的方式，设置<ul>padding值为0。（2）如何实现下拉菜单在鼠标没有hover到按钮上时不出现使用定位隐藏，设置下拉菜单为绝对定位，设置一个负的很大的...
css实现二级菜单
first_hands的博客
03-03 2435
由上面的实例可以看出，使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级菜单的li标签时，显示二级菜单的ul标签。display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。先隐藏二级的菜单，当鼠标移动到一级菜单的li标签时，在显示二级菜单的ul标签。list-style-type:none - 删除圆点。float：left-向左浮动，保证一级菜单水平显示。display:none-隐藏二级的菜单。
css实现简单下拉二级导航栏
happyxiaoxinxin的博客
04-03 433
【代码】css实现简单下拉二级导航栏。
HTML+CSS实现导航栏二级下拉菜单图书案例
zabr1314的博客
09-26 3213
一.效果图 二.内容、要求 学习完HTML5+CSS之后，可以考虑设计并实现一个导航栏菜单，对某个项目比如你的个人书籍按类别（硬件类、软件类、语言类、网络类等分法）进行分门别类，其中上面括号中的类别为导航栏的一级菜单，它们各自的二级菜单是你所拥有的或知道的几本可能的属于这些类别的具体书籍。 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
jQuery左侧二级菜单树
wfs3009的专栏
11-05 530
jQuery多级折叠(树形)菜单，动态展开和收缩。所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套，代码内不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏。 　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。
jQuery左导航菜单二级菜单slide滑动渐隐显示-20130706
xjwolaile的博客
07-07 320
1、效果及功能说明 导航菜单制作一个二级菜单导航条，鼠标滑过导航条二级菜单slide滑动展示且带有渐隐效果展示比较柔和的二级菜单目录 2、实现原理 先通过遍历匹配到每一个元素，这个是为了让所有的导航栏都可以获得显出相对因下拉框的效果，定义一个伪类事件让鼠标触及到导航栏后触发相对因的下拉框在给下拉框一个类这个类定义好了下拉框的样式，下拉框的出现是同意一个动画的效果来实现，时间为0....
jquery+ajax+js三级下拉菜单
05-25
以下是一个简单的jquery+ajax+js三级下拉菜单的示例代码： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>三级下拉菜单</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="select-box"> <select class="select-1"></select> <select class="select-2"></select> <select class="select-3"></select> </div> <script src="script.js"></script> </body> </html> ``` CSS代码： ```css .select-box select { padding: 5px; font-size: 16px; border: none; background-color: #f2f2f2; margin-right: 10px; } .select-box select:last-child { margin-right: 0; } ``` JS代码： ```js $(document).ready(function(){ // 定义省市区数据 var data = { "provinces": [ { "name": "北京市", "cities": [ { "name": "北京市", "areas": [ {name:'东城区'}, {name:'西城区'}, {name:'朝阳区'}, {name:'丰台区'}, {name:'石景山区'}, {name:'海淀区'}, {name:'门头沟区'}, {name:'房山区'}, {name:'通州区'}, {name:'顺义区'}, {name:'昌平区'}, {name:'大兴区'}, {name:'怀柔区'}, {name:'平谷区'}, {name:'密云县'}, {name:'延庆县'} ] } ] }, { "name": "江苏省", "cities": [ { "name": "南京市", "areas": [ {name:'玄武区'}, {name:'白下区'}, {name:'秦淮区'}, {name:'建邺区'}, {name:'鼓楼区'}, {name:'下关区'}, {name:'浦口区'}, {name:'栖霞区'}, {name:'雨花台区'}, {name:'江宁区'}, {name:'六合区'}, {name:'溧水县'}, {name:'高淳县'} ] }, { "name": "苏州市", "areas": [ {name:'姑苏区'}, {name:'相城区'}, {name:'吴中区'}, {name:'虎丘区'}, {name:'吴江区'}, {name:'常熟市'}, {name:'张家港市'}, {name:'昆山市'}, {name:'太仓市'} ] } ] }, { "name": "浙江省", "cities": [ { "name": "杭州市", "areas": [ {name:'上城区'}, {name:'下城区'}, {name:'江干区'}, {name:'拱墅区'}, {name:'西湖区'}, {name:'滨江区'}, {name:'萧山区'}, {name:'余杭区'}, {name:'富阳区'}, {name:'桐庐县'}, {name:'淳安县'}, {name:'建德市'}, {name:'临安市'} ] }, { "name": "宁波市", "areas": [ {name:'海曙区'}, {name:'江东区'}, {name:'江北区'}, {name:'北仑区'}, {name:'镇海区'}, {name:'鄞州区'}, {name:'象山县'}, {name:'宁海县'}, {name:'余姚市'}, {name:'慈溪市'}, {name:'奉化市'} ] } ] } ] }; // 初始化省份列表 var provinceList = ''; for (var i = 0; i < data.provinces.length; i++) { provinceList += '<option value="' + i + '">' + data.provinces[i].name + '</option>'; } $('.select-1').append(provinceList); // 初始化城市列表 $('.select-1').change(function(){ var index = $('.select-1 option:selected').val(); var cityList = ''; for (var i = 0; i < data.provinces[index].cities.length; i++) { cityList += '<option value="' + i + '">' + data.provinces[index].cities[i].name + '</option>'; } $('.select-2').empty().append(cityList); $('.select-3').empty(); }); // 初始化区县列表 $('.select-2').change(function(){ var index1 = $('.select-1 option:selected').val(); var index2 = $('.select-2 option:selected').val(); var areaList = ''; for (var i = 0; i < data.provinces[index1].cities[index2].areas.length; i++) { areaList += '<option value="' + i + '">' + data.provinces[index1].cities[index2].areas[i].name + '</option>'; } $('.select-3').empty().append(areaList); }); // 提交表单 $('#submit').click(function(){ var province = $('.select-1 option:selected').text(); var city = $('.select-2 option:selected').text(); var area = $('.select-3 option:selected').text(); if (province == '' || city == '' || area == '') { layer.msg('请选择完整的省市区'); return false; } else { layer.msg('您选择的地址是：' + province + ' ' + city + ' ' + area); return false; } }); }); ``` 这个示例代码使用了一个名为layer的UI库来展示提示信息，如果您没有使用过可以直接去官网下载使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值