Html
    Css
    Js
* {
	margin:0;
	padding:0;
}
.header-bar {
	width:100%;
	height:70px;
	line-height:70px;
	background:#18191a;
}
.nav-bar {
	width:1400px;
	height:100%;
	margin:0 auto;
}
.menu-box {
	font-size:0;
	height:70px;
	position:relative;
}
#slider {
	width:0px;
	height:100%;
	background:rgba(236,108,0,1);
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
	/* opacity:0.8;
	*/
}
.menu-box li {
	float:left;
	height:100%;
	position:relative;
	cursor:pointer;
	margin-right:2px;
	-webkit-transition:all 0.5s ease-in-out 0s;
	transition:all 0.5s ease-in-out 0s;
}
.menu-box li.active {
	background:rgba(236,108,0,1);
}
.menu-box li a {
	text-decoration:none;
	display:block;
	height:100%;
	color:white;
	font-size:15px;
	padding:0 18px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
li.icon-sm:last-child:after {
	content:"";
	position:absolute;
	border-width:5px;
	border-style:dashed dashed dashed solid;
	border-color:#fff  transparent  transparent transparent;
	display:block;
	right:6px;
	top:34px;
	-webkit-transition:all  0.5s ease-in-out 0s;
	transition:all 0.5s ease-in-out 0s;
}
li.icon-sm:last-child:hover:after {
	border-color:transparent  transparent #fff transparent;
	top:26px;
}
.second-menu {
	width:100%;
	position:absolute;
	background:#18191a;
	padding:10px 0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	z-index:5;
}
.second-menu li {
	width:100%;
	line-height:26px;
	font-size:14px;
	padding:6px 0;
	list-style:none;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.second-menu li a {
	display:block;
	width:100%;
	color:#fff;
	text-align:left;
	padding:0px 20px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.second-menu li.hoverd a {
	color:#ec6c00;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

仿百度炫酷菜单

8
      罄?一瞥0
      2017/5/27 10:12:31
      $(".menu-box").mouseleave(function() {
          $("#slider").animate({
              left: $('.menu-box li.active').offset().left - $(this).offset().left,//几个意思?自己-自己 不就是0吗?!
          }, 400);
          $("#slider").css({
              width: '50',
          })
      });
      // left: $('.menu-box li.active').offset().left - $(this).offset().left,改成left: 0
      回复
      罄?一瞥0
      2017/5/27 10:03:35

      css文件: 2个 0s多余 可以去掉

          沙漠玫瑰0
          2017/5/27 17:46:54

          是的

      回复
      罄?一瞥1
      2017/5/27 9:49:55

      两个 .stop(true, false) 是多余的 去掉后效果一样

      hoverd 改成 hover或者hovered 好一点

      回复
      奈良0
      2017/5/5 11:15:28
      90后大叔0
      2017/5/5 10:08:00
      A boy of temperament0
      2017/4/28 16:14:31
      q5955857420
      2017/4/27 11:43:00