<!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. map find 是线程安全的吗

    测试环境gcc4.8.2     iterator find ( const key_type& k ); const_iterator find ( const key_type& ...

  2. 【翻译七】java-同步

    Synchronization Threads communicate primarily by sharing access to fields and the objects reference ...

  3. SOLR+LUCENE错误

    java.lang.NoClassDefFoundError: org/apache/lucene/analysis/synonym/SynonymFilter 该错误发生在自定义SOLR服务器时,原 ...

  4. centos6.4下安装php的imagick和imagemagick扩展教程

    imagick在centos6.4的安装方法: .安装ImageMagick 代码如下: wget http://soft.vpser.net/web/imagemagick/ImageMagick- ...

  5. hdu 4278 2012天津赛区网络赛 数学 *

    8进制转为10进制 #include<cstdio> #include<iostream> #include<algorithm> #include<cstr ...

  6. hdu 4069 福州赛区网络赛I DLC ***

    再遇到一个DLC就刷个专题 #include <stdio.h> #include <string.h> #include <iostream> #include ...

  7. the last lecture

    2008.07.25,CMU教授Randy Pausch教授因癌症去世,仅47岁. 几年之前,当我看到Pausch先生最后一课的视频时,让我震撼. 转眼之间,7年过去了,这7年,让我成长了许多. 7年 ...

  8. Objective-C编码规范：26个方面解决iOS开发问题（转）

    链接

  9. ListView中每个item条目在被单击选中时能够高亮显示

    在布局文件中设定: android:listSelector="@android:color/holo_red_light" 在代码中实现 listView.setSelector ...

  10. （转载）如何借助KeePassX在Linux上管理多个密码

    转自:http://netsecurity.51cto.com/art/201311/417764.htm 如今,基于密码的身份验证在网上非常普遍,结果你恐怕数不清自己到底在使用多少个密码.实际上,据 ...