欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

精致的服务类网站侧导航

程序员文章站 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()
    });
});

图片素材如下

精致的服务类网站侧导航