码迷,mamicode.com
首页 > 其他好文 > 详细

自己写的三级菜单代码

时间:2014-11-26 17:57:30      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   sp   on   

js代码:
bubuko.com,布布扣
        $(function () {
            var y = $(‘.p‘).length,r=15,h=50;
            var wa = document.documentElement.clientWidth;
            $(‘body‘).css(‘width‘, wa - h).css(‘overflow‘, ‘auto‘);
            $(‘#menu li‘).css(‘width‘, (wa - h) / y - r);


            $(‘#menu li‘).mouseover(function () {
                if ($(‘.p‘).index(this) == (y - 1)) {
                    $(‘.p div div‘).css(‘position‘, ‘absolute‘).css(‘left‘, -((wa - h) / y - r) + ‘px‘).css(‘top‘, ‘0px‘);
                } else {
                    $(‘.p div div‘).css(‘position‘, ‘absolute‘).css(‘left‘, ((wa - h) / y - r) + ‘px‘).css(‘top‘, ‘0px‘);
                }
            });

            $(window).resize(function () {
                setR()
            });
        });

        function setR() {
            var wa = document.documentElement.clientWidth;
            $(‘body‘).css(‘width‘, wa - h).css(‘overflow‘, ‘auto‘);
            $(‘#menu li‘).css(‘width‘, (wa - h) / y - r);
        }
  
View Code

css代码:

bubuko.com,布布扣
        #menu{margin:0px;padding:0px;}
        a{ text-decoration:none;}
        .p{float:left; width:150px; background-color:#0072E3; height:40px; list-style:none; border:1px solid #fff; text-align:center;line-height:40px;position:relative;}
        
        .p li{ width:150px; background-color:#0072E3; height:40px; list-style:none; border-bottom:2px solid #0066CC; border-top:1px solid #66B3FF; border-left:1px solid #0066CC; border-right:1px solid #0066CC; text-align:center;line-height:40px;position:relative;display:block;}
         span{color:White;}
        .p div{ visibility:hidden;}
        .p div div{ visibility:hidden;}
        .p ul li{ float:none;}
        ul .p:hover>div{ visibility:visible;}
        ul .p:hover{background-color:#46A3FF;}
        ul .p ul li:hover>div{ visibility:visible;}
        ul .p ul li:hover {background-color:#46A3FF;}
        ul .p ul li>div{ position:absolute;right:-1px; top:0px;}
        #menu div ul{margin:0px;position:absolute;left:-1px;padding:0px;}
View Code

html代码:

bubuko.com,布布扣
<div id="menu">
    <ul>
        <li class="p"><span>第一</span>
        <div>
            <ul>
                <li><a href="#"><span>1-1</span></a></li>
                <li><a href="#"><span>1-2</span></a></li>
                <li><a href="#"><span>1-3</span></a></li>
                <li><a href="#"><span>1-4</span></a></li>
            </ul>
        </div>
            
        </li>
        <li class="p"><span>第二</span>
        
        <div>
            <ul>
                <li><span>2-1</span>
                    <div>
                        <ul>
                            <li><a href="#"><span>2-1-1</span></a></li>
                            <li><a href="#"><span>2-1-2</span></a></li>
                            <li><a href="#"><span>2-1-3</span></a></li>
                            <li><a href="#"><span>2-1-4</span></a></li>
                            <li><a href="#"><span>2-1-5</span></a></li>
                            <li><a href="#"><span>2-1-6</span></a></li>
                            <li><a href="#"><span>2-1-7</span></a></li>
                            <li><a href="#"><span>2-1-8</span></a></li>
                        </ul>
                    </div>
                </li>
                <li><span>2-2</span></li>
                <li><span>2-3</span>
                    <div>
                                    <ul>
                                        <li><a href="#"><span>2-2-1</span></a></li>
                                    </ul>
                                </div>
                </li>
                <li><span>2-4</span></li>
            </ul>
        </div>
        </li>
        <li class="p"><span>第三</span></li>
        <li class="p"><span>第四</span>
            <div>
                        <ul>
                            <li><span>4-1-1</span>
                                <div>
                                    <ul>
                                        <li><a href="#"><span>4-1-1-1</span></a></li>
                                        <li><a href="#"><span>4-1-1-2</span></a></li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#"><span>4-1-1</span></a></li>
                            <li><a href="#"><span>4-1-2</span></a></li>
                            <li><a href="#"><span>4-1-3</span></a></li>
                            <li><a href="#"><span>4-1-4</span></a></li>
                        </ul>
                    </div>
        </li>
        <li class="p"><span>第五</span></li>
        <li class="p"><span>第六</span>
            <div>
                        <ul>
                            <li><span>6-1-1</span>
                                <div>
                                    <ul>
                                        <li><a href="#"><span>6-1-1-1</span></a></li>
                                        <li><a href="#"><span>6-1-1-2</span></a></li>
                                        <li><a href="#"><span>6-1-1-3</span></a></li>
                                        <li><a href="#"><span>6-1-1-4</span></a></li>
                                        <li><a href="#"><span>6-1-1-5</span></a></li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#"><span>6-1-1</span></a></li>
                            <li><a href="#"><span>6-1-2</span></a></li>
                        </ul>
                    </div>
        </li>
    </ul>
    
</div>
View Code

 

自己写的三级菜单代码

标签:style   blog   http   io   ar   color   os   sp   on   

原文地址:http://www.cnblogs.com/dayuhw/p/4123404.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!