h5学习笔记：下拉菜单

来源：互联网发布：朋友圈图片制作软件编辑：程序博客网时间：2024/06/06 13:05

这里写图片描述

鼠标经过菜单的时候，下拉菜单形成起来。这个案例中，有一些比较有趣的事情。

首先要了解这种菜单设计结构。我们知道ul+li经常组合列表，这种列表既有纵向，也有横向。列表中的li元素，再包一个ul+li的组合元素。这样一个列表下拉菜单结构就变得很清晰了。

 <ul>      <li>菜单一</li>      <li>菜单二         <div class="sub_item">              <ul>                 <li>案例一</li>                 <li>案例二</li>              </ul>          </div>      </li>      <li>菜单三</li>   <ul>

我们将一个菜单横向化，有float：left的做法，配置边框间隔可以做出这种相间的效果。其次使用display: inline-block;内联块也可以快速横向布局起来。但使用内联块有一些奇怪的事情发生。当浮动菜单的时候就出现一些诡异的事情。

改用float ：left则没事情。
默认情况下，二级菜单列表是隐藏的，显示方式为：display:none。隐藏状态。

浮动方式使用jq的hover方法，当浮动的时候显示，不浮动的时候则隐藏。

下面一起看看css和jq的设计。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>下拉菜单</title>    </head>    <style type="text/css">        ul{margin: 0; padding: 0;}        ul{list-style: none;}        .menu >ul> li{            background-color: black;            float: left;            width: 80px;            height: 40px;               text-align: center;            line-height: 40px;            color: white;            margin-right: 10px;        }        .menu >ul> li:hover{            background-color: red;        }        .sub_menu{            display: none;        }        .sub_menu >li{            background-color: black;        }        .sub_menu >li:hover{            background-color: blue;        }    </style>    <body>          <div class="main">            <div class="menu">                <ul>                    <li>首页</li>                    <li>视频                        <div>                           <ul class="sub_menu">                              <li>案例一</li>                              <li>案例二</li>                           </ul>                       </div>                    </li>                    <li>教学</li>                    <li>关于                      <div>                           <ul class="sub_menu">                              <li>招聘信息</li>                              <li>公司简介</li>                           </ul>                       </div>                    </li>                    <li>联系我们</li>                </ul>            </div>        </div>        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>        <script type="text/javascript">          $(function(){             $(".menu >ul >li").hover(function(){                $(this).find(".sub_menu").show();             },function(){                $(this).find(".sub_menu").hide();             });           });        </script>    </body></html>

0 0

h5学习笔记： 下拉菜单

h5学习笔记：下拉菜单