精致的服务类网站侧导航

效果图

index.html

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>index</link rel="stylesheet" href="css/style.css">

bodydiv class="sec-mainL left"="mainL-hd-box">
        h2 ="mainL-hd"a href="">所有入驻商家ah2div>

    <!-- 菜单内容 -->
    ul ="sec-mainNav"li>
             一级菜单 -->
            h3>数码家电="menu-tab">
                >京东>易迅>苏宁易购="fix"></span ="menu-more">更多span 二级菜单 ="menu-panel"="menu-panel-hd">
                    h4>热门分类="sub-group">
                        >新蛋商城>手机数码>摄像影音>耳麦音响>国美在线="menu-panel-bd"ul><img src="images/0.png" /></="images/0 (1).png" ="images/0 (2).png" ="images/0 (3).png" ="images/0.jpg" ="" class="menu-panel-btn">查看全部商家em>

        >食品酒水>美食特产>酒水茶叶>蛋糕预订>

            >商旅出行>酒店预订>机票预订>商旅综合>度假预订>火车票预订>日用百货>飞飞商城>图书教育>百货>家纺家具>男女服装>时尚女装>精品男装>男女内衣>综合商城>限时特卖>淘宝品牌>休闲服饰>运动户外>鞋包配饰>潮流女鞋>商务男鞋>时尚包包>商务男鞋 >运动休闲>珠宝首饰>经典腕表>户外生活>奢侈品>美容美妆>天天网>美妆商城>眼镜美瞳>品牌商城>母婴保健>壹药网>康爱多>医药保健>成人用品>母婴商城>娱乐生活>游戏>彩票>演出票务>线上冲印>生活服务script ='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'script='js/script.js'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:

.left {
  float: left;
}

.right { 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 { 39px;
  line-height:
  text-align: center;
  cursor: pointer; #D03800;
}

.mainL-hd a {
  color: #fff;
  font-weight: bold;
  font-size: 12px;
}

.mainL-hd a:before {
  content: "";
  display: inline-block;
  width:px;*/
  height:px;*/ url(images/iconsB.png) no-repeat -73px 0;
}
*菜单列表*

.sec-mainNav>li { 10px 19px 36px; #F0F0F0; 4;
}

.sec-mainNav>li:nth-child(2n) { #FFF;
}

.sec-mainNav>li h3 {

.sec-mainNav>li.hover { #545651;
}

.sec-mainNav>li.hover h3,.sec-mainNav>li.hover .menu-tab a { #fff;
}

.sec-mainNav li .menu-tab {
  margin-top: 5px;
}

.sec-mainNav li .menu-tab a { left;
  margin-right: 6px; #888;
}

.sec-mainNav li .menu-more { absolute; block; 9px;
  right: 19px;
  top: 28px; 999;
  overflow: hidden; url(images/index.png) no-repeat 0 -6px;
}
*二级菜单*

.menu-panel { 446px; 18px 34px;
  display:;
  left: 210px; 5; inset 2px 0 5px 0 #D5D5D5,2px 0 3px #E8E8E8;

.menu-panel h4 {
  font-family: "Microsoft YaHei","微软雅黑","黑体"; 14px; #e64e3e;
  margin-bottom: 9px;
}

.menu-panel-hd {
  border-bottom: 1px dotted #E2E2E2; 12px; 1.5;
}

.sub-group a { #555; inline-block; 16px;
}

.sub-group a:hover { #E64E3E; underline;
}

.menu-panel-bd li { 88px; 56px; 1px solid #EDEEEF; 0 0 -1px -1px;
  background-color:

.menu-panel-bd li a { center;
}

.menu-panel-bd li a img { 80px; 27px; 14px;
}

.menu-panel-btn { 25px; 15px; 0 10px; #FFF; #E64E3E;
}

.menu-panel-btn em {
  margin-left:
  border-width: 4px;
  border-color: transparent transparent transparent #FFF;
  border-style: dashed dashed dashed solid;
}
*中间部分*

.sec-mainM { 666px; 3;
}

script.js

$(function() {
    var $top = $('.sec-mainNav').offset().top + $('.sec-mainNav').height()
    //左侧导航动画
    $('.sec-mainNav li').on('mouseenter',() {
        var $height = $(this).offset().top + $(this).find('.menu-panel').outerHeight()
        $().show()
        if($height - $top >= 0) {
            $().css({
                top: -($height - $top) + 'px'
            })
        }

    });
    
    $('.sec-mainNav li').on('mouseleave',1)">() {
        $().hide()
    });
});

图片素材如下

精致的服务类网站侧导航

相关文章