下拉菜单得经典写法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> ...
随机推荐
- 关于EasyUI与富文本编辑器结合使用的问题（kindueditor与uueditor）
最近使用easyui玩玩项目,在结合富文本编辑器时遇到了一些问题,很多人(在网上看到)集成富文本编辑器时常常不能显示, 第一次打开编辑的时候没有问题,但是第二次打开就出错了.为此我进行了一些调试研究. ...
- 转：javascript 中select的取值
javascript获取select的值全解 获取显示的汉字 document.getElementById("bigclass").options[window.document ...
- [笔记]--Oracle修改SGA大小
1.通过spfile修改 (1)使用SYS用户以SYSDBA身份登录系统 (2)查看修改前sga_max_size,sga_target大小 show parameter sga_max_size; ...
- RAP开发入门-搭建RAP开发环境（一）
ps:补充 RAP (Remote Application Platform) 官网地址eclipse.org/rap 1.下载IDE http://www.eclipse.org/downloads ...
- 从数组->ArrayList->List 为了方便与安全在不断变化着
在C#中,当我们想要存储一组对象的时候,就会想到用数组,ArrayList,List这三个对象了. 数组 优点优点之一:数组在内存中是连续存储的,所以它的索引速度是非常的快,而且赋值与修改元素也很简单 ...
- orcle 查询数据集对变量赋值函数
create or replace function test(Name in varchar2 ) return varchar2 is V_CONTAINERDESC CHAR ); BEGIN ...
- SQLite之写一个表
1.首先你需要一个路径. 获取document目录并返回数据库目录 - (NSString *)dataFilePath{ NSArray *paths = NSSearchPathForDirect ...
- shell 与用户交互
bash shell如何获取命令行参数(添加到命令后的数据).命令行选项(确定命令行为的英文字母).键盘输入数据? 操作命令行参数 1 读取参数 bash shell用位置参数变量(positiona ...
- easyui中jquery重复引用问题（tab内存泄露问题）
今天认真测试了下easyui的一些兼容性问题,发现在ie9 ie10 首次加载的时候,会出现如下bug.如图所示: 认真看了下,我估计是脚本重复引用的问题,我用的iframe框架的模式.登陆系统后,桌 ...
- 在package.json中配置Script执行npm run tslint报错问题
今天在学习tslint的时候,按照git clone下angular2-webpack-starter的代码执行npm run lint时,虽然代码进行了检测,但检测完成后npm始终报错, //pac ...