jquery 竖向二级下拉导航菜单

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery 竖向二级下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css教程">
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>
<!--[if lt ie 8]>
<style type="text/css">
li a{display:inline-block;}
li a{display:block;}
</style>
<![endif]-->
<script src="/jquery-1.2.1.min.js" type="text/网页特效"></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>
</head>
<body>
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<ul id="menu">
 <li>
  <a href="#">weblog tools</a>
  <ul>
   <li><a href="#">pivotx</a></li>
   <li><a href="#">wordpress</a></li>
  </ul>
 </li>
 <li>
  <a href="#">programming languages</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="http://www.zzsky.cn" target="_blank">zzsky(no submenu)</a></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>
 <li>
  <a href="#">search engines</a>
  <ul>
   <li><a href="#">yahoo!</a></li>
   <li><a href="#">google</a></li>
   <li><a href="#">ask.com</a></li>
   <li><a href="#">live search</a></li>
  </ul>
 </li>
</ul>
</body>
</html>

时间: 2024-11-10 06:57:44

jquery 竖向二级下拉导航菜单的相关文章

网站后台的竖向二级下拉导航菜单

管理首页 博文管理 博文列表 博文回收站 博文分类管理 博文分类添加 标签管理 标签管理 上传附件管理 评论留言 评论管理 记录管理 留言管理

jQuery实现淡入淡出二级下拉导航菜单的方法_jquery

本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquery-1.6.2版本的JS,鼠标移动到包括二级子菜单的主菜单上,会立即渐显出二级的子菜单,鼠标在二级子菜单上划过,子菜单项的背景会改变. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-in-out-nav-menu-codes/ 具体代

纯CSS实现超简单的二级下拉导航菜单代码

本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: 具体代码如下:   复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

JS+CSS实现简单的二级下拉导航菜单效果_javascript技巧

本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果.分享给大家供大家参考.具体如下: 这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/

js 二级下拉导航菜单代码

菜单一 菜单二 菜单三 菜单四 菜单五 菜单六 菜单七 菜单八 内容一 内容二 内容三 内容四 内容五 内容六 内容七 内容八

CSS实现带小箭头二级下拉导航菜单

首页 网站导航 财富 外部链接 创业 感情 家庭 影印娱乐 我的DV 我的相册 新人新事 天下新闻 个人作品 心情感想 合作事宜 项目资金 团队建设 我是团长 联系方式 联系方式 留言本

js 符合web标准二级下拉导航菜单

栏目1 栏目1->菜单1 栏目1->菜单2 栏目1->菜单3 栏目2 栏目2->菜单1 栏目2->菜单2 栏目2->菜单3 栏目3 栏目3->菜单1 栏目3->菜单2 栏目3->菜单3

jquery实现可伸缩的竖向下拉导航菜单

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>可伸缩的竖向下拉导航

jQuery实现二级下拉菜单效果_jquery

大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有:        1)使用$(function(){...})获取到想要作用的HTML元素.        2)通过使用children()方法寻找子元素.        3)通过使用show()方法来显示HTML元素.        4)通过使用hide()方法来隐藏HTML元素.        5