jQuery实现导航二级下拉菜单

最新推荐文章于 2024-08-17 23:24:44 发布
最新推荐文章于 2024-08-17 23:24:44 发布
阅读量2.8k 收藏 5
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linyiphp/article/details/79021127
版权
jQuery实现二级下拉菜单：
jQuery实现导航二级下拉菜单 - 临沂网络公司 - 临沂网站建设 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery二级菜单</title>
<style type="text/css">
body{ font:12px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53",Arial; }
ul,li{ margin:0; padding:0; list-style:none; }
/* m-nav */
.m-nav{ background-color:#06c; width:1000px; height:40px; line-height:40px; margin:0 auto; }
.m-nav li.itm{ display:inline; float:left; width:125px; position:relative; text-align:center; }
.m-nav a.itm-a{ display:block; }
.m-nav a.itm-a:hover{ background-color:#05b; }
.m-nav ul.son{ background-color:#06c; width:125px; position:absolute; left:0; top:40px; display:none; }
.m-nav a.son-itm-a{ display:block; font-size:12px; }
.m-nav a.son-itm-a:hover{ background-color:#05b; }
.m-nav a{ color:#fff; font-size:13px; text-decoration:none; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  	$('li.itm').mousemove(function(){
		$(this).find('ul').slideDown();
  	});
  	$('li.itm').mouseleave(function(){
		$(this).find('ul').stop(1,1).slideUp();
  	});
});
</script>
</head>
<body>
<div class="m-nav">
    <ul>
    	<li class="itm"><a href="http://www.shunwangnet.com/" class="itm-a">网站首页</a></li>
        <li class="itm">
            <a href="http://phply.blog.163.com/blog/#" class="itm-a">关于我们</a>
            <ul class="son">
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
            </ul>
        </li>
        <li class="itm">
            <a href="http://phply.blog.163.com/blog/#" class="itm-a">新闻资讯</a>
            <ul class="son">
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
            </ul>
        </li>
        <li class="itm">
            <a href="http://phply.blog.163.com/blog/#" class="itm-a">服务项目</a>
            <ul class="son">
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
            </ul>
        </li>
        <li class="itm">
            <a href="http://phply.blog.163.com/blog/#" class="itm-a">解决方案</a>
            <ul class="son">
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
            </ul>
        </li>
        <li class="itm">
            <a href="http://phply.blog.163.com/blog/#" class="itm-a">服务支持</a>
            <ul class="son">
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
            </ul>
        </li>
        <li class="itm">
            <a href="http://phply.blog.163.com/blog/#" class="itm-a">在线留言</a>
            <ul class="son">
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
            </ul>
        </li>
        <li class="itm">
            <a href="http://www.shunwangnet.com/" class="itm-a">联系我们</a>
            <ul class="son">
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
                <li class="son-itm"><a href="http://phply.blog.163.com/blog/#" class="son-itm-a">网站栏目</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
阿贝不聪明
关注
专栏目录
利用Jquery实现二级下拉菜单
yangpiaoluotianya的专栏
02-12 1016
最近在学习前端的内容：看到别人做的二级菜单挺好看的。下载别人的Demo看起来比较麻烦，所以就尝试了自己做一个简单二级下拉菜单： 效果图如下： 下拉菜单实现后的效果图： 没有做什么美化，只是从功能上实现下拉菜单 HTMLdai
JQuery 实现二级下拉菜单
asd135821jkl的专栏
03-12 1196
jQuery二级导航菜单     $(function () {         $('#nav li').mousemove(function () {             $(this).find('ul').slideDown("slow");         });         $('#nav li').mouseleave(function () {
jQuery二级下拉菜单
08-28
利用JavaScript中的select标签模仿新浪微博的二级下拉菜单
jquery 实现下拉菜单
qweqwe
12-15 254
  该文章属于原创：转载注明出处：http://www.pm-road.com/index.php/2014/12/09/276/ Jquery 是一个轻量的框架，个人认为非常好用，今天就写一个非常简单的例子，实现下拉菜单功能； 首先肯定要在页面引用jquery.js  版本不限 ； 接下来把=====================html贴出来：   &lt;div clas...
用jquery实现下拉菜单并解决下拉菜单不显示的问题
最新发布
weixin_73760234的博客
08-17 309
半年前学的前端现在大多忘记了。。。今天接单帮一位同学做web前端作业又重新学了下，今天写的导航栏，有一点要求实现下拉菜单，我选择利用jq实现，但是html，css，js全写好后下拉菜单不显示，调了半个小时才发现，原来……👇👇👇。
jquery设置下拉菜单
weixin_30646505的博客
12-15 126
jQuery代码 1,引用jQuery库 2，show方法 3，hide方法 <script type="text/javascript"> $function(){ $(".navmeau").mouseover(function(){ $(this).children("ul").show(); }) $(".navmeau").mouseout(function(){...
jquery实现二级导航下拉菜单效果
10-23
本教程将详细介绍如何使用jQuery实现二级导航下拉菜单的效果。 首先，我们需要准备HTML结构。一个基本的二级导航菜单通常包含一个`<ul>`元素作为顶级菜单，其内部的`<li>`元素代表一级菜单项，而每个一级菜单项内再...
jquery实现二级导航下拉菜单效果实例
10-17
主要介绍了jquery二级导航下拉菜单，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
jQuery实现简单二级下拉菜单
10-24
最后，在文章的结尾部分，作者再次强调，这只是一个简单的二级下拉菜单实现示例。对于想要美化界面的开发者，可以在现有的代码基础上进行改进，添加更多自定义的样式和功能，让下拉菜单与网站的整体风格协调一致。
jQuery个性动画二级下拉导航菜单.rar
05-28
这个项目利用了JavaScript库jQuery 1.8.3的强大力量，结合精心设计的动画效果，为用户提供了直观且吸引人的二级下拉菜单。 jQuery是一个轻量级、高性能的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax...
jquery实现的二级导航代码
wanglei0832的博客
07-27 748
js代码：适用于三级导航 (“.menu”).on(“click”,”li”,function(e){              e.stopPropagation();              if((“.menu”).on(“click”,”li”,function(e){ e.stopPropagation(); if((this).
jquery简单的二级下拉菜单.zip 带有完整的实例
11-15
带有完整实例的利用jquery实现的简单的二级下拉菜单，方便学习和使用
jquery 下拉菜单
05-25
jquery特效
jquery下拉菜单,简单的下拉菜单
08-18
jquery下拉菜单,简单的下拉菜单。基于jquery写的一个简单的下拉菜单效果，希望对大家有用
jquery鼠标滑过显示二级下拉菜单代码
01-18
jquery鼠标滑过显示二级下拉菜单代码，代码完成可运行。包括html, js, css.
下拉菜单-JQUERY
09-27
下拉菜单-JQUERY下拉菜单-JQUERY下拉菜单-JQUERY
向下的二级菜单 用html,基于jQuery实现的向下滑动二级菜单效果代码
weixin_34374031的博客
06-04 176
本文实例讲述了基于jQuery实现的向下滑动二级菜单效果代码。分享给大家供大家参考。具体如下：这是一款使用jQuery制作向下滑动的二级菜单，本二级菜单带有动画效果，而且比较流畅，鼠标放在一级菜单上，就可以向下滑出二级子菜单，相对实用。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...
CSS/JQuery实现二级菜单栏下滑
Jane_3210的博客
10-16 485
CSS实现方法 使用相对定位和绝对定位，先隐藏二级栏目，鼠标经过后设为可见，并结合css动画效果。 li{list-style: none;text-align:center; } a{text-decoration: none;} li.item{ position: relative; width: 130px; background: r...
jquery简单动画效果（下）
男儿当自强
10-17 420
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here $(document).ready(function(){ $(":input:eq(0)").click(function(){ $("div").sli
jQuery实战：实现二级导航下拉菜单教程
本文档主要介绍了如何使用jQuery框架实现一个二级导航下拉菜单的效果。jQuery作为JavaScript的封装工具，简化了前端开发者的操作，使得处理DOM元素更加便捷。以下是实现该效果的关键知识点： 1. **jQuery基本用法**...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值