PROMULGATOR

    沙漠玫瑰

    上海市浦东新区
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="header-bar">
    <div class="nav-bar">
        <ul class="menu-box">
            <div id="slider"></div>
            <li class="active"><a href="#none">首页</a></li>
            <li class="icon-sm ">
                <a href="#none">装修案例</a>
            </li>
            <li class="icon-sm">
                <a href="#none">施工进度</a>
            </li>
            <li class="icon-sm">
                <a href="#none">产品商城</a>
            </li>
            <li class="icon-sm">
                <a href="#none">设计师</a>
            </li>
            <li class="icon-sm">
                <a href="#none">合伙人招募</a>
                <ul class="second-menu">
                    <li><a href="#none">菜单一</a></li>
                    <li><a href="#none">菜单二</a></li>
                    <li><a href="#none">菜单三</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
* {
    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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//菜单动效
$(".menu-box li").mouseenter(function() {
    $("#slider").animate({
        left: $(this).offset().left - $('.menu-box li').eq(0).offset().left,
    }, 80);
    $("#slider").css({
        width: $(this).width(),
    })
})
$(".menu-box").mouseleave(function() {
    $("#slider").animate({
        left: $('.menu-box li.active').offset().left - $(this).offset().left,
    }, 400);
    $("#slider").css({
        width: '50',
    })
});
$(function() {
    $(".second-menu").hide();
    $(".menu-box li").hover(function() {
        $(this).children(".second-menu").stop(true, false).fadeIn(200);
    }, function() {
        $(this).children(".second-menu").stop(true, false).fadeOut(200);
    });
    $(".second-menu li").hover(function() {
        $(this).addClass('hoverd').siblings().removeClass('hoverd');
    })
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 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 jQ币
      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