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 ...
随机推荐
- AngularJS取得后台Jason数据显示在页面上
代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsAjax.rar 前台代码: <%@ page language=&quo ...
- Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental……
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to th ...
- odoo图片显示
如果在odoo客户端展示图片, 可以用 url( data:image/png;base64, 图片base64编码过的内容) 展示, 例如 url(data:image/png;ba ...
- ASP.NET MVC 扩展自定义视图引擎支持多模板&动态换肤skins机制
ASP.NET mvc的razor视图引擎是一个非常好的.NET MVC 框架内置的视图引擎.一般情况我们使用.NET MVC框架为我们提供的这个Razor视图引擎就足够了.但是有时我们想在我们的 ...
- iphone、ipod Touch、ipad触屏时的js事件
1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...
- Linux 网络概述
OSI參考模型与TCP/IP參考模型 如上图所看到的. OSI的应用层.表示层.会话层相应TCP/IP的应用层:OSI的传输层相应TCP/IP的传输层.OSI的网络层相应TCP/IP的网络层:OIS的 ...
- 【Wechall.net挑战】Anderson Application Auditing
Wechall.net是一个国外用于练习CTF和攻防的网站,国内资料writeup不多,只有个别几篇.作为小白,近日玩了几道有意思的题目,在此分享 题目地址:http://www.wechall.ne ...
- matlab中文显示乱码：控制台上的，编辑器的，图片中的
问题:matlab脚本与函数文件的中文注释显示乱码. 环境:matlab R2016a.Windows 10 home. 解决方案: step1 检查locale值 matlab命令行键入命令 fea ...
- c#线程顺序执行
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- OpenCV 中的三大数据类型( 概述 )
前言 OpenCV 提供了许多封装好了的类型,而其中,以三大类型最为核心.本文将大致介绍这三大类型. CvArr:不确定数组 它可以被视为一个抽象基类,后面的两大类型都继承此类型并扩展.只要某个函数的 ...