<!DOCTYPE >
<html>
<head>
<meta charset="UTF-8"/>
<title>伸缩的菜单，用toggle()重写</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width: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 src="http://libs.baidu.com/jquery/2.0.0/jquery.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 style="display: block;">
<li><a href="#">Lastest News</a></li>
<li><a href="#">All News</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul style="display: block;">
<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 style="display: none;">
<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>

伸缩的菜单，用toggle()重写的更多相关文章

  1. 只用css3实现菜单的toggle效果

    一.原理: 使用label与input来实现,label和复选框是有关联的,label的for属性对应的是input的id,所以点击label时,它就会勾选或取消复选框. 如果我们需要让菜单默认显示, ...

  2. 制作多级菜单hide（）与show（） toggle（）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 如何使用滑动菜单SlidingMenu？

    左側滑: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvanVuaHVhaG91c2U=/font/5a6L5L2T/fontsize/400/fill/I ...

  4. Android开发技巧——使用Dialog实现仿QQ的ActionSheet菜单

    最近看到有人用Dialog来实现QQ的仿ActionSheet的自定义菜单,对于自己没实现过的一些控件,看着也想实现一下.于是动手了一下,发现也不难,和大家分享一下. 本文原创,转载请注明出处:htt ...

  5. JavaScript实战-菜单特效

    以下是我自己用原生JS写的各种菜单特效,虽然网上一搜一大堆,但我还是喜欢自己来写一写! 这是上一篇:JavaScript实战(带收放动画效果的导航菜单) 下面是经过优化后的完整代码,优化了CSS样式. ...

  6. Qt——右键菜单

    所谓“右键菜单”,我们可以这样来看:右键+菜单.所以我们可以定义一个菜单,然后重写鼠标点击事件,令菜单在鼠标右击的时候弹出来.这种方法是可以的,但是Qt提供了一种专门用于右键菜单的方法,且看下面这个属 ...

  7. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  8. android学习笔记23——菜单

    菜单在桌面应用程序中使用非常广泛,由于手机屏幕的制约,菜单在手机应用中减少不少. android应用中的菜单默认是不可见的,只有当用户单击手机上“Menu”键时,系统才会显示该应用关联的采用项. an ...

  9. slidingMenu默认显示菜单

    关键词:slidingmenu 默认 显示 打开 菜单 showMenu toggle 问题:要在Activity一打开就显示slidingmenu. 解决: 搜索“slidingmenu 默认打开” ...

随机推荐

  1. IDEA 护眼色设置 背景行颜色取消等设置

    首先做一些简答的记录,护眼色 等等的设置很久以前机器上已经设置过了,今天偶尔要在其他机器上重新做一些设置反而忘记了很多步骤, 设置后的HTML页面如何所示: 默认情况下,当只是设置General通用的 ...

  2. POJ1222EXTENDED LIGHTS OUT（高斯消元）

    EXTENDED LIGHTS OUT Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 11815   Accepted: 7 ...

  3. Python入门学习（一）

    看完了莫烦Python的视频,对于Python有了一点感觉,接下来打算把小甲鱼的视频啃完,附上学习网址:http://blog.fishc.com/category/python 小甲鱼的视频是从零基 ...

  4. AngularJS学习篇（四）

    AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. <!DOCTYPE html& ...

  5. 统一addEventListener与attachEvent中this指向问题

    1.this指向问题 使用addEventListener注册的事件,事件处理函数中 this指向目标元素: 使用attachEvent注册的事件,事件处理函数中 this指向window对象 要想将 ...

  6. 使用Identity Server 4建立Authorization Server (5)

    预备知识: http://www.cnblogs.com/cgzl/p/7746496.html 第一部分: http://www.cnblogs.com/cgzl/p/7780559.html 第二 ...

  7. The Speed 歌词

    [ti:]The Speed [ar:]<QQ飞车> [al:]幻想 [by:]伴奏:My Soul   [00:03.60]The Speed [00:07.06]<QQ飞车> ...

  8. HBase流量限制和表负载均衡剖析

    1.概述 在HBase-1.1.0之前,HBase集群中资源都是全量的.用户.表这些都是没有限制的,看似完美实则隐患较大.今天,笔者就给大家剖析一下HBase的流量限制和表的负载均衡. 2.内容 也许 ...

  9. PHP--最常用--必背函数总结！php学习者收藏必备！

    一.PHP系统函数 函数 功能 用法 var_dump() 打印变量结构信息,包括类型和值.数组将递归展开值 var_dump ( $arg1...); echo():是语法结构 输出一个或者多个字符 ...

  10. 3Sum探讨（Java）

    探讨一下leetcode上的3Sum: Given an array S of n integers, are there elements a, b, c in S such that a + b  ...