下拉菜单得经典写法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> ...
随机推荐
- openstack的控制节点部署
openstack的控制节点部署 主要是使用了本地安装的那个镜像. 会出现几个问题, 1.重启服务无法启动. 2.环境变量无法正确配置可以自己配置
- [笔记]--在Windows下配置Git
安装就不多说了: 1.ls不能显示中文目录 解决办法:在git/etc/git-completion.bash中增加一行: alias ls='ls --show-control-chars --co ...
- C语言接口的写法（以toyls命令为例）
#include <unistd.h> #include <stdio.h> #include <stdlib.h> #include <string.h&g ...
- C# 堆和栈的区别-该文转自：http://www.itcodes.cn/746.html | 程序人生
理解堆与栈对于理解.NET中的内存管理.垃圾回收.错误和异常.调试与日志有很大的帮助.垃圾回收的机制使程序员从复杂的内存管理中解脱出来,虽然绝大多数的C#程序并不需要程序员手动管理内存,但这并不代表程 ...
- React Native相关
安装相关工具参考(视频):http://ninghao.net/course/3001?a=26 学习参考:http://reactnative.cn/ 学习参考:http://www.ruanyif ...
- poj 3580 SuperMemo
题目连接 http://poj.org/problem?id=3580 SuperMemo Description Your friend, Jackson is invited to a TV sh ...
- Spring框架中的IOC和DI的区别
上次面试被问到IOC和DI的区别时,没怎么在意,昨天又被问到,感觉有点可惜.今晚总算抽点时间,查看了spring官方文档.发现,IoC更像是一种思想,DI是一种行为.为了降低程序的耦合度,利用spri ...
- locate 命令
ac OS X 下的 locate 在便利性上差了一些.主要是一些辅助工具.我在开始用 Mac OS X 下的locate 时,把过去知道的创立数据库的命令尝试了个遍,就是没有可行的.后来搜索网络才找 ...
- django-pagination的使用
1.安装django-pagination 2.将文件夹pagination复制到项目的根目录下 3.修改settings: 1.将 'pagination.middleware.Pagination ...
- 一位iOS教育类应用开发者是如何赚到60多万美元？
注:伯乐在线12月19日在@程序员的那些事 微博推荐了此文的英文原文,非常感谢@dotSlash 的翻译. 转眼距我写<我如何在iOS教育类应用中赚到20万美元>这篇博文已经一年多了,它 ...