第72天:jQuery实现下拉菜单

简介: jQuery实现下拉菜单一、居中1、块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度2、行内块元素居中:给元素父级设置text-algin:center; 1 DOCTYPE html> 2 3 4 5 Title ...

jQuery实现下拉菜单

一、居中

1、块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度

2、行内块元素居中:给元素父级设置text-algin:center;

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10             list-style: none;
 11         }
 12         .nav{
 13             width: 100%;
 14             height: 40px;
 15             background: #0044DD;
 16             margin: 100px auto;
 17         }
 18         .nav .item{
 19            /* font-size: 0;*/
 20             width: 606px;
 21         margin:0 auto;
 22 
 23         }
 24         .nav .item li{
 25             font-size: 16px;
 26             width: 100px;
 27             height: 40px;
 28            /* display: inline-block;*/
 29             float: left;
 30             line-height:40px;
 31             text-align: center;
 32             border-right: 1px solid #CCCCCC;
 33             position: relative;
 34             margin-bottom: 0;
 35         }
 36 
 37         .nav li a{
 38             text-decoration: none;
 39             color: #ffffff;
 40         }
 41         .nav .item ul{
 42             position: absolute;
 43             left:0;
 44             top:40px;
 45             display: none;
 46         }
 47         .nav .item ul li{
 48             font-size: 16px;
 49             width: 100px;
 50             height: 40px;
 51             background-color: #2B93D2;
 52             border-top:1px solid #CCCCCC;
 53 
 54         }
 55     </style>
 56     <script src="jquery-1.11.1.min.js"></script>
 57     <script>
 58         $(document).ready(function(){
 59             /*$(".nav li").hover(function(){
 60                 $(this).children("ul").show();
 61             },function(){
 62                 $(this).children("ul").hide();
 63             });*/
 64             $(".item li").hover(function(){
 65                 $(this).children("ul").slideToggle();
 66             });
 67         });
 68     </script>
 69 </head>
 70 <body>
 71 <div class="nav">
 72     <ul class="item">
 73         <li><a href="">网站首页</a>
 74             <ul>
 75                 <li><a href="">案例展示</a></li>
 76                 <li><a href="">案例展示</a></li>
 77                 <li><a href="">案例展示</a></li>
 78             </ul>
 79         </li>
 80         <li><a href="">新闻中心</a>
 81             <ul>
 82                 <li><a href="">案例展示</a></li>
 83                 <li><a href="">案例展示</a></li>
 84                 <li><a href="">案例展示</a></li>
 85             </ul>
 86         </li>
 87         <li><a href="">最新活动</a>
 88             <ul>
 89                 <li><a href="">案例展示</a></li>
 90                 <li><a href="">案例展示</a></li>
 91                 <li><a href="">案例展示</a></li>
 92             </ul></li>
 93         <li><a href="">产品中心</a>
 94             <ul>
 95                 <li><a href="">案例展示</a></li>
 96                 <li><a href="">案例展示</a></li>
 97                 <li><a href="">案例展示</a></li>
 98             </ul></li>
 99         <li><a href="">技术文章</a>
100             <ul>
101                 <li><a href="">案例展示</a></li>
102                 <li><a href="">案例展示</a></li>
103                 <li><a href="">案例展示</a></li>
104             </ul>
105         </li>
106         <li class="last"><a href="">关于我们</a>
107             <ul>
108                 <li><a href="">案例展示</a></li>
109                 <li><a href="">案例展示</a></li>
110                 <li><a href="">案例展示</a></li>
111             </ul>
112         </li>
113     </ul>
114 </div>
115 </body>
116 </html>

运行效果:

 

相关文章
|
9月前
|
JavaScript
jQuery 下拉菜单案例(透明+children+this)
jQuery 下拉菜单案例(透明+children+this)
47 0
|
29天前
|
JavaScript 前端开发
jquery实现二级导航下拉菜单效果实例
jquery实现二级导航下拉菜单效果实例
36 0
|
9月前
|
JavaScript
jQuery 下拉菜单 添加动画
jQuery 下拉菜单 添加动画
57 0
|
JavaScript 前端开发
jQuery练习——下拉菜单
当我们在做导航栏、少量数据表格、层级列表时,使用无序列表ul、li可以实现想要的效果。这里我们先用无序列表ul、li完成页面结构,为每一个元素添加a标签,即超链接。
144 0
|
JavaScript
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
120 0
|
JavaScript 前端开发 CDN
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
249 0
HTML + jQuery 实现轮播图
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
515 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
JavaScript 安全 Windows
js或jquery实现页面打印可局部打印
js或jquery实现页面打印可局部打印
232 0
|
JavaScript
使用jquery中实现按回车触发按钮事件和点击提交按钮触发的是一个事件
使用jquery中实现按回车触发按钮事件和点击提交按钮触发的是一个事件
111 0
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
240 0
【jquery ajax】实现文件上传提交