第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 ...
随机推荐
- （数据科学学习手札39）RNN与LSTM基础内容详解
一.简介 循环神经网络(recurrent neural network,RNN),是一类专门用于处理序列数据(时间序列.文本语句.语音等)的神经网络,尤其是可以处理可变长度的序列:在与传统的时间序列 ...
- Chip-seq peak annontation
Chip-seq peak annontation Chip-seq peak annontation PeRl narrowPeak/boardPeak narrowPeak/boardPeak 是 ...
- Solr第一讲——概述与入门
一.solr介绍 1.什么是solr Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务器.Solr可以独立运行在Jetty.Tomcat等这些Serv ...
- 从PRISM开始学WPF（七）MVVM（三）事件聚合器EventAggregator-更新至Prism7.1
原文:从PRISM开始学WPF(七)MVVM(三)事件聚合器EventAggregator-更新至Prism7.1 事件聚合器EventAggregator [7.1updated]除了app部分,没 ...
- 使用element-ui 的table 渲染数据遇到的问题
通常我们使用一个table 来渲染服务的返回来的数据时,数据结构一般都是按row 来返回的,并且表头也是固定的 但是如果接口返回的数据结构不是我们想要的,表头也不确定时,我们该如何解析数据,将数据进行 ...
- 并发任务管理器AsyncTaskManager
//-------------------------------------------------------------------------- // // Copyright (c) BUS ...
- android学习十 ActionBar
1.api level大于等于11 支持,或者使用兼容库,但兼容库的问题很多. 2.一个操作栏属于一个活动,并具有其生命周期 3.操作栏分3类:a.选项卡操作栏,b.列表操作栏,c.标准操作栏 4.获 ...
- 使用union 外加count
explain extended and name='aaa')) t; +----+--------------+------------+-------+---------------+----- ...
- JavaWeb项目生成PDF文件添加水印图片并导出
一.前言 首先需要在Maven中添加相应的jar包依赖,若项目没用到Maven,也可自行下载相应所需的jar包(itextpdf.jar 与 itext-asian.jar),如下图所示.点此下载 M ...
- 使用SpringBoot整合ssm项目
SpringBoot是什么? Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程. Spring Boot 现在已经成为Java ...