精致的服务类网站侧导航
程序员文章站
2022-06-22 11:52:56
效果图 index.html index
效果图
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="sec-mainl left">
<div class="mainl-hd-box">
<h2 class="mainl-hd">
<a href="">所有入驻商家</a>
</h2>
</div>
<!-- 菜单内容 -->
<ul class="sec-mainnav">
<li>
<!-- 一级菜单 -->
<h3>数码家电</h3>
<div class="menu-tab">
<a href="">京东</a>
<a href="">易迅</a>
<a href="">苏宁易购</a>
<div class="fix"></div>
</div>
<span class="menu-more">更多</span>
<!-- 二级菜单 -->
<div class="menu-panel">
<div class="menu-panel-hd">
<h4>热门分类</h4>
<div class="sub-group">
<a href="">京东</a>
<a href="">易迅</a>
<a href="">苏宁易购</a>
<a href="">新蛋商城</a>
<a href="">手机数码</a>
<a href="">摄像影音</a>
<a href="">耳麦音响</a>
<a href="">国美在线</a>
</div>
</div>
<div class="menu-panel-bd">
<ul>
<li>
<a href=""><img src="images/0.png" /></a>
</li>
<li>
<a href=""><img src="images/0 (1).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (2).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (3).png" /></a>
</li>
<li>
<a href=""><img src="images/0.jpg" /></a>
</li>
</ul>
</div>
<a href="" class="menu-panel-btn">
<span>查看全部商家</span>
<em></em>
</a>
</div>
</li>
<li>
<h3>食品酒水</h3>
<div class="menu-tab">
<a href="">美食特产</a>
<a href="">酒水茶叶</a>
<a href="">蛋糕预订</a>
<div class="fix"></div>
</div>
<span class="menu-more">更多</span>
<div class="menu-panel">
<div class="menu-panel-hd">
<h4>热门分类</h4>
<div class="sub-group">
<a href="">美食特产</a>
<a href="">酒水茶叶</a>
<a href="">蛋糕预订</a>
</div>
</div>
<div class="menu-panel-bd">
<ul>
<li>
<a href=""><img src="images/0.png" /></a>
</li>
<li>
<a href=""><img src="images/0 (1).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (2).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (3).png" /></a>
</li>
<li>
<a href=""><img src="images/0.jpg" /></a>
</li>
</ul>
</div>
<a href="" class="menu-panel-btn">
<span>查看全部商家</span>
<em></em>
</a>
</div>
</li>
<li>
<h3>商旅出行</h3>
<div class="menu-tab">
<a href="">酒店预订</a>
<a href="">机票预订</a>
<a href="">商旅综合</a>
<div class="fix"></div>
</div>
<span class="menu-more">更多</span>
<div class="menu-panel">
<div class="menu-panel-hd">
<h4>热门分类</h4>
<div class="sub-group">
<a href="">酒店预订</a>
<a href="">机票预订</a>
<a href="">商旅综合</a>
<a href="">度假预订</a>
<a href="">火车票预订</a>
</div>
</div>
<div class="menu-panel-bd">
<ul>
<li>
<a href=""><img src="images/0.png" /></a>
</li>
<li>
<a href=""><img src="images/0 (1).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (2).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (3).png" /></a>
</li>
<li>
<a href=""><img src="images/0.jpg" /></a>
</li>
</ul>
</div>
<a href="" class="menu-panel-btn">
<span>查看全部商家</span>
<em></em>
</a>
</div>
</li>
<li>
<h3>日用百货</h3>
<div class="menu-tab">
<a href="">飞飞商城</a>
<a href="">图书教育</a>
<a href="">百货</a>
<div class="fix"></div>
</div>
<span class="menu-more">更多</span>
<div class="menu-panel">
<div class="menu-panel-hd">
<h4>热门分类</h4>
<div class="sub-group">
<a href="">飞飞商城</a>
<a href="">图书教育</a>
<a href="">百货</a>
<a href="">家纺家具</a>
</div>
</div>
<div class="menu-panel-bd">
<ul>
<li>
<a href=""><img src="images/0.png" /></a>
</li>
<li>
<a href=""><img src="images/0 (1).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (2).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (3).png" /></a>
</li>
<li>
<a href=""><img src="images/0.jpg" /></a>
</li>
</ul>
</div>
<a href="" class="menu-panel-btn">
<span>查看全部商家</span>
<em></em>
</a>
</div>
</li>
<li>
<h3>男女服装</h3>
<div class="menu-tab">
<a href="">时尚女装</a>
<a href="">精品男装</a>
<a href="">男女内衣</a>
<div class="fix"></div>
</div>
<span class="menu-more">更多</span>
<div class="menu-panel">
<div class="menu-panel-hd">
<h4>热门分类</h4>
<div class="sub-group">
<a href="">时尚女装</a>
<a href="">精品男装</a>
<a href="">男女内衣</a>
<a href="">综合商城</a>
<a href="">限时特卖</a>
<a href="">淘宝品牌</a>
<a href="">休闲服饰</a>
<a href="">运动户外</a>
</div>
</div>
<div class="menu-panel-bd">
<ul>
<li>
<a href=""><img src="images/0.png" /></a>
</li>
<li>
<a href=""><img src="images/0 (1).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (2).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (3).png" /></a>
</li>
<li>
<a href=""><img src="images/0.jpg" /></a>
</li>
</ul>
</div>
<a href="" class="menu-panel-btn">
<span>查看全部商家</span>
<em></em>
</a>
</div>
</li>
<li>
<h3>鞋包配饰</h3>
<div class="menu-tab">
<a href="">潮流女鞋</a>
<a href="">商务男鞋</a>
<a href="">时尚包包</a>
<div class="fix"></div>
</div>
<span class="menu-more">更多</span>
<div class="menu-panel">
<div class="menu-panel-hd">
<h4>热门分类</h4>
<div class="sub-group">
<a href="">潮流女鞋</a>
<a href="">商务男鞋 </a>
<a href="">时尚包包</a>
<a href="">运动休闲</a>
<a href="">珠宝首饰</a>
<a href="">经典腕表</a>
<a href="">户外生活</a>
<a href="">奢侈品</a>
</div>
</div>
<div class="menu-panel-bd">
<ul>
<li>
<a href=""><img src="images/0.png" /></a>
</li>
<li>
<a href=""><img src="images/0 (1).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (2).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (3).png" /></a>
</li>
<li>
<a href=""><img src="images/0.jpg" /></a>
</li>
</ul>
</div>
<a href="" class="menu-panel-btn">
<span>查看全部商家</span>
<em></em>
</a>
</div>
</li>
<li>
<h3>美容美妆</h3>
<div class="menu-tab">
<a href="">天天网</a>
<a href="">美妆商城</a>
<a href="">眼镜美瞳</a>
<div class="fix"></div>
</div>
<span class="menu-more">更多</span>
<div class="menu-panel">
<div class="menu-panel-hd">
<h4>热门分类</h4>
<div class="sub-group">
<a href="">天天网</a>
<a href="">美妆商城</a>
<a href="">眼镜美瞳</a>
<a href="">品牌商城</a>
</div>
</div>
<div class="menu-panel-bd">
<ul>
<li>
<a href=""><img src="images/0.png" /></a>
</li>
<li>
<a href=""><img src="images/0 (1).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (2).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (3).png" /></a>
</li>
<li>
<a href=""><img src="images/0.jpg" /></a>
</li>
</ul>
</div>
<a href="" class="menu-panel-btn">
<span>查看全部商家</span>
<em></em>
</a>
</div>
</li>
<li>
<h3>母婴保健</h3>
<div class="menu-tab">
<a href="">壹药网</a>
<a href="">康爱多</a>
<a href="">医药保健</a>
<div class="fix"></div>
</div>
<span class="menu-more">更多</span>
<div class="menu-panel">
<div class="menu-panel-hd">
<h4>热门分类</h4>
<div class="sub-group">
<a href="">壹药网</a>
<a href="">康爱多</a>
<a href="">医药保健</a>
<a href="">成人用品</a>
<a href="">母婴商城</a>
</div>
</div>
<div class="menu-panel-bd">
<ul>
<li>
<a href=""><img src="images/0.png" /></a>
</li>
<li>
<a href=""><img src="images/0 (1).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (2).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (3).png" /></a>
</li>
<li>
<a href=""><img src="images/0.jpg" /></a>
</li>
</ul>
</div>
<a href="" class="menu-panel-btn">
<span>查看全部商家</span>
<em></em>
</a>
</div>
</li>
<li>
<h3>娱乐生活</h3>
<div class="menu-tab">
<a href="">游戏</a>
<a href="">彩票</a>
<a href="">演出票务</a>
<div class="fix"></div>
</div>
<span class="menu-more">更多</span>
<div class="menu-panel">
<div class="menu-panel-hd">
<h4>热门分类</h4>
<div class="sub-group">
<a href="">游戏</a>
<a href="">彩票</a>
<a href="">演出票务</a>
<a href="">线上冲印</a>
<a href="">生活服务</a>
</div>
</div>
<div class="menu-panel-bd">
<ul>
<li>
<a href=""><img src="images/0.png" /></a>
</li>
<li>
<a href=""><img src="images/0 (1).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (2).png" /></a>
</li>
<li>
<a href=""><img src="images/0 (3).png" /></a>
</li>
<li>
<a href=""><img src="images/0.jpg" /></a>
</li>
</ul>
</div>
<a href="" class="menu-panel-btn">
<span>查看全部商家</span>
<em></em>
</a>
</div>
</li>
</ul>
</div>
<script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>
<script src='js/script.js'></script>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
font: 12px/1.5 tahoma, helvetica, arial, sans-serif;
}
ul {
list-style: none;
}
img {
border: 0 none;
vertical-align: bottom;
}
a {
text-decoration: none;
}
.left {
float: left;
}
.right {
float: right;
}
/**左侧菜单**/
.sec-mainl {
width: 211px;
box-shadow: 2px 0 4px #d5d5d5;
position: relative;
z-index: 5;
}
.mainl-hd-box {
padding-bottom: 5px;
background: url(images/index.png) no-repeat 0 39px;
}
.mainl-hd {
height: 39px;
line-height: 39px;
text-align: center;
cursor: pointer;
background: #d03800;
}
.mainl-hd a {
color: #fff;
font-weight: bold;
font-size: 12px;
}
.mainl-hd a:before {
content: "";
display: inline-block;
/*width:px;*/
/*height:px;*/
background: url(images/iconsb.png) no-repeat -73px 0;
}
/**菜单列表**/
.sec-mainnav>li {
padding: 10px 19px 36px;
position: relative;
background: #f0f0f0;
cursor: pointer;
z-index: 4;
}
.sec-mainnav>li:nth-child(2n) {
background: #fff;
}
.sec-mainnav>li h3 {
font-size: 12px;
}
.sec-mainnav>li.hover {
background: #545651;
}
.sec-mainnav>li.hover h3,
.sec-mainnav>li.hover .menu-tab a {
color: #fff;
}
.sec-mainnav li .menu-tab {
margin-top: 5px;
}
.sec-mainnav li .menu-tab a {
float: left;
margin-right: 6px;
color: #888;
}
.sec-mainnav li .menu-more {
position: absolute;
display: block;
width: 6px;
height: 9px;
right: 19px;
top: 28px;
line-height: 999;
overflow: hidden;
background: url(images/index.png) no-repeat 0 -6px;
}
/**二级菜单**/
.menu-panel {
position: absolute;
width: 446px;
padding: 18px 34px;
/*display:;*/
top: 0;
left: 210px;
z-index: 5;
box-shadow: inset 2px 0 5px 0 #d5d5d5, 2px 0 3px #e8e8e8;
background: #fff;
display: none;
}
.menu-panel h4 {
font-family: "microsoft yahei", "微软雅黑", "黑体";
font-size: 14px;
color: #e64e3e;
margin-bottom: 9px;
}
.menu-panel-hd {
border-bottom: 1px dotted #e2e2e2;
padding-bottom: 12px;
margin-bottom: 14px;
line-height: 1.5;
}
.sub-group a {
color: #555;
display: inline-block;
margin-right: 16px;
}
.sub-group a:hover {
color: #e64e3e;
text-decoration: underline;
}
.menu-panel-bd li {
float: left;
width: 88px;
height: 56px;
border: 1px solid #edeeef;
margin: 0 0 -1px -1px;
background-color: #fff;
}
.menu-panel-bd li a {
display: block;
text-align: center;
}
.menu-panel-bd li a img {
width: 80px;
height: 27px;
margin-top: 14px;
}
.menu-panel-btn {
display: inline-block;
height: 25px;
line-height: 25px;
margin-top: 15px;
padding: 0 10px;
color: #fff;
background-color: #e64e3e;
}
.menu-panel-btn em {
width: 0;
height: 0;
margin-left: 6px;
overflow: hidden;
font-size: 0;
display: inline-block;
border-width: 4px;
border-color: transparent transparent transparent #fff;
border-style: dashed dashed dashed solid;
}
/**中间部分**/
.sec-mainm {
width: 666px;
position: relative;
z-index: 3;
}
script.js
$(function() {
var $top = $('.sec-mainnav').offset().top + $('.sec-mainnav').height()
//左侧导航动画
$('.sec-mainnav li').on('mouseenter', function() {
var $height = $(this).offset().top + $(this).find('.menu-panel').outerheight()
$(this).find('.menu-panel').show()
if($height - $top >= 0) {
$(this).find('.menu-panel').css({
top: -($height - $top) + 'px'
})
}
});
$('.sec-mainnav li').on('mouseleave', function() {
$(this).find('.menu-panel').hide()
});
});
图片素材如下
上一篇： 扁平式小清新导航
下一篇： Jquery绑定事件及动画效果