zoukankan      html  css  js  c++  java
  • Jquery打造的下拉层式菜单

    代码简介:Jquery打造的下拉层式菜单

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
    <title>Jquery打造的下拉层式菜单_网页代码站(www.webdm.cn)</title>
    <script type="text/javascript" src="http://www.webdm.cn/images/20100918/jquery.min.js"></script>
    <style media="screen" type="text/css">
    /* General Styles */
    *{
    margin:0;
    padding:0;
    border:0px none #FFFFFF;
    }
    * html ul ul li{
    margin-bottom:-1px;
    }
    * html ul ul li a,* html ul li a{
    height:100%;
    }
    a{
    color:#FFFFFF;
    text-decoration:underline;
    }
    body{
    margin:20px;
    padding:0 0 0 0;
    background:#808080 repeat-y center;
    color:#F0F0F0;
    font-family:'Lucida Grande','Segoe UI',Arial,Helvetica,sans-serif;
    font-size:85%;
    line-height:140%;
    }
    code{
    padding:0.5em;
    border-top:1px solid #666666;
    border-right:1px solid #999999;
    border-bottom:1px solid #999999;
    border-left:1px solid #666666;
    margin:0.5em 0 0.5em 0;
    display:block;
    }
    h1{
    margin:1em 0 0.5em 0;
    display:block;
    font-weight:normal;
    }
    h2{
    border-top:1px solid #F0F0F0;
    padding-top:0.5em;
    margin:1em 0 1em 0;
    display:block;
    font-weight:normal;
    }
    #content{
    margin:30px;
    400px;
    border-top:1px solid #999999;
    border-right:1px solid #666666;
    border-bottom:1px solid #666666;
    border-left:1px solid #999999;
    padding:20px;
    }
    
    /* Styles for Example #1 */
    #example1{
    margin:0;
    padding:0;
    200px;
    list-style-type:none;
    line-height:120%;
    }
    #example1 .closed{
    background-image:url(http://www.webdm.cn/images/20100918/ha-down.gif);
    }
    #example1 .closed,#example1 .opened{
    padding-right:10px;
    background-position:98% 50%;
    background-repeat:no-repeat;
    }
    #example1 .header{
    background-color:#7B7B7B;
    }
    #example1 .opened{
    background-image:url(http://www.webdm.cn/images/20100918/ha-up.gif);
    }
    #example1 a{
    display:block;
    font-weight:bold;
    text-decoration:none;
    }
    #example1 a.hover{
    border-top:1px solid #5F5F5F;
    border-bottom:1px solid #7B7B7B;
    background-color:#7B7B7B;
    color:#FFFFFF;
    }
    #example1 ul{
    overflow: hidden;
    }
    #example1 li{
    margin:0;
    padding:0;
    list-style-type:none;
    background-color:#848484;
    color:#FFFFFF;
    }
    #example1 li a{
    padding:2px 10px 2px 4px;
    border-top:1px solid #9A9A9A;
    border-left:1px solid #9A9A9A;
    border-right:1px solid #696969;
    border-bottom:1px solid #757575;
    background-color:#848484;
    color:#FFFFFF;
    }
    #example1 li.active a,#example1 li li.active a{
    border-top:1px solid #5F5F5F;
    border-bottom:1px solid #7B7B7B;
    border-left:1px solid #757575;
    border-right:1px solid #9A9A9A;
    background-color:#404040;
    color:#FFFFFF;
    }
    #example1 li.active li a,#example1 li li a{
    padding:2px 4px 2px 8px;
    border-top:1px solid #696969;
    border-left:1px solid #696969;
    border-right:1px solid #8A8A8A;
    border-bottom:1px solid #7B7B7B;
    background-color:#757575;
    color:#FFFFFF;
    }
    
    /* Styles for Example #2 */
    #example2{
    margin:0;
    padding:0;
    300px;
    list-style-type:none;
    background-color:#FFFFFF;
    color:#000000;
    line-height:120%;
    height:300px;
    }
    #example2 a{
    display:block;
    font-weight:normal;
    text-decoration:none;
    }
    #example2 ul{
    overflow: hidden;
    }
    #example2 li{
    margin:0;
    padding:0;
    list-style-type:none;
    }
    #example2 li a{
    285px;
    padding:5px 0 0 15px;
    display:block;
    color:#000000;
    background-image:url(http://www.webdm.cn/images/20100918/ha-header.jpg);
    height:25px;
    }
    #example2 li a.closed{
    color:#000000 !important;
    background-image:url(http://www.webdm.cn/images/20100918/ha-header.jpg) !important;
    }
    #example2 li.firstitem a.closed{
    color:#000000 !important;
    background-image:url(http://www.webdm.cn/images/20100918/ha-header-first.jpg) !important;
    }
    #example2 li.lastitem a.closed{
    color:#000000 !important;
    background-image:url(http://www.webdm.cn/images/20100918/ha-header-last.jpg) !important;
    }
    #example2 li li{
    border-left:1px solid #E5E5E5;
    border-right:1px solid #E5E5E5;
    padding:0 15px 0 15px;
    height:175px;
    }
    #example2 li a.opened{
    background-image:url(http://www.webdm.cn/images/20100918/ha-header-active.jpg);
    color:#FFFFFF;
    }
    #example2 li.firstitem a.opened{
    background-image:url(http://www.webdm.cn/images/20100918/ha-header-first-active.jpg);
    color:#FFFFFF;
    }
    #example2 li.lastitem li{
    margin-bottom:-4px;
    }
    #example2 li.lastitem ul{
    background-image:url(http://www.webdm.cn/images/20100918/ha-footer.jpg);
    background-repeat:no-repeat;
    background-position:bottom;
    padding-bottom:4px;
    }
    </style>
    <script type="text/javascript" src="http://www.webdm.cn/images/20100918/jquery.hoverIntent.min.js"></script>
    <script type="text/javascript" src="http://www.webdm.cn/images/20100918/jquery.hoveraccordion.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	// Setup HoverAccordion for Example 1
    	$('#example1').hoverAccordion();
    
    	// Setup HoverAccordion for Example 2 with some custom options
    	$('#example2').hoverAccordion({
    		activateitem: '1',
    		speed: 'fast'
    	});
    	$('#example2').children('li:first').addClass('firstitem');
    	$('#example2').children('li:last').addClass('lastitem');
    });
    </script>
    </head>
    <body>
    <div id="content">
      <ul id="example1">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a>
          <ul>
            <li><a href="index.php?id=2a#ex1">Subitem 2a</a></li>
            <li><a href="index.php?id=2b#ex1">Subitem 2b</a></li>
            <li><a href="index.php?id=2c#ex1">Subitem 2c</a></li>
            <li><a href="index.php?id=2d#ex1">Subitem 2d</a></li>
            <li><a href="index.php?id=2e#ex1">Subitem 2e</a></li>
          </ul>
        </li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a>
          <ul>
            <li><a href="index.php?id=5a#ex1">Subitem 5a</a></li>
            <li><a href="index.php?id=5b#ex1">Subitem 5b</a></li>
            <li><a href="index.php?id=5c#ex1">Subitem 5c</a></li>
          </ul>
        </li>
        <li><a href="#">Item 6</a></li>
        <li><a href="#">Item 7</a>
          <ul>
            <li><a href="index.php?id=7a#ex1">Subitem 7a</a></li>
            <li><a href="index.php?id=7b#ex1">Subitem 7b</a></li>
            <li><a href="index.php?id=7c#ex1">Subitem 7c</a></li>
            <li><a href="index.php?id=7d#ex1">Subitem 7d</a></li>
          </ul>
        </li>
        <li><a href="#">Item 8</a>
          <ul>
            <li><a href="index.php?id=8a#ex1">Subitem 8a</a></li>
            <li><a href="index.php?id=8b#ex1">Subitem 8b</a></li>
            <li><a href="index.php?id=8c#ex1">Subitem 8c</a></li>
            <li><a href="index.php?id=8d#ex1">Subitem 8d</a></li>
            <li><a href="index.php?id=8e#ex1">Subitem 8e</a></li>
            <li><a href="index.php?id=8f#ex1">Subitem 8f</a></li>
          </ul>
        </li>
        <li><a href="#">Item 9</a>
          <ul>
            <li><a href="index.php?id=9a#ex1">Subitem 9a</a></li>
            <li><a href="index.php?id=9b#ex1">Subitem 9b</a></li>
            <li><a href="index.php?id=9c#ex1">Subitem 9c</a></li>
            <li><a href="index.php?id=9d#ex1">Subitem 9d</a></li>
            <li><a href="index.php?id=9e#ex1">Subitem 9e</a></li>
          </ul>
        </li>
    
      </ul>
    
    
    
    
    
    
    
    <br>
    <!--http://hi.baidu.com/comasp  -->
    <br>
    
    
    
    
    
    
    
      
       <div style="300px;height:300px;background-color:#FFFFFF;padding:50px;">
      <a name="ex2" id="ex2"></a>
      <ul id="example2">
        <li><a href="#">Item 1</a>
          <ul>
            <li>Content #1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
              sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
              erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing
              elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
              aliquyam erat, sed diam voluptua.</li>
          </ul>
        </li>
        <li><a href="#">Item 2</a>
          <ul>
            <li>Content #2 - At vero eos et accusam et justo duo dolores et ea rebum.
              Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
              dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum.
              Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
              dolor sit amet.</li>
          </ul>
        </li>
        <li><a href="#">Item 3</a>
          <ul>
            <li>Content #3 - Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
          </ul>
        </li>
        <li><a href="#">Item 4</a>
          <ul>
            <li>Content #4 - Vet clita kasd gubergren, no sea takimata sanctus est
              Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores
              et ea rebum. Vet clita kasd gubergren, no sea takimata sanctus est
              Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores
              et ea rebum.</li>
          </ul>
        </li>
      </ul>
      </div>
    </div>
    <p> </p>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/c2866823-12ab-4ffc-b43a-d8516aad7003.html

  • 相关阅读:
    最近项目中遇到的一个算法挑战
    编程艺术之美,代码也玩穿越
    算法设计之部门消息通知机制
    解决系统迁移到windows 2003 64位服务器后引发的几个小问题
    我的IT成长历程
    a标签各种状态下的样式
    页面底部按钮被顶起问题
    ios点击input输入框,键盘弹出,此时滑动页面,光标位移
    解决移动端弹窗滚动事件触发主页面滚动事件
    浏览器记住密码之后,input背景变黄
  • 原文地址:https://www.cnblogs.com/webdm/p/2086664.html
Copyright © 2011-2022 走看看