第72天：jQuery实现下拉菜单
jQuery实现下拉菜单
一、居中
1、块元素居中：给块元素本身设置：margin:0 auto;，块元素必须设置宽度
2、行内块元素居中：给元素父级设置text-algin:center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
width: 100%;
height: 40px;
background: #0044DD;
margin: 100px auto;
}
.nav .item{
/* font-size: 0;*/
width: 606px;
margin:0 auto; }
.nav .item li{
font-size: 16px;
width: 100px;
height: 40px;
/* display: inline-block;*/
float: left;
line-height:40px;
text-align: center;
border-right: 1px solid #CCCCCC;
position: relative;
margin-bottom: 0;
} .nav li a{
text-decoration: none;
color: #ffffff;
}
.nav .item ul{
position: absolute;
left:0;
top:40px;
display: none;
}
.nav .item ul li{
font-size: 16px;
width: 100px;
height: 40px;
background-color: #2B93D2;
border-top:1px solid #CCCCCC; }
</style>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
/*$(".nav li").hover(function(){
$(this).children("ul").show();
},function(){
$(this).children("ul").hide();
});*/
$(".item li").hover(function(){
$(this).children("ul").slideToggle();
});
});
</script>
</head>
<body>
<div class="nav">
<ul class="item">
<li><a href="">网站首页</a>
<ul>
<li><a href="">案例展示</a></li>
<li><a href="">案例展示</a></li>
<li><a href="">案例展示</a></li>
</ul>
</li>
<li><a href="">新闻中心</a>
<ul>
<li><a href="">案例展示</a></li>
<li><a href="">案例展示</a></li>
<li><a href="">案例展示</a></li>
</ul>
</li>
<li><a href="">最新活动</a>
<ul>
<li><a href="">案例展示</a></li>
<li><a href="">案例展示</a></li>
<li><a href="">案例展示</a></li>
</ul></li>
<li><a href="">产品中心</a>
<ul>
<li><a href="">案例展示</a></li>
<li><a href="">案例展示</a></li>
<li><a href="">案例展示</a></li>
</ul></li>
<li><a href="">技术文章</a>
<ul>
<li><a href="">案例展示</a></li>
<li><a href="">案例展示</a></li>
<li><a href="">案例展示</a></li>
</ul>
</li>
<li class="last"><a href="">关于我们</a>
<ul>
<li><a href="">案例展示</a></li>
<li><a href="">案例展示</a></li>
<li><a href="">案例展示</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html> 运行效果：
第72天：jQuery实现下拉菜单的更多相关文章
- jQuery水平下拉菜单实现
<!DOCTYPE html> <html> <head> <title>jQuery水平下拉菜单实现</title> ...
- jquery 实现下拉菜单
Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js 版本不限 : 接下来把=================== ...
- jquery带下拉菜单和焦点图
jQuery,下拉菜单,二级菜单,索引按钮,焦点图代码,jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码. JQuery特效代码来源:http://www.huiy ...
- jQuery美化下拉菜单插件dropkick
dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...
- JQuery纵向下拉菜单实现心得
jquery库给我们带来了许多便利,不愧是轻量级的DOM框架,在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍,期待各位小伙伴的指导.使用jquery实 ...
- jQuery EasyUI 下拉菜单获取日期，最高年份为当前年份，最低年份为当前年份向前推10年
http://blog.csdn.net/wangjingjing1014/article/details/16885341 <head><meta http-equiv=" ...
- jquery设置下拉菜单
jQuery代码 1,引用jQuery库 2,show方法 3,hide方法 <script type="text/javascript"> $function(){ ...
- jquery多级下拉菜单
var menu = new Click('#menu',{target:'p',parent:'li',contr:'ul',way:0}); /* 参数说明: target : 点击事件发生在该元 ...
- jquery实现下拉菜单
需要实现的效果如图: <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...
随机推荐
- Nginx初体验(一):nginx介绍
今天我们来介绍一下Nginx. Nginx是一款轻量级的Web服务器/反向代理服务器以及电子邮件(IMAP/POP3)代理服务器 特点: 反向代理,负载均衡,动静分离 首先我们来介绍一下正向代理服务器 ...
- ORB-SLAM（十）LoopClosing Sim3求解
主要参考这篇论文 Horn B K P. Closed-form solution of absolute orientation using unit quaternions[J]. JOSA A, ...
- PHP中array_reduce()使用
array_reduce — 用回调函数迭代地将数组简化为单一的值 给定一个数组: $ar = array(1,2,3,4,5); 如果要求得这个数组中各个元素之和. 方法一. 很自然的用foreac ...
- 从细节处谈Android冷启动优化
本文来自网易云社区 Android APP冷启动优化,对于Android开发同学而言可能是个老生常谈的技优了. 之所以花时间写一篇冷启动优化的文章: 我想从另外一个角度来说冷启动优化,如题所述,从细节 ...
- Oracle锁表处理
最近系统连续出现好几次锁表,昨晚又发生一次锁表,11点钟跑到客户现场,进过跟踪发现导致这次锁表的机器和上一次是同一台,花了近半小时解锁.之后到科室找到那台机器看看情况,发现那台机器速度超慢,保存一份病 ...
- unity3d 角色头顶信息3D&2D遮挡解决方案（二）
在阅读本文之前请先阅读上一篇文章:http://www.cnblogs.com/shenggege/p/4179012.html 本来一篇文章就可以说完了,但是上次只是实现了已知的一些功能 后来在实际 ...
- 「日常训练」Battle Over Cities - Hard Version（PAT-TOP-1001）
题意与分析 题意真的很简单,实在不想讲了,简单说下做法吧. 枚举删除每个点,然后求最小生成树,如果这个路已经存在那么边权就是0,否则按照原来的处理,之后求花费,然后判整个图是否联通(并查集有几个roo ...
- Java开发工程师(Web方向) - 04.Spring框架 - 第1章.Spring概述
第1章.Spring概述 Spring概述 The Spring Framework is a lightweight solution and a potential one-stop-shop f ...
- CSP201709-1：打酱油
引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...
- 浙江天搜科技落棋人工智能，加速AI产业布局
8月31日,2018年IFA大展在德国柏林正式开幕.IFA是全球三大消费电子展之一,在世界范围内久负盛名,被誉为“未来科技风向标”.在这个万众瞩目的展会上,号称“给智能世界铺上云的跑道,装上智能发动机 ...