h5学习笔记下拉菜单

最新推荐文章于 2025-06-14 16:59:34 发布

原创最新推荐文章于 2025-06-14 16:59:34 发布 · 3.6k 阅读

CC 4.0 BY-SA版权

本文分享了一个关于HTML5下拉菜单的设计案例，探讨了使用ul+li结构创建下拉菜单的方法，包括float和display属性在布局中的应用，以及如何利用jQuery的hover方法实现菜单的显示与隐藏。同时，推荐了一位老师的人工智能教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

这里写图片描述

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

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

 <ul>      <li>菜单一</li>      <li>菜单二         <div class="sub_item">              <ul>                 <li>案例一</li>                 <li>案例二</li>              </ul>          </div>      </li>      <li>菜单三</li>   <ul>
  1
2
3
4
5
6
7
8
9
10
11
12

我们将一个菜单横向化，有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>
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85