手风琴菜单实现-优快云博客

本文链接：https://blog.youkuaiyun.com/Sprite_code/article/details/78197296

一、竖排手风琴

HTML代码

`<body>
    <div class="container">
        <div class="wrap clearfix">
            <div class="tab">
                <a href="#" class="on">01</a>
                <a href="#">02</a>
                <a href="#">03</a>
                <a href="#">04</a>
            </div>
            <ul>
                <li>
                    <a href="#"><img src="img/IMG_4288.JPG"/></a>
                    <span><a href="#">01</a></span>
                </li>
                <li>
                    <a href="#"><img src="img/IMG_4289.JPG"/></a>
                    <span><a href="#">02</a></span>
                </li>
                <li>
                    <a href="#"><img src="img/IMG_4290.JPG"/></a>
                    <span><a href="#">03</a></span>
                </li>
                <li>
                    <a href="#"><img src="img/IMG_4291.JPG"/></a>
                    <span><a href="#">04</a></span>
                </li>
            </ul>
        </div>
    </div>
</body>

CSS代码

*{margin:0;padding:0;}
ul,li{list-style: none;display: block;}
a{text-decoration:none; font-size:20px;color: #302833;}
.clearfix:after{content: '';display: block;height: 0;visibility: hidden;clear: both;}
.container{width:800px;margin: 0 auto;margin-top: 40px;}
.wrap{width:650px;margin:0 auto;padding:5px;
 position: relative;height:565px;

overflow: hidden;/*重点*/

}       
.tab{width:100px;float:left;text-align: center;margin-right: 10px;}
.tab a{display: block;height: 120px;line-height: 120px;margin-bottom: 28px;background: bisque;}
.tab a:last-child{margin:0;}
.tab a.on {background-color:#ff8c10; cursor:pointer;}   
.container ul{width:540px; position: absolute;top:0;right:0; }
ul li{background: beige;}
img{display: block;margin: 0 auto;padding-top: 15px;}
span a{display: block;height: 50px;line-height: 50px;text-align: center;}

JS代码

<script src="../js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        var box=$(".wrap"),  //  大盒子
        aBtns=box.find(">div.tab>a");  //  获取a标签
        uls=box.find("ul");   // 找ul
        p=0;                 //  指示
        aBtns.each(function(index,aBtn){
            aBtn=$(aBtn);  // 相当于 $(this)
            aBtn.mouseenter(function(){
            if(index !=p){// 1 2 3
                $(aBtns[p]).removeClass("on"); // 移出默认
                aBtn.addClass("on");//  给当前 指示（a链接） 设置
                p=index;// 更新p 移除默认样式 
                uls.stop().animate({
                    "top":-565*index+"px"
                },300)
            }
        })
     }).eq(0).mouseenter()

    })
</script>

                         图1 就是竖排手风琴的效果

二、横排手风琴

HTML代码

<body>
<div id="nav">
    <ul class="clearfix">
        <li>
            <h3 class="a">MP3</h3>
            <div class="none">
                <img src="img/apple_1_bigger.jpg"/>
            </div>
        </li>
        <li>
            <h3 class="b">MP5</h3>
            <div>
                <img src="img/apple_2_bigger.jpg"/>
            </div>
        </li>
        <li>
            <h3 class="c">手机</h3>
            <div class="none">
                <img src="img/apple_3_bigger.jpg"/>
            </div>
        </li>
        <li>
            <h3 class="d">笔记本</h3>
            <div class="none">
                <img src="img/apple_4_bigger.jpg"/>
            </div>
        </li>
    </ul>
</div>
</body>

CSS代码

*{margin:0; padding:0;}
        img{border:0; cursor:pointer;}
        .clearfix:after{display:block; height:0; line-height:0; clear:both; visibility:hidden;
            content: '.';}
        ul,li{display:block;}
        body{font-size:14px; font-family:"microsoft yahei";}
        #nav{width:800px; margin:100px auto;}
        #nav ul li{float:left;}
        #nav ul li h3{display:block; width:100px; height:300px; float:left;
            text-align:center; line-height:300px; font-size:30px; cursor:pointer;}
        .a{background:greenyellow}
        .b{background:yellow}
        .c{background:orange}
        .d{background:paleturquoise}
        #nav ul li div{width:400px; height:300px; float:left;}
        .none{display:none;}
        .block{display:block !important;}

JS代码

<script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            $("h3").click(function(){
                $(this).next().addClass("block").end().parent().siblings().children("div").attr("class","none")
            })
        })
    </script>

这里写图片描述

        图2 就是横排手风琴的效果

竖排手风琴和横排手风琴

一、竖排手风琴

二、横排手风琴