<!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实现竖排菜单的更多相关文章

  1. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  2. jQuery Wheel 环形菜单插件5种效果演示

    很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...

  3. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  4. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  5. 炫酷实用的jQuery插件 涵盖菜单、按钮、图片

    新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...

  6. jQuery弹性滑动导航菜单实现思路及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...

  7. 打造简易可扩展的jQuery/CSS3 Tab菜单

    原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜 ...

  8. 简单jQuery 实现手风琴菜单

    简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...

  9. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

随机推荐

  1. 与你相遇好幸运，Sails.js安装

    官网: http://sailsjs.org Github:https://github.com/balderdashy/sails 开发文档: http://sailsjs.org/document ...

  2. JavaScript中判断对象类型方法大全1

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  3. C++ 基础 const放在函数末尾的意思

  4. ora-01033:oracle initializationg or shutdown in progress 错误提示解决方法

    1.进入CMD,执行set ORACLE_SID=fbms,确保连接到正确的SID:2.运行sqlplus "/as sysdba" SQL>shutdown immedia ...

  5. MyBatis传入参数与parameterType

    参考:http://openwares.net/database/mybatis_parametertype.html Mybatis的Mapper文件中的select.insert.update.d ...

  6. CE搜索内存数据的原理

      最近发现有朋友在玩游戏时, 使用一款工具来修改游戏的部分数据,作弊的效果, 也就是CE(Cheat Engine),这款工具是 delphi 编写的, 于是好奇, 然后瞬间想到API OpenPr ...

  7. 使用android ProgressBar和Toast生成一个界面

    首先我需要这样一个界面 这个界面是在使用AudioManager.adjustStreamVolume(int streamType, int direction, int flags)显示出来的,记 ...

  8. 【框架】异步加载大量图片--ImageLoader

    public abstract class BaseImageLoaderProvider { public abstract void loadImage(Context ctx, ImageLoa ...

  9. 【SQL Server】数据库是单个用户的 无法顺利进行操作 怎么解决

    1.打开数据库 2.新建查询 ,输入以下的SQL 语句 DECLARE @SQL VARCHAR(MAX); SET @SQL='' SELECT @SQL=@SQL+'; KILL '+RTRIM( ...

  10. AndroidTips：selector的disable状态为什么无效？

    正确的姿势: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android=& ...