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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {padding:0; margin:0;}
body {font:12px/normal Verdana, Arial, Helvetica, sans-serif;}
ul li{list-style-type:none;text-transform:capitalize;}
#nav .mainlevel{float:left;margin-right:20px;padding-right:3px;background:#ffff00;width:140px;text-align:center; line-height:22px;}
.linHideStyle{display:none;}
</style>
<script type="text/javascript" src="./jquery/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$('li.mainlevel').mousemove(function(){
$(this).find('ul').removeClass('linHideStyle').slideDown();//you can give it a speed
});
$('li.mainlevel').mouseleave(function(){
$(this).find('ul').addClass('linHideStyle').slideUp("fast");
});
});
</script>
<title>jquery下拉竖导航菜单代码</title>
</head>
<body>
<br /><br /><br />
<div id="menu">
<ul id="nav">
<li id="mainlevel_01" class="mainlevel">
<a href="#">第一</a>
<ul class="linHideStyle">
<li>
<a href="">the one</a>
</li>
<li>
<a href="">the one</a>
</li>
<li>
<a href="">the one</a>
</li>
</ul>
</li>
<li id="mainlevel_02" class="mainlevel">
<a href="#">第二</a>
<ul class="linHideStyle">
<li>
<a href="">the one</a>
</li>
<li>
<a href="">3333dd</a>
</li>
<li>
<a href="">the one</a>
</li>
</ul>
</li>
<li id="mainlevel_03" class="mainlevel">
<a href="#">第三</a>
<ul class="linHideStyle">
<li>
<a href="">the one</a>
</li>
<li>
<a href="">the one</a>
</li>
<li>
<a href="">the one</a>
</li>
</ul>
</li>
<li id="mainlevel_04" class="mainlevel">
<a href="#">第四季度</a>
<ul class="linHideStyle">
<li>
<a href="">the one</a>
</li>
<li>
<a href="">the one</a>
</li>
<li>
<a href="">the one</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
jquery 只有二级下拉菜单的更多相关文章
- jQuery动画二级下拉菜单
在线演示 本地下载
- 基于jQuery动画二级下拉导航菜单
春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- jquery实现多级下拉菜单
支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...
- 纯CSS3实现宽屏二级下拉菜单
今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...
- flash滚动图片遮住二级下拉菜单解决方法
如上图所示,在进行排版时,如果不注意会遇到二级下拉菜单被下边的img图片遮住.此种情况在ie7 8 中出现. 解决方法:给二级下拉菜单添加z-index:9999;position:relative; ...
- Excel应用----制作二级下拉菜单【转】
应用: 原始数据源是两列的源数据,那该如何制作二级下拉菜单, 当然可以将这两列的数据源,转换成上面的那种格式,再用上面的方法来制作. 今天教大学的方法是直接通过这种两列式的数据源来制作下拉菜单,如果A ...
- CSS技巧分享：如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
- boostrapt的二级下拉菜单
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta conte ...
- jQuery+Superfish制作下拉菜单
superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...
随机推荐
- glance was not installed properly
- UILabel字体加粗等属性和特效
/* Accessing the Text Attributes text property font property textColor property textAlignment pr ...
- 学习：Linux基础知识<一>
>>硬盘分区模式 硬盘分区模式一般如下: -- / (根目录) -- /usr (操作系统) --/home (用户信息) -- /var (默认服务器的登录文件,邮件与WW ...
- Android 开发60条技术经验总结(转)
Android 开发60条技术经验总结: 1. 全部Activity可继承自BaseActivity,便于统一风格与处理公共事件,构建对话框统一构建器的建立,万一需要整体变动,一处修改到处有效. 2. ...
- java中如何使正在运行中的线程退出
终止线程的三种方法 有三种方法可以使终止线程. 1. 使用退出标志,使线程正常退出,也就是当run方法完成后线程终止. 2. 使用stop方法强行终止线程(这个方法不 ...
- ServletContext和ServletConfig
一.ServletConfig对象 1 .作用 ServletConfig对象: 主要是用于加载servlet的初始化参数. 在一个web应用可以存在多个ServletConfig对象(一个Servl ...
- [Javascript] Immutable opreators
slice filter map ...spread concat Object.assign let items = [1,2,3]; //add let newItems = [...items, ...
- dell笔记本通过uefi+gpt模式安装win10系统
安装前,需要确认dell笔记本是否支持uefi 1.使用UltraISO制作硬盘镜像后,过程如下 1) 选择"文件"->"打开",如下 2) 在打开的对话 ...
- Android开发之ViewPager实现多页面切换及动画效果（仿Android的Launcher效果）
Android开发中经常会有引导页或者切换页面等效果,本文采用ViewPager结合动画效果来实现仿Launcher以及页面切换的效果.源码地址在文章最后给出下载. 效果图如下: 1.Vi ...
- 给自己取了个英文名-Jamy Cai，哈哈~~
给自己取了个英文名:Jamy Cai, 同时开始启用新邮箱:Jamycai@outlook.com ~~