【菜单下拉效果】基于jquery实现二级菜单下拉效果（附完整源码下载）

Js菜单下拉特效目录

🍔涉及知识
🥤写在前面
实现效果
🍧一、涉及知识
🌳二、具体实现
- 2.1 搭建一级菜单
- 2.2 搭建二级菜单项
- 2.3 引入js文件
- 2.4 构建CSS文件
🐋三、源码获取
🌅 作者寄语

🍔涉及知识

html菜单下拉特效，js实现二级菜单下拉效果，Js如何实现菜单下拉效果，js特效二级菜单实现，基于jquery实现菜单下拉功能，菜单下拉特效如何实现。

✨讲专栏✨：web 菜单特效
🌝关于我🌝：一个持续输出型博主，爱分享，喜技术，期待关注与交流！
🧡公众号🧡：《IT黄大大》更多分享抢先看；
🌈说主题🌈：影视，明星，家乡，旅游，个人，美食，校园，商城，运动，特效等
🍗谈技术🍗：HTML+CSS，HTML+CSS+JS，Java+数据库，vue项目，aspx，jsp等
📝讲软件📝：vscode，dreamweaver，hbuilder，sublime text，eclipse，idea，VS等；

声明：原创于博主《IT黄大大》，欢迎大家转载，烦请转前注明出处，感谢大家的支持，更多专栏可关注文尾唯心宫众号《IT黄大大》

🥤写在前面

五一也过了，可以安心的继续整理web知识分享给大家了。在很多人的作业里面估计都会涉及到JavaScript效果啥的，近两天就遇到一个粉丝和我说能不能出一些关于特效类的分享，这不我就整理了一下，顺便说一下它实现的原理，希望能够给到大家帮助。
其实我最喜欢的还是和大家先分享效果，觉得可以的继续往下看，觉得不咋的也不用浪费时间，毕竟时间这玩意儿无价。

实现效果

在这里插入图片描述

🍧一、涉及知识

当然这个是基于jquery来做的，主要是我们要搭建一个dom节点，然后针对dom节点我们得制作出对应的菜单项，菜单我们一般能看到的是一级，那么要想做一个二级菜单效果，我们必须得在一级菜单下面添加二级菜单标签，当然这个标签不局限于div还是ul li之类的，只要是盒子元素都可以做的。
其核心在于css的样式设置及js代码的制作实现；
CSS这块主要用到了相对绝对定位，针对要下拉的菜单我们不能直接显示，默认是隐藏属性，且得相对一级菜单left为0；
Js这块我们的核心应用在于其鼠标移入事件的添加，只要我们将我们的鼠标事件设置好即可，比如鼠标移入时候我们让隐藏的元素展示，鼠标移出后再隐藏，从而达到一个动态的效果。

🌳二、具体实现

2.1 搭建一级菜单

首先我们得创建好一个dom用于存放菜单的盒子，然后将一级菜单展示出来，也就是如下：

 <div id="menu">
        <ul>
            <li>首页</li>
            <li>学校</li>
            <li>家乡</li>
            <li>IT黄大大</li>
        </ul>
    </div>

这样的话我们搭建好了我们的基础的div了，接下来就是在li里面再搭建一个ul li这样的话就是存在ul里面嵌套ul了，下一步我们就是把二级菜单进行构建。

2.2 搭建二级菜单项

<div id="menu">
        <ul>
            <li>首页</li>
            <li>学校</li>
            <li>家乡</li>
            <li>
                <a>IT黄大大</a>
                <ul>
                    <li>demo分享</li>
                    <li>特效分享</li>
                    <li>网页分享</li>
                </ul>
            </li>
        </ul>
    </div>

2.3 引入js文件

当然这边第一步我们得引入jquery组件，第二步就是引入业务逻辑js文件，实现菜单的收缩与隐藏功能，引入的话如下：

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

自己编写有关展开与伸缩功能的话需要添加如下代码：

$(document).ready(function(){
  
  $('li.mainlevel').mousemove(function(){
  $(this).find('ul').slideDown();//you can give it a speed
  });
  $('li.mainlevel').mouseleave(function(){
  $(this).find('ul').slideUp("fast");
  });
  
});

其实这个是实现的核心，然后就是CSS的渲染了。
声明：原创于博主《IT黄大大》，欢迎大家转载，烦请转前注明出处，感谢大家的支持，更多专栏可关注文尾唯心宫众号《IT黄大大》

2.4 构建CSS文件

其中主要是针对li下的ul设置成相对定位就可以，也就是position:absolute，这样的话就能充分保证其位置就是基于原先的li下面，不会存在位置的偏移。

#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*/}

当然很多人可能想要这个效果的源码，这边免费分享给大家，期望能够从源码中得到更多的技术充电，也希望能够和大家携手前行，2024一起进步。

🐋三、源码获取

源码获取方式：
1、灌注唯心公众号【IT黄大大】
2、回复【L002菜单下拉】
3、即可获取百度网盘下载链接。

🌅 作者寄语

如果我的这篇博客对您有帮助、而且您喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！当然如果这个文章对您带来不好的体验还希望能多多包涵，一起学习进步。

【关注我 | 获取更多源码 | 优质文章】带您学习前端知识、CSS特效、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板等! 「在z公z众z号<IT黄大大>里也会定期分享一些免费好看的html页面，期待您的关注哈」！
声明：原创于博主《IT黄大大》，欢迎大家转载，烦请转前注明出处，感谢大家的支持，更多专栏可关注文尾唯心宫众号《IT黄大大》
2024年我们一起加油，一起成长，感谢您的支持与谅解！
声明：原创于博主《IT黄大大》，欢迎大家转载，烦请转前注明出处，感谢大家的支持，更多专栏可关注文尾唯心宫众号《IT黄大大》