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 ...
随机推荐
- 微信小程序 - 非Form数据怎么发送到后端？
通过设置异步缓存,就可以做到 wx.setStorageSync('imgs',imglist); 最后的提交信息:
- 为什么我们有时不用配置java环境变量？
答案都在这个图中 完毕,如果还不懂请自行查询注册表相关内容学习.
- 【深入JAVA EE】Spring配置文件解析
在阅读的过程中有不论什么问题,欢迎一起交流 邮箱:1494713801@qq.com QQ:1494713801 一.Spring头信息 Spring配置文件的头部信息通常是固定不变的.但每个标 ...
- hdu4857 & BestCoder Round #1 逃生（拓扑逆排序+优先队列）
题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=4857 ----------------------------------------------- ...
- 37:密码截取（回文串manacher算法）
题目描述:Catcher是MCA国的情报员,他工作时发现敌国会用一些对称的密码进行通信,比如像这些ABBA,ABA,A,123321,但是他们有时会在开始或结束时加入一些无关的字符以防止别国破解.比如 ...
- deeplearning.net 0.1 document - Multilayer Perceptron
Multilayer Perceptron 以下我们使用Theano来介绍一下单隐藏层的多层感知机(MLP).MLP能够看成一个logistic回归分类器,它使用一个已经学习的非线性转换器处理输入.这 ...
- android中使用百度定位sdk实时的计算移动距离
; //5秒刷新一次 private Handler refreshHandler = new Handler(){ //刷新界面的Handler public void handleMessag ...
- python3 configparser对配置文件读写
import configparser #read data from conf filecf=configparser.ConfigParser()cf.read("biosver.cfg ...
- 织梦在广告(myad)中使用css样式
使用单引号,以及只有style这一个属性
- hdu 2063过山车
二分匹配 #include<iostream> #include<cstring> using namespace std; int k,m,n; int rem[500+5] ...