下拉菜单得经典写法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> ...
随机推荐
- 窗体皮肤实现 - 在VC中简单实现绘制（五）
到第四部分Delphi XE3的代码能基本完成窗体界面的绘制.窗口中的其他控件的处理方法也是相同的,截获消息处理消息. 问题这个编译出来的个头可不小.Release版本竟然2.43M,完全是个胖子.系 ...
- CentOS6.0/RedHat Server 6.4安装配置过程 详细图解！
1.准备安装 1.1 系统简介 CentOS 是什么? CentOS是一个基于Red Hat 企业级 Linux 提供的可自由使用的源代码企业级的 Linux 发行版本.每个版本的 CentOS 都会 ...
- DB2测试存储过程的原子性
存储过程在运行过程中需要对其做异常处理.原子性等测试 下面是一个原子性测试案例 ===================================== 代码区域 ================= ...
- Percona-Xtrabackup 2.3.3 慢查询依旧堵塞MariaDB备份（三）
MariaDB [yoon]> select version();+---------------------+| version() |+---------------------+| 10. ...
- [JAVA][RCP] Eclipse4/RCP/Lifecycle
E4AP provides two levels of lifecycles, for contributions and for the application. Contents [hide] ...
- [转]How do I use software from a PPA
[转]How do I use software from a PPA? https://launchpad.net/~mc3man/+archive/ubuntu/trusty-media To s ...
- openSUSE install failed
install openSUSE 13.1 with vmware play (version 6.0.0) calling the yast module 'inst_autoinit has f ...
- MS Chart-按照数据库的最大最小时间设置X轴label.
核心代码: Chart1.ChartAreas[0].AxisX.Interval = (Front_Max - Front_Min).Days / 2; Chart1.ChartAreas[0].A ...
- plist 读取 swift
// // ViewController.swift // plist读写 // // Created by mac on 15/7/13. // Copyright (c) 2015年 fangyu ...
- STL学习系列四：Stack容器
Stack简介 stack是堆栈容器,是一种“先进后出”的容器. stack是简单地装饰deque容器而成为另外的一种容器. #include <stack> 1.stack对象的默认构造 ...