CSS+HTML+JQuery简单菜单
1. [代码]style
<style type="text/css">
body,ul,li,a{
margin:0;
padding:0
}
ul,li{
list-style-type:none
}
.menu{
width:270px;
height:30px;
line-height:30px;
background:#0f67a1
}
.menu li{
width:80px;
float:left;
display:inline;
position:relative;
z-index:10;
text-align:center/*一级栏内容居中*/
}
.menu li:hover{
background:#426d9c;
}
.menu .menuUl{
width:50px;
height:auto;
display:none;
background:#426d9c;
position:absolute;
z-index:20;
left:25px;
top:30px
}
.menuUl li{
width:100%;
float:left;
text-align:left;
}
a{
color:#eee;
text-decoration: none
}
a:hover{
color:#000;
text-decoration: none
}
</style>
2. [代码]script
<script type="text/javascript">
$(document).ready(function(){
$(".menu li").hover(
function(){
$(this).find(".menuUl").show('50');
},
function(){
$(this).find(".menuUl").hide('50');
}
);
})
</script>
3. [代码]body
<body>
<ul class="menu">
<li>
<a href="">1</a>
<ul class="menuUl">
<li><a href="" >1</a></li>
<li><a href="" >2</a></li>
<li><a href="" >3</a></li>
<li><a href="" >4</a></li>
</ul>
</li>
<li>
<a href="">1</a>
<ul class="menuUl">
<li><a href="" >1</a></li>
<li><a href="" >2</a></li>
<li><a href="" >3</a></li>
<li><a href="" >4</a></li>
</ul>
</li>
</ul>
</body>
4. [文件] jquery-1.7.2.min.js ~ 93KB 下载(29)
5. [文件] 完整文件
<!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>http://www.huiyi8.com/dongman/weimei/
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/main.css" rel="stylesheet" />
<script type="text/javascript" src="js/vendor/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".menu li").hover(
function(){
$(this).find(".menuUl").show('50');
},
function(){
$(this).find(".menuUl").hide('50');
}
);
})
</script>
<style type="text/css">
body,ul,li,a{
margin:0;
padding:0
}
ul,li{
list-style-type:none
}
.menu{
width:270px;
height:30px;
line-height:30px;
background:#0f67a1
}
.menu li{
width:80px;
float:left;
display:inline;
position:relative;
z-index:10;
text-align:center/*一级栏内容居中*/
}
.menu li:hover{
background:#426d9c;
}
.menu .menuUl{
width:50px;
height:auto;
display:none;
background:#426d9c;
position:absolute;
z-index:20;
left:25px;
top:30px
}
.menuUl li{
width:100%;
float:left;
text-align:left;
}
a{
color:#eee;
text-decoration: none
}
a:hover{
color:#000;
text-decoration: none
}
</style>
</head>
<body>
<ul class="menu">
<li>
<a href="">1</a>
<ul class="menuUl">
<li><a href="" >1</a></li>
<li><a href="" >2</a></li>
<li><a href="" >3</a></li>
<li><a href="" >4</a></li>
</ul>
</li>
<li>
<a href="">1</a>
<ul class="menuUl">
<li><a href="" >1</a></li>
<li><a href="" >2</a></li>
<li><a href="" >3</a></li>
<li><a href="" >4</a></li>
</ul>
</li>
</ul>
</body>
</html>
CSS+HTML+JQuery简单菜单的更多相关文章
- jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
- Smint – 用于单页网站制作的 jQuery 导航菜单插件
Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...
- 几款jQuery右键菜单插件介绍
在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...
- css与jquery、图标字体
*)还能这样选择 header #search input[type="text"] *)按钮常用颜色:#008cBA(字母大小写没有区别) *)清除浮动后,text-align没 ...
- jquery右键菜单
点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...
- 使用CSS和jQuery实现tab页
使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...
- jQuery实现菜单点击隐藏（上下左右）
canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- jQuery简单实例
jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素. $("p").hide() 演示 jQuery 的 h ...
- jquery 简单弹出层(转)
预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...
随机推荐
- hibernate 数据缓存
http://www.cnblogs.com/wean/archive/2012/05/16/2502724.html,
- 编程算法 - 两个链表的第一个公共结点 代码(C)
两个链表的第一个公共结点 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 输入两个链表, 找出它们的第一个公共结点. 计算链表的长度, 然后移动 ...
- AspectJ学习笔记2-Eclipse中AspectJ插件AJDT的正确安装方法
接着之前一篇日志. 这个事情也挺无语的.简单记录一下. 在这里:http://www.eclipse.org/ajdt/ 能够下载最新的Eclipse Plugin.下载解压之后,一般来说.直接把解压 ...
- 35:字符串单词倒排 ReverseWords
题目描述:对字符串中的所有单词进行倒排. 说明: 1.每个单词是以26个大写或小写英文字母构成: 2.非构成单词的字符均视为单词间隔符: 3.要求倒排后的单词间隔符以一个空格表示:如果原字符串中相邻单 ...
- windows下rsync部署安装
windows下rsync部署安装 2012-06-05 12:06:13| 分类: 系统 | 标签:rsync windows |字号 订阅 rsync在windows与windows ...
- PHP如何识别系统语言或浏览器语言
preg_match('/^([a-z\-]+)/i', $_SERVER['HTTP_ACCEPT_LANGUAGE'], $matches); $lang = $matches[1]; switc ...
- Oracle更新时间字段
update field set BEGINDATE=to_date('2015-05-03 10:30:20','yyyy-mm-dd hh24:mi:ss') where NOO='01'
- 基于UML的需求分析和系统设计个人体会
阅读了http://www.uml.org.cn/oobject/201405123.asp文章之后,对使用UML进行系统的需求分析和设计有了一个基础的理解.在此做一下整理. 1.项目开始阶段 项 ...
- Hadoop关于Wrong FS错误
关于使用java api上传文件. 在定义一个FileSystem变量的时候伪分布式和单机版的方法是不一样的,单机版使用的是FileSystem类的静态函数 FileSystem hdfs = Fil ...
- android studio 更新Gradle版本号方法
在导入其它项目时,常常因为gradle版本号不一致而导致不能编译 解决方法: 第一步: 按提示点击让它下载.事实上目的并非要它下载.因为这样速度会非常慢.这样做仅仅是为了让它在本地创建相应的文件夹结构 ...