下拉菜单得经典写法html5
<!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" />
<title>jQuery鼠标经过二级菜单下拉代码 - 站长素材</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// nav-li hover e
var num;
$('.nav-main>li[id]').hover(function(){
/*图标向上旋转*/
$(this).children().removeClass().addClass('hover-up');
/*下拉框出现*/
var Obj = $(this).attr('id');
num = Obj.substring(, Obj.length);
$('#box-'+num).slideDown();
},function(){
/*图标向下旋转*/
$(this).children().removeClass().addClass('hover-down');
/*下拉框消失*/
$('#box-'+num).hide();
});
// hidden-box hover e
$('.hidden-box').hover(function(){
/*保持图标向上*/
$('#li-'+num).children().removeClass().addClass('hover-up');
$(this).show();
},function(){
$(this).slideUp();
$('#li-'+num).children().removeClass().addClass('hover-down');
});
}); </script>>
<style>
/**
*在Position属性值为absolute的同时，
*如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）
*的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，
*这对精确定位是很有帮助的。
*/
*{
margin: ;
padding: ;
list-style-type:none;
}
/*nav导航盒子*/
div.nav{
width: 800px;
height:36px;
line-height: 36px;
text-align: center;
font-size: 12px;
position: relative;
background: #;
margin:40px auto auto;
}
/*nav-main*/
ul.nav-main{
width: %;
height: %;
list-style-type: none;
}
ul.nav-main span{
display: inline-block;
margin-left: 18px;
width: 7px;
height: 7px;
background: url('http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201512/jiaoben3844/img/down-icon.png') no-repeat;
}
/*图标向上旋转*/
.hover-up{
transition-duration: .5s;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
/*图标向下旋转*/
.hover-down{
transition-duration: .5s;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
/*导航条设置*/
ul.nav-main>li{
width: 120px;
height: %;
display: block;
float: left;
background: #;
color: #fff;
margin-right: 1px;
cursor: pointer;
}
ul.nav-main>li:hover{
background: #;
}
/*隐藏盒子设置*/
div.hidden-box{
width: 118px;
border: 1px solid #;
border-top: ;
position: absolute;
display:block;
background:#fff;
top: 36px;
}
.hidden-box>ul{
list-style-type: none;
color: #;
cursor: pointer;
}
.hidden-box li:hover{
background: #;
color: #fff;
}
/*隐藏盒子位置设置*/
.hidden-loc-index{
left: 121px;
}
.hidden-loc-us{
left: 242px;
}
.hidden-loc-info{
left: 363px;
}
.box04{
left:485px;
}
</style>
</style>
</head>
<body> <!--nav-->
<div class="nav">
<!--导航条-->
<ul class="nav-main">
<li>首页</li>
<li id="li-1">关于CFOAM<span></span></li>
<li id="li-2">信息中心<span></span></li>
<li id="li-3">消费者服务<span></span></li>
<li id="li-4">商务服务<span></span></li>
<li>研究中心</li>
</ul>
<!--隐藏盒子-->
<div id="box-1" class="hidden-box hidden-loc-index">
<ul>
<li>目的意义</li>
<li>发展历程</li>
<li>组织架构</li>
<li>精英团队</li>
<li>关于我们</li>
<li>商家信息</li>
<li>加入我们</li>
<li>关于我们</li>
<li>产品信息</li>
</ul>
</div>
<div id="box-2" class="hidden-box hidden-loc-us">
<ul>
<li>加入联盟步骤</li>
<li>申请要求</li>
<li>关于我们</li>
<li>商家信息</li>
<li>加入我们</li>
<li>关于我们</li>
<li>产品信息</li>
</ul>
</div>
<div id="box-3" class="hidden-box hidden-loc-info">
<ul>
<li>消费者服务</li>
<li>产品信息</li>
<li>关于我们</li>
<li>商家信息</li>
<li>加入我们</li>
<li>关于我们</li>
<li>产品信息</li>
<li>关于我们</li>
<li>商家信息</li>
<li>加入我们</li>
<li>关于我们</li>
<li>产品信息</li>
</ul>
</div>
<div id="box-4" class="hidden-box hidden-loc-info box04">
<ul>
<li>服务理念</li>
<li>服务产品</li>
<li>周边有机网络</li>
<li>商铺汇总</li>
<li>有机百科</li>
<li>保障与维权</li>
<li>关于我们</li>
<li>商家信息</li>
<li>加入我们</li>
<li>关于我们</li>
<li>产品信息</li>
</ul>
</div>
</div> </div>
</body>
</html>
下拉菜单得经典写法html5的更多相关文章
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 11个优秀的HTML5 & CSS3下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个非经常见的效果.在站点设计中被广泛使用.通过使用下拉菜单.设计者不仅能够在站点设计中营造出色的视觉吸引力,但也能够为站点提供了一个有效的导航方案.使用 HTML5 和 CSS3 能够更e ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架
简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- Html5+Css3制作下拉菜单的三种方式
一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...
- html5 css练习 下拉菜单制作
*{ margin: 0; padding: 0;}li{ list-style-type: none;}a{ text-decoration: none;}.ul1{marg ...
- Html5+Mui前端框架,开发记录（四）：下拉菜单绑定数据、搜索、时间控件
1.下拉菜单绑定数据,选择后回传值 1)html: <div class="mui-input-row"> <label>xxx:</label> ...
随机推荐
- 15.python的for循环与迭代器、生成器
在前面学习讲完while循环之后,现在终于要将for循环这个坑填上了.之所以拖到现在是因为for循环对前面讲过的序列.字典.集合都是有效的,讲完前面的内容再来讲for循环会更加容易上手. 首先,for ...
- C# Sql 触发器
触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程.触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. Ø 什么是触发器 触发器对表进行插入.更新.删 ...
- hdu 1195 Open the Lock
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1195 Open the Lock Description Now an emergent task f ...
- Golang的Semicolons
Semicolons The formal grammar uses semicolons ";" as terminators in a number of production ...
- Go语言类型switch
switch还可以用于判断变量类型.使用方式为T.(type),即在变量后加上.(type).见代码: package main import ( "fmt" ) func mai ...
- 10个 iOS 用户暂可以嘲笑 Android 的特点
Android 与 iOS 设备之间的争斗从未停止,毕竟一切高科技产品的理念和实际表现方式都不相同.就拿 Android 来说,很多功能令用户并 不太开心,甚至是令人愤怒,下面让我们来简单的盘点 10 ...
- 从零开始学ios开发（二）：Hello World！来啦！
今天看了书的第二章,主要介绍了一下Xcode的使用方法和一些必要的说明,最后做了一个“Hello World!”的小程序,其实就是在屏幕上用一个Label显示“Hello World!”,一行代码都没 ...
- 微价值：专访《甜心爱消除》的个人开发者Lee，日入千元
[导语] 我们希望能够对一些个人开发者进行专访,这样大家更能显得接地气,看看人家做什么,怎么坚持.<甜心爱消除>作者Lee是三群的兄弟,也关注微价值.微价 值的文章还是可以的,得到一些业内 ...
- 编译基于ARM LINUX的驱动模块的Makefile
KERNELDIR =/home/wenhao/platform/linux-2.6.34PWD := $(shell pwd)CROSS_COMPILE = /usr/local/arm/4.3.2 ...
- 微软职位内部推荐-Software Engineer II-Web app
微软近期Open的职位: The Office App Services team is working on the powerful Office Web Apps including Word ...