如何实现一个简单的下拉菜单导航

本文不涉及任何标签语法的讲解和特殊类的使用

本文利用js和jqurery的语法设计实现简单的下拉菜单导航栏

技术要点：

鼠标移动到工坊时菜单滑出，离开时收起。

鼠标可以点击子菜单。

鼠标滑动到的菜单会变高亮。

鼠标移动到导航栏范围时会改变形状。

导航栏HTML部分

主页

web学习

工坊

网站

小程序

APP

联系我们

利用和无序列表创建导航栏，CSS设定导航栏的形状，黑底白字。

#main {

position: relative;

list-style: none;

background-color: #111222;

font-weight: 400;

font-size: 5;

text-transform: uppercase;

display: inline-block;

padding: 0;

margin: 50px auto;

}

#main li {

font-size: 1rem;

font-weight: bold;

color: whitesmoke;

display: inline-block;

position: relative;

padding: 15px 20px;

cursor: pointer;

z-index: 2;

min-width: 120px;

}

li {

margin: 0;

}

设定drop的样式，position: 定位方式需为绝对定位，才可不影响页面的排版。z-index: 2;设置元素优先度。cursor: pointer;改变鼠标样式。

.drop

.drop li{

font-size: 1rem;

font-weight: bold;

color: whitesmoke;

display: inline-block;

padding:10px;

cursor: pointer;

z-index: 5;

min-width: 120px;

}

为实现随鼠标移动而出现消失的子菜单，首先在页面加载完成时隐藏子菜单drop

$(document).ready(function(){

$(".d1").hide();

})

当鼠标移动到工坊时子菜单滑出，离开时划入，需在工坊菜单设定js事件函数onmouseover，onmouseout，调用时间函数。slidedown滑入，slideup滑出。

function mout(obj)

function mhide(obj)

stop函数的作用是为了防止鼠标连续多此划过而导致即使鼠标离开，子菜单仍不断弹出的情况

function active(obj){$(obj).css("color","#000000").css("background-color","#A9A9A9")}

function nomal(obj){$(obj).css("background-color","inherit").css("color","whitesmoke")}

active和normal设置鼠标划过时的高亮属性和通常属性，通过JQUERY的.css()方法改变元素属性

关注公众号获取更多技术资源