第72天：jQuery实现下拉菜单

时间：2021-08-09 17:41:55

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实现下拉菜单

第72天：jQuery实现下拉菜单的更多相关文章

  1. jQuery水平下拉菜单实现

    <!DOCTYPE html> <html>    <head>       <title>jQuery水平下拉菜单实现</title>   ...

  2. jquery 实现下拉菜单

    Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js  版本不限 : 接下来把=================== ...

  3. jquery带下拉菜单和焦点图

    jQuery,下拉菜单,二级菜单,索引按钮,焦点图代码,jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码. JQuery特效代码来源:http://www.huiy ...

  4. jQuery美化下拉菜单插件dropkick

    dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...

  5. JQuery纵向下拉菜单实现心得

    jquery库给我们带来了许多便利,不愧是轻量级的DOM框架,在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍,期待各位小伙伴的指导.使用jquery实 ...

  6. jQuery EasyUI 下拉菜单获取日期，最高年份为当前年份，最低年份为当前年份向前推10年

    http://blog.csdn.net/wangjingjing1014/article/details/16885341 <head><meta http-equiv=&quot ...

  7. jquery设置下拉菜单

    jQuery代码 1,引用jQuery库 2,show方法 3,hide方法 <script type="text/javascript"> $function(){ ...

  8. jquery多级下拉菜单

    var menu = new Click('#menu',{target:'p',parent:'li',contr:'ul',way:0}); /* 参数说明: target : 点击事件发生在该元 ...

  9. jquery实现下拉菜单

    需要实现的效果如图: <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

随机推荐

  1. command shell 的知识整理

    cmd 也是shell  windowns的外壳一种. 查看文件和文件夹 dir mkdir *** 创建文件夹 rd *** 删除文件夹(应该有参数的,递归之类的)CTR+C 终止命令 cd> ...

  2. DBA&lowbar;Oracle DBA常用SQL汇总（概念）

    2014-06-20 Created By BaoXinjian

  3. C&num;程序设计基础——转义字符

    \’ 单引号 \” 双引号 \\ 反斜杠 \0 空字符 \a 感叹号 \b 退格 \f 换页 \n 换行 \r 回车 \t 水平Tab \v 垂直Tab

  4. AJAX上传文件

    function up_files() { var fileSelect = document.getElementById('file-select'); var files = fileSelec ...

  5. LINUX编程学习笔记&lpar;十三&rpar; 遍历目录的两种方法

    1 默认情况下  实际用户和有效用户是一样的 实际用户:执行用户   有效用户:权限用户 getuid()  实际用户 geteuid() 有效用户 chmod u+s 之后 ,其他人执行文件时,实际 ...

  6. TTL转MIPI DSI芯片方案TC358778XBG

    型号:TC358778XBG功能:TTL转MIPI DSI通信方式:IIC分辨率:1920*1080电源:3.3/1.8/1.2封装形式:BGA80深圳长期现货 ,提供技术支持,样品申请及规格书请联系 ...

  7. 玲珑杯&num;2&period;5 A-B

    这个题解错了网上还没有题解 囧 = (i%2)? 1 : -1 = - * * *= m #include<bits/stdc++.h> using namespace std; type ...

  8. HTML5 拖放实例

    <!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>菜鸟教 ...

  9. jq常用功能操作

    //表示所有选中的商品 var $goods=$(".goods:checked"); var arr=[]; for(i=0;i<$goods.length;i++){ a ...

  10. BZOJ4018&colon; 小Q的幻想之乡

    Description 背景 有一天,小Q梦见自己来到了理想国的幻想之乡. 描述 有一天,小Q梦见自己来到了理想国的幻想之乡.幻想乡有无穷户居民,第i个家庭住在编号为i的房屋里,编号从1开始,到正无穷 ...

相关文章