<!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. JS框架设计读书笔记之-动画

    基础概念 CSS样式可分为两种,一种值接近无限的集合(color,width),一种值只有几种(display),可以进行计算的样式,产生了动画效果.\ 1. 动画的第一步是获得元素的精确样式值. 2 ...

  2. bug:未考虑实际使用场景

    最近bug比较多,汗颜. 1.需求背景 (1)app活动页面,用户参与并完成能够以1分钱价格购买指定商品(2)这个页面可分享至app以外的渠道,如微信.QQ等 2.这个bug的表现形式:用户在第三方渠 ...

  3. MySQL数据库储存bit类型的值报错

    当我们储存bit类型的值时,不能直接写入数字 上图中的画圈部分就是bit类型,若是直接填入"1"或"0"等等就会报错,如下: 这时候,我们要看bit(M)的M值 ...

  4. [Bayesian] “我是bayesian我怕谁”系列 - Markov and Hidden Markov Models

    循序渐进的学习步骤是: Markov Chain --> Hidden Markov Chain --> Kalman Filter --> Particle Filter Mark ...

  5. 关于Spring在多线程下的个人疑问

    在Web开发中,不可避免的是需要遇到并发操作的,并发操作就有可能会引发我们的多线程安全问题.比如说,我们多线程下访问同一个变量并且有一个线程做出修改那么就会使得我们另外的线程在不知情的情况下被修改自己 ...

  6. nova创建虚拟机源码分析系列之七 传入参数转换成内部id

    上一篇博文将nova创建虚机的流程推进到了/compute/api.py中的create()函数,接下来就继续分析. 在分析之前简单介绍nova组件源码的架构.以conductor组件为例: 每个组件 ...

  7. 消息中间件ActiveMQ及Spring整合JMS的介绍

    一 .消息中间件的基本介绍 1.1 消息中间件 1.1.1 什么是消息中间件 消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流,并基于数据通信来进行分布式系统的集成.通过提供消息传递和消息排 ...

  8. Vue.js用法详解（一）更新中~

      前  言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: Vue.js ...

  9. 浅谈JavaScript的apply和call语句

    我们试图在回调函数中,用this表示oDiv对象,这样感觉爽. 1    animate(oDiv,{"left":600},2000,function(){ 2        t ...

  10. [S]SQL SERVER数据库维护与重建索引

    第一步:查看是否需要维护,查看扫描密度/Scan Density是否为100% declare @table_id int set @table_id=object_id('表名') dbcc sho ...