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" dir="ltr" lang="en-EN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script src="JS/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
</script>
<style>
body{font-family: Helvetica, Arial, sans-serif; font-size: 0.9em;}
p{line-height: 1.5em;}
ul#menu, ul#menu ul{list-style-type:none; margin: 0; padding: 0; width: 15em;}
ul#menu a{display: block; text-decoration: none;}
ul#menu li{margin-top: 1px;}
ul#menu li a{background: #333; color: #fff; padding: 0.5em;}
ul#menu li a:hover{background: #000;}
ul#menu li ul li a{background: #ccc; color: #000; padding-left: 20px;}
ul#menu li ul li a:hover{background: #aaa; border-left: 5px #000 solid; padding-left: 15px;}
.code{border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0;}
.code code{display: block; padding: 3px; margin-bottom: 0;}
.code li{background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em;}
.indent1{padding-left: 1em;}
.indent2{padding-left: 2em;}
</style>
<title>网页竖排菜单jQuery版</title>
<!--[if lt IE 8]>
<style type="text/css">
li a {display:inline-block;}
li a {display:block;}
</style>
<![endif]-->
</head>
<body>
<ul id="menu">
<li>
<a href="#">Weblog工具</a>
<ul>
<li><a href="/">PivotX</a></li>
<li><a href="/">WordPress</a></li>
</ul>
</li>
<li>
<a href="#">程序语言</a>
<ul>
<li><a href="/">PHP</a></li>
<li><a href="/">Ruby</a></li>
<li><a href="/">Python</a></li>
<li><a href="/">PERL</a></li>
<li><a href="/">Java</a></li>
<li><a href="/">C#</a></li>
</ul>
</li>
<li>
<a href="#">Cool Stuff</a>
<ul>
<li><a href="/">Apple</a></li>
<li><a href="/">Maitianquan</a></li>
<li><a href="/">XBOX360</a></li>
<li><a href="/">Nifengla</a></li>
<li><a href="/">Nintendo</a></li>
</ul>
</li>
</ul>
</body>
</html>
jQuery实现竖排菜单的更多相关文章
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
- jQuery Wheel 环形菜单插件5种效果演示
很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...
- 11款样式新颖的 jQuery/CSS3 网页菜单
今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...
- jquery 展开折叠菜单
jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...
- 炫酷实用的jQuery插件 涵盖菜单、按钮、图片
新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...
- jQuery弹性滑动导航菜单实现思路及代码
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...
- 打造简易可扩展的jQuery/CSS3 Tab菜单
原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜 ...
- 简单jQuery 实现手风琴菜单
简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
随机推荐
- EF – 6.一对一关联
5.6.6 <一对一关联概述> 5.6.7 <一对一关联CRUD演示> 在两讲视频中,首先介绍了数据库中一对一关联表的设计规范,接着通过实例介绍了如何合适Entity Fr ...
- c++序列化方法
暂时使用boost 序列化, 目前我的测试基本都ok 只是对于c++11 shared ptr 没有测试成功,只能手工写下shared ptr 部分的序列化,也就是目前我对指针都不直接序列化,自己管理 ...
- .net学习之委托和事件
1.什么是委托通俗的说:委托就是一个能够存储符合某种格式(方法签名)的方法的指针的容器上传图片: 2.委托语法准备一个方法:string Hello(string userName){} string ...
- Delphi线程基础知识
参考http://blog.chinaunix.net/uid-10535208-id-2949323.html 一.概述 Delphi提供了好几种对象以方便进行多线程编程.多线程应用程序有以下几方面 ...
- oracle限制ip訪問
我這oracle版本為11.2.0.4,裝的GRID,所以在grid用戶下編輯sqlnet.ora 1.cd /grid/product/11.2.0/network/admin 2.編輯sqlne ...
- Linux重置root密码步骤
1.开机时任意按一个方向键,进入界面,选择linux系统,按e键进入2.然后用上下键选择kerner(内核)那一行,按e键进入编辑界面,编辑界面最后一行显示如下:(grub edit> kern ...
- hdu 4033 2011成都赛区网络赛 余弦定理+二分 **
二分边长,判断最后内角和是否为2pi,注意l与r的选取,保证能组成三角形 #include<cstdio> #include<iostream> #include<alg ...
- Spring之ResourceLoader加载资源
Resource与ResourceLoader对比 1.Resource接口定义了应用访问底层资源的能力. 通过FileSystemResource以文件系统绝对路径的方式进行访问: 通过ClassP ...
- 玲珑杯1007-A 八进制大数加法（实现逻辑陷阱与题目套路）
题目连接:http://www.ifrog.cc/acm/problem/1056 DESCRIPTION Two octal number integers a, b are given, and ...
- System.Web.Caching.Cache类 缓存
1.文件缓存依赖 public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender ...