第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 ...
随机推荐
- WinSCP与Putty远程连接linux
1. 有时putty连接不上,可能是linux机器上的telnet服务未开,把蓝线上的√去掉. 2. ctrl + p 打开putty窗口: 3. putty如果显示乱码,右键 putty窗口,选择 ...
- MongoDB入门---聚合操作&管道操作符&索引的使用
经过前段时间的学习呢,我们对MongoDB有了一个大概的了解,接下来就要开始使用稍稍深入一点的东西了,首先呢,就是MongoDB中的聚合函数,跟mysql中的count等函数差不多.话不多说哈,我们先 ...
- Chrome浏览器保存微信公众号文章中的图片
用chrome浏览器打开微信公众号文章中时,另存为图片时保存的是640.webp,不是图片本身,用IE则没有此问题.大部分chrome插件也无法保存图片. 经过多番尝试,找到一款插件可以批量保存微信公 ...
- Java基础——语法基础
一.标识符 1.不能使用数字开头 2.不能使用关键字 (更多命名规范,参见基础加强随笔) 二.数据类型 主要分为四种: 整形: byte 1字节8位 范围 -128~127 short 2 ...
- 从官网下载centos
今天想从官网下载6.5版本的CentOS,结果找了好一会儿才找到,赶紧记录下来,以备以后查询. 第一步在百度搜索centos,点击"Download CentOS",如下图所示. ...
- webpack loader 生成虚拟文件的方案
此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言 使用 webpack 的时候,难免需要写一些 loader,接着就会遇到一个很纠结的问题.该 loade ...
- hdu1050Moving Tables(贪心)
Moving Tables Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- hdu1517A Multiplication Game(巴什博弈变形)
A Multiplication Game Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Ot ...
- Linux命令应用大词典-第13章 用户和组群管理
13.1 useradd:创建用户账户 13.2 adduser:创建用户账户 13.3 lnewusers:创建用户账户 13.4 usermod:修改用户账户 13.5 userdel:删除用户账 ...
- CVPR2018 关于视频目标跟踪（Object Tracking）的论文简要分析与总结
本文转自:https://blog.csdn.net/weixin_40645129/article/details/81173088 CVPR2018已公布关于视频目标跟踪的论文简要分析与总结 一, ...