下拉菜单得经典写法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> ...
随机推荐
- 007-python基础-pyc是什么
3.1 解释型语言和编译型语言 计算机是不能够识别高级语言的,所以当我们运行一个高级语言程序的时候,就需要一个"翻译机"来从事把高级语言转变成计算机能读懂的机器语言的过程.这个过程 ...
- 菜鸟学习Hibernate——多对多关系映射
Hibernate中的关系映射,最常见的关系映射之一就是多对多关系映射例如用户与角色的关系,一个用户对应多个角色,一个角色对应多个用户.如图: Hibernate中如何来映射这两个的关系呢? 下面就为 ...
- 我爱我家：我为什么选择AppCan?
10年前,说起手机,大家联想到的词大概是:电话.短信.QQ.拍照,以及贪吃蛇等有限的几个小游戏.而如今,手机毫无疑问已经成为人们生活中不可或缺的部分.这是一个神奇的东西:通讯工具,外卖神器,游戏机,移 ...
- Java动态替换InetAddress中DNS的做法简单分析2
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.i ...
- java 静态变量生命周期（类生命周期）
Static: 加载:java虚拟机在加载类的过程中为静态变量分配内存. 类变量:static变量在内存中只有一个,存放在方法区,属于类变量,被所有实例所共享 销毁:类被卸载时,静态变量被销毁,并释放 ...
- Java Day 08
数组工具对象建立 多个.java文件先编译谁 数组工具类中静态的使用 构造函数私有化 数组工具类--文档注释 设计模式 -- 单例设计模式 保证一个类在内存中的对象唯一性 1.不允许其他程序使用new ...
- JAVA类与对象（四）----成员变量与局部变量 、成员方法、构造方法
类体中的变量分为两部分.变量定义部分定义的变量为类的成员变量,在方法体中定义的变量和方法中涉及的变量称为局部变量. 成员变量和局部变量的区别: (1).成员变量在整个类中都有效,局部变量只在定义它的方 ...
- The underlying JVM is how to realize the synchronized
http://www.programering.com/a/MjN0IjMwATg.html
- 设计模式之Composite（组合）模式
1.出现原因 1.在面向对象系统中,我们常会遇到一类具有“容器”特征的对象——即它们在充当对象的同时,又是其他对象的容器. 如何将“客户代码与复杂的对象容器结构”解耦(将这种组合容器对象设计成树形结构 ...
- linux - 自动删除n天前日志
1.删除文件命令: find 对应目录 -mtime +天数 -name "文件名" -exec rm -rf {} \; 实例命令: find /opt/soft/log/ -m ...