<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
<!-- 引入iconfont -->
<link rel="stylesheet" type="text/css" href="font/iconfont.css">
<!-- 引入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
body,
html {
height: 100%;
background: #E2E2E2
}
body,
ul {
margin: 0;
padding: 0
}
body {
font: 14px "微软雅黑", "宋体", "Arial Narrow", HELVETICA;
-webkit-text-size-adjust: 100%;
}
li {
list-style: none
}
a {
text-decoration: none;
}
/* 以上实际使用若已初始化可删除 */
/* nav */
.nav {
width: 220px;
height: 100%;
background: #263238;
transition: all .3s;
}
.nav a {
display: block;
overflow: hidden;
padding-left: 20px;
line-height: 46px;
max-height: 46px;
color: #ABB1B7;
transition: all .3s;
}
.nav a span {
margin-left: 30px;
}
.nav-item ul {
display: none;
background: rgba(0, 0, 0, .1);
}
.nav-item.nav-show ul {
display: block;
}
.nav-item>a:before {
content: "";
position: absolute;
left: 0px;
width: 2px;
height: 46px;
background: #34A0CE;
opacity: 0;
transition: all .3s;
}
.nav .nav-icon {
font-size: 20px;
position: absolute;
margin-left: -1px;
}
/* 此处修改导航图标 可自定义iconfont 替换*/
.icon_1::after {
content: "\e62b";
}
.icon_2::after {
content: "\e669";
}
.icon_3::after {
content: "\e61d";
}
/*---------------------*/
.nav-more {
float: right;
margin-right: 20px;
font-size: 12px;
transition: transform .3s;
}
/* 此处为导航右侧箭头 如果自定义iconfont 也需要替换*/
.nav-more::after {
content: "\e621";
}
/*---------------------*/
.nav-show .nav-more {
transform: rotate(90deg);
}
.nav-show,
.nav-item>a:hover {
color: #FFF;
background: rgba(0, 0, 0, .1);
}
.nav-show>a:before,
.nav-item>a:hover:before {
opacity: 1;
}
.nav-item li:hover a {
color: #FFF;
background: rgba(0, 0, 0, .1);
}
/* nav-mini */
.nav-mini.nav {
width: 60px;
}
.nav-mini.nav .nav-item>a span {
display: none;
}
.nav-mini.nav .nav-more {
margin-right: -20px;
}
.nav-mini.nav .nav-item ul {
position: absolute;
top: 0px;
left: 60px;
width: 180px;
z-index: 99;
background: #3C474C;
overflow: hidden;
}
.nav-mini.nav .nav-item:hover {
background: rgba(255, 255, 255, .1);
}
.nav-mini.nav .nav-item:hover .nav-item a {
color: #FFF;
}
.nav-mini.nav .nav-item:hover a:before {
opacity: 1;
}
.nav-mini.nav .nav-item:hover ul {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-top">
<div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="images/mini.png"></div>
</div>
<ul>
<li class="nav-item">
<a href="javascript:;"><i class="my-icon nav-icon icon_1"></i><span>网站配置</span><i
class="my-icon nav-more"></i></a>
<ul>
<li><a href="javascript:;"><span>网站设置</span></a></li>
<li><a href="javascript:;"><span>友情链接</span></a></li>
<li><a href="javascript:;"><span>分类管理</span></a></li>
<li><a href="javascript:;"><span>系统日志</span></a></li>
</ul>
</li>
<li class="nav-item">
<a href="javascript:;"><i class="my-icon nav-icon icon_2"></i><span>文章管理</span><i
class="my-icon nav-more"></i></a>
<ul>
<li><a href="javascript:;"><span>站内新闻</span></a></li>
<li><a href="javascript:;"><span>站内公告</span></a></li>
<li><a href="javascript:;"><span>登录日志</span></a></li>
</ul>
</li>
<li class="nav-item">
<a href="javascript:;"><i class="my-icon nav-icon icon_3"></i><span>订单管理</span><i
class="my-icon nav-more"></i></a>
<ul>
<li><a href="javascript:;"><span>订单列表</span></a></li>
<li><a href="javascript:;"><span>打个酱油</span></a></li>
<li><a href="javascript:;"><span>也打酱油</span></a></li>
</ul>
</li>
</ul>
</div>
<div style="text-align:center;margin:-650px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
<script>
/* 等到页面加载完成后执行 */
$(function() {
/* 点击一级菜单隐藏二级菜单 */
$(".nav-item a").click(function() {
/* 判断有没有nav-show这个类名 如果有就隐藏 没有就显示 */
if ($(this).parent().hasClass('nav-show')) {
$(this).next().slideUp();
} else {
$(this).next().slideDown();
}
//给自己添加nav-show类名的同时,要删除其他兄弟的nav-show类名,同时还要动画效果隐藏兄弟的ul子元素
$(this).parent().toggleClass("nav-show").siblings().removeClass("nav-show").children("ul").slideUp();
})
//点击左上角的菜单图标, 让导航变成迷你导航。添加nav-mini类。
$("#mini").click(function() {
//先让所有的二级菜单隐藏。 行内式删除,nav-show要删除
$(".nav-item ul").removeAttr("style").parent().removeClass("nav-show");
$(".nav").toggleClass("nav-mini")
})
})
</script>
</body>
</html>
用jQuery写一个下拉菜单的案例
最新推荐文章于 2022-09-12 01:08:12 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)