实现简洁漂亮二级菜单的2个实例

[复制链接]
查看5761 | 回复37 | 2020-7-23 02:10:09 | 显示全部楼层 |阅读模式
提示您:未获得智伍应用正式版的授权,部分功能受到影响!



尊敬的用户,您好!!


非常感谢您能安装智伍应用旗下的产品,为了产品的可持续发展和升级,云采集已经开始按天收费,建议购买200天,免费赠送400天,一共600天,平均每天仅需1.67元。


向用户收费是为了给用户更可靠的保障和服务,所收取的费用主要用于产品的正常运作、不断研发和改进,希望各位用户能够理解和支持。



购买正式版授权请打开下面的网址自助购买:
www.zhiwu55.com/authorization/buy_end_time.php?hzw_appid=45CF43DA3D233827A02491D171C0BC4A



购买之后,自动开通正式版授权,新采集的内容不会再出现未购买授权的提示信息,同时智伍应用旗下所有含云采集功能的产品,都无需再次购买云采集的正式版授权,即云采集的授权可以在智伍应用的各个产品那里通用!


如果您已经购买了正式版,还是会出现未购买授权的提示,或者有其它问题,请联系智伍应用官方在线客服QQ/微信:2085244671




在程序开发中,经常用到二级菜单,这里给大家介绍2种:①实现纵向下拉二级菜单实例,②实现横向下拉二级菜单实例。
1、实现纵向下拉二级菜单实例

纵向下拉二级菜单如下图所示:
NV1S1dw63U662qIn.jpg 实现纵向下拉二级菜单实例效果图

具体代码实现如下(主要代码有参考注释):
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>二级纵向下拉菜单</title>
<style type="text/css">
*{ margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.menuStyle
{
border:1px solid #ccc;
border-right:none;
overflow:hidden;
float:left;
margin:10px 0 0 300px;
}
.menuStyle ul li { float:left;}
.menuStyle ul li a
{
width:120px;
height:40px;
text-align:center;
line-height:40px;
display:block;
border-right:1px solid #ccc;
background:#eee; color:#666;
}
.menuStyle ul li a:hover{ color:#f00; }
/* display:none;控制二级菜单初始不显示 */
.menuStyle ul li ul { position:absolute; display:none;}
.menuStyle ul li ul li { float:none;}
.menuStyle ul li ul li a
{
border-right:none;
border-top:1px dotted #ccc;
background:#f5f5f5;
}
/* display:block;控制二级菜单在鼠标移到菜单项上时显示二级菜单 */
.menuStyle ul li:hover ul{ display:block; }
</style>
</head>
<body>
<div class="menuStyle">
<ul>
<!-- 一级菜单 -->
<li><a href="#">首页</a></li>
<!-- 二级菜单 -->
<li>
<a href="#">数码产品</a>
<ul>
<li><a href="#">苹果</a></li>
<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>
<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>
<li><a href="#">别克</a></li>
</ul>
</li>
<li><a href="#">游戏产品</a></li>
<li><a href="#">节能产品</a></li>
<li><a href="#">快消产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
2、实现横向下拉二级菜单实例

横向下拉二级菜单如下图所示:
tI6MbBj6wseI1Z6A.jpg 实现横向下拉二级菜单实例效果图

具体代码实现如下(主要代码有参考注释):
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>二级横向下拉菜单</title>
<style type="text/css">
*{ margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.menuStyle
{
border:1px solid #ccc;
border-right:none;
overflow:hidden;
float:left;
margin:10px 0 0 300px;
}
.menuStyle ul li { float:left;}
.menuStyle ul li a
{
width:120px;
height:40px;
text-align:center;
line-height:40px;
display:block;
border-right:1px solid #ccc;
background:#eee; color:#666;
}
.menuStyle ul li a:hover{ color:#f00; }
/* display:none;控制二级菜单初始不显示 */
.menuStyle ul li ul
{
/* position:absolute;控制二级菜单横向显示,如没有此句或写作float:left;都不能使二级菜单横向显示 */
position:absolute;
display:none;
}
.menuStyle ul li ul li
{
/* float:none;控制二级菜单纵向显示;
float:left;控制二级菜单横向显示 */
float:left;
border:1px solid #ccc;
border-right:none;
}
.menuStyle ul li ul li a
{
border-right:none;
border-top:1px dotted #ccc;
background:#f5f5f5;
}
/* display:block;控制二级菜单在鼠标移到菜单项上时显示二级菜单 */
.menuStyle ul li:hover ul{ display:block; }
</style>
</head>
<body>
<div class="menuStyle">
<ul>
<!-- 一级菜单 -->
<li><a href="#">首页</a></li>
<!-- 二级菜单 -->
<li>
<a href="#">数码产品</a>
<ul>
<li><a href="#">苹果</a></li>
<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>
<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>
<li><a href="#">别克</a></li>
</ul>
</li>
<li><a href="#">游戏产品</a></li>
<li><a href="#">节能产品</a></li>
<li><a href="#">快消产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
看完代码实现后,大家是不是觉得比较简单呀,赶快来DIY吧。
回复

使用道具 举报

网络共享吧 | 2020-7-23 02:39:54 | 显示全部楼层
转发了
回复

使用道具 举报

网络共享吧 | 2020-7-23 03:10:24 | 显示全部楼层
转发了
回复

使用道具 举报

33u50l14l6 | 2020-7-24 00:43:05 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

6etppj702y | 2020-7-24 20:49:23 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

dr88k1699x | 2020-7-25 16:54:16 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

2j1083n3cq | 2020-7-26 17:55:25 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

qga9ce4qek | 2020-7-27 04:18:54 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

02o54720cc | 2020-7-29 15:09:13 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

3r3s7o5d6a | 2020-7-30 06:00:06 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则