zoukankan      html  css  js  c++  java

  • jQuery伸缩的菜单


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>伸缩的菜单，用toggle()重写</title>
    <style>
    <!--
    body{
    background-color:#ffdee0;
    }
    #navigation {
    200px;
    font-family:Arial;
    }
    #navigation > ul {
    list-style-type:none; /* 不显示项目符号 */
    margin:0px;
    padding:0px;
    }
    #navigation > ul > li {
    border-bottom:1px solid #ED9F9F; /* 添加下划线 */
    }
    #navigation > ul > li > a{
    display:block; /* 区块显示 */
    padding:5px 5px 5px 0.5em;
    text-decoration:none;
    border-left:12px solid #711515; /* 左边的粗红边 */
    border-right:1px solid #711515; /* 右侧阴影 */
    }
    #navigation > ul > li > a:link, #navigation > ul > li > a:visited{
    background-color:#c11136;
    color:#FFFFFF;
    }
    #navigation > ul > li > a:hover{ /* 鼠标经过时 */
    background-color:#990020; /* 改变背景色 */
    color:#ffff00; /* 改变文字颜色 */
    }
    /* 子菜单的CSS样式 */
    #navigation ul li ul{
    list-style-type:none;
    margin:0px;
    padding:0px 0px 0px 0px;
    }
    #navigation ul li ul li{
    border-top:1px solid #ED9F9F;
    }
    #navigation ul li ul li a{
    display:block;
    padding:3px 3px 3px 0.5em;
    text-decoration:none;
    border-left:28px solid #a71f1f;
    border-right:1px solid #711515;
    }
    #navigation ul li ul li a:link, #navigation ul li ul li a:visited{
    background-color:#e85070;
    color:#FFFFFF;
    }
    #navigation ul li ul li a:hover{
    background-color:#c2425d;
    color:#ffff00;
    }
    -->
    </style>
    <script language="javascript" src="jquery-1.4.1.min.js"></script>
    <script language="javascript">
    $(function(){
    $("li").find("ul").prev().click(function(){
    $(this).next().toggle();
    });
    $("li:has(ul)").find("ul").hide();
    });
    </script>
    </head>
    <body>
    <div id="navigation">
    <ul id="listUL">
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a>
    <ul>
    <li><a href="#">Lastest News</a></li>
    <li><a href="#">All News</a></li>
    </ul>
    </li>
    <li><a href="#">Sports</a>
    <ul>
    <li><a href="#">Basketball</a></li>
    <li><a href="#">Football</a></li>
    <li><a href="#">Volleyball</a></li>
    </ul>
    </li>
    <li><a href="#">Weather</a>
    <ul>
    <li><a href="#">Today's Weather</a></li>
    <li><a href="#">Forecast</a></li>
    </ul>
    </li>
    <li><a href="#">Contact Me</a></li>
    </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    IO流基础
    DB2 存储过程创建、系统表
    dubbo实现原理简单介绍
    Java 标准 I/O 介绍
    mysql由于权限问题看不到用户数据库
    java 字符常量池
    Java NIO：NIO概述
    128 C语言实现文件复制功能(包括文本文件和二进制文件)
    Linux 下各个目录的作用及内容
    Linux文件系统详解
  • 原文地址：https://www.cnblogs.com/dudu837/p/1818109.html
Copyright © 2011-2022 走看看