zoukankan      html  css  js  c++  java
  • Jquery菜单2

    代码
       <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
        
    <script type="text/javascript"> 
    $(document).ready(function(){
        $(
    "ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
        $("div.topnav li span").click(function() { //点击span后显示的菜单...
            
            
    //Following events are applied to the subnav itself (moving subnav up and down)
            $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

            $(
    this).parent().hover(function() {
            }, function(){    
                $(
    this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
            });
            
    //Following events are applied to the trigger (Hover events for the trigger)
            }).hover(function() { 
                $(
    this).addClass("subhover"); //On hover over, add class "subhover"
            }, function(){    //On Hover Out
                $(this).removeClass("subhover"); //On hover out, remove class "subhover"
        });
    });
        
    </script>

        
    <style type="text/css">
            body
            {
                margin: 
    0;
                padding: 
    0;
                font: 10px normal Arial, Helvetica, sans
    -serif;
                background: #
    000 url(body_bg.gif) repeat-x;
            }
            .container
            {
                 960px;
                margin: 
    0 auto;
                position: relative;
            }
            #header
            {
                background: url(header_bg.gif) no
    -repeat center top;
                padding
    -top: 120px;
            }
            #header .disclaimer
            {
                color: #
    999;
                padding: 100px 
    0 7px 0;
                text
    -align: right;
                display: block;
                position: absolute;
                top: 
    0;
                right: 
    0;
            }
            #header .disclaimer a
            {
                color: #ccc;
            }
            div.topnav
            {
                list
    -style: none;
                padding: 
    0 20px;
                margin: 
    0;
                
    float: left;
                 920px;
                background: #
    222;
                font
    -size: 1.2em;
                background: url(topnav_bg.gif) repeat
    -x;
            }
            div.topnav li
            {
                
    float: left;
                margin: 
    0;
                padding: 
    0 15px 0 0;
                position: relative; 
    /*--Declare X and Y axis base--*/
            }
            div.topnav li a
            {
                padding: 10px 5px;
                color: #fff;
                display: block;
                text
    -decoration: none;
                
    float: left;
            }
            div.topnav li a:hover
            {
                background: url(topnav_hover.gif) no
    -repeat center top;
            }
            div.topnav li span
            {
                
    /*--Drop down trigger styles--*/
                 17px;
                height: 35px;
                
    float: left;
                background: url(subnav_btn.gif) no
    -repeat center top;
            }
            div.topnav li span.subhover
            {
                background
    -position: center bottom;
                cursor: pointer;
            }
            
    /*--Hover effect for trigger--*/div.topnav li ul.subnav
            {
                list
    -style: none;
                position: absolute; 
    /*--Important - Keeps subnav from affecting main navigation flow--*/
                left: 
    0;
                top: 35px;
                background: #
    333;
                margin: 
    0;
                padding: 
    0;
                display: none;
                
    float: left;
                 170px;
                
    -moz-border-radius-bottomleft: 5px;
                
    -moz-border-radius-bottomright: 5px;
                
    -webkit-border-bottom-left-radius: 5px;
                
    -webkit-border-bottom-right-radius: 5px;
                border: 1px solid #
    111;
            }
            div.topnav li ul.subnav li
            {
                margin: 
    0;
                padding: 
    0;
                border
    -top: 1px solid #252525/*--Create bevel effect--*/
                border
    -bottom: 1px solid #444/*--Create bevel effect--*/
                clear: both;
                 170px;
            }
            html div.topnav li ul.subnav li a
            {
                
    float: left;
                 145px;
                background: #
    333 url(dropdown_linkbg.gif) no-repeat 10px center;
                padding
    -left: 20px;
            }
            html div.topnav li ul.subnav li a:hover
            {
                
    /*--Hover effect for subnav links--*/
                background: #
    222 url(dropdown_linkbg.gif) no-repeat 10px center;
            }
            #header img
            {
                margin: 20px 
    0 10px;
            }
        
    </style>
    </head>
    <body>
        
    <form id="form1" runat="server">
        
    <div class="container">
            
    <div id="header">
                
    <div class="disclaimer">
                
    </div>
                
    <div class="topnav">
                    
    <li><a href="#">Home</a></li>
                    
    <li><a href="#">Tutorials</a>
                        
    <ul class="subnav">
                            
    <li><a href="#">11111</a></li>
                            
    <li><a href="#">22222</a></li>
                            
    <li><a href="#">33333</a></li>
                            
    <li><a href="#">44444</a></li>
                            
    <li><a href="#">55555</a></li>
                        
    </ul>
                    
    </li>
                    
    <li><a href="#">Resources</a>
                        
    <ul class="subnav">
                            
    <li><a href="#">123456</a></li>
                            
    <li><a href="#">456789</a></li>
                        
    </ul>
                    
    </li>
                    
    <li><a href="#">About Us</a></li>
                    
    <li><a href="#">Advertise</a></li>
                    
    <li><a href="#">Submit</a></li>
                    
    <li><a href="#">Contact Us</a></li>
                
    </div>
            
    </div>
        
    </div>
        
    </form>
    </body>
    </html>
  • 相关阅读:
    初学C++到底应该用什么工具比较合适——工具简析
    便携式办公套件LibreOffice Portable 4.0.1
    Hibernate和JPA之间的联系
    央视《家有妙招》整理版,共250招,值得永远收藏
    思科Vs华为:不可避免的对决
    Facebook手机刺激了谁?
    Facebook利用Home平台加速进军移动领域
    英特尔Haswell处理器已出货 预计6月推出
    苹果自建街景地图 或与谷歌针锋相对
    图片链接
  • 原文地址:https://www.cnblogs.com/wanglinglong/p/1672651.html
Copyright © 2011-2022 走看看