二级下拉菜单布局（纵向、横向）

一级菜单

在ul列表内建立li元素并清除默认样式
让所有li元素左浮动并清除浮动

DOM中文档结构如下：

<ul class="clearfix"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li>
</ul>

CSS中的样式如下：

.ul1{width:510px;margin:0 auto;
}
.ul1 li{list-style:none;width:100px;line-height:45px;font-size:25px;text-align:center;border:1px #000 solid;float:left;background:#00F;
}
.ul1 a{color:#FFF;text-decoration:none;
}

效果图如下：

二级下拉菜单（纵向）

在一级ul列表内建立一级li元素并清除默认样式
让所有一级li元素左浮动并清除浮动
在一级li内创建二级ul列表，二级ul列表内建立二级li元素并清除默认样式
设置二级ul列表属性display:none;让此元素不会被显示
在JS内动态设置一级li元素被点击时，让其下的二级ul列表属性切换为display:block;让此元素显示

DOM中文档结构如下：

<ul class="ul1 clearfix"><li><a href="#">一</a><ul class="clearfix"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li></ul>   </li><li><a href="#">二</a><ul class="clearfix"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li></ul></li><li><a href="#">三</a><ul class="clearfix"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li></ul></li><li><a href="#">四</a><ul class="clearfix"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li></ul></li><li><a href="#">五</a><ul class="clearfix"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li></ul></li>
</ul>

CSS中的样式如下：

ul,li,a{margin:0;padding:0;
}
.ul1{width:510px;margin:0 auto;
}
.ul1 li{list-style:none;width:100px;line-height:45px;font-size:25px;text-align:center;border:1px #000 solid;float:left;background:#00F;
}
.ul1 a{color:#FFF;text-decoration:none;
}
.ul1 ul{display:none;
}
.ul1 ul li{list-style:none;width:100px;line-height:30px;text-align:center;border:1px #000 solid;background:#0FF;
}

清除浮动样式：

.clearfix:before,.clearfix:after{display:table;content:"";
}
.clearfix:after{clear:both;/*在所有元素的父元素上加伪类*/
}
.clearfix{*zoom:1;
}

JS中的样式如下：

var oUl1 = document.getElementsByTagName("ul")[0];
var aLi1 = oUl1.children;
var aUl2 = oUl1.getElementsByTagName("ul");
for(var i=0;i<aLi1.length;i++){aLi1[i].onclick = function(){this.getElementsByTagName("ul")[0].style.display = "block";this.style.backgroundColor = "red";}
}
for(var i=0;i<aUl2.length;i++){var aLi2 = aUl2[i].getElementsByTagName("li");for(var j=0;j<aLi2.length;j++){aLi2[j].onmouseover = function(){this.getElementsByTagName("a")[0].style.color = "red";}aLi2[j].onmouseout = function(){this.getElementsByTagName("a")[0].style.color = "white";}}
}

效果图如下：

二级下拉菜单（横向）

在纵向的设计步骤基础上给二级li元素添加左浮动并清除浮动。

在CSS的样式中添加：

.ul1 ul{width:510px;
}
.ul1 ul li{float:left;
}

效果图如下：

二级下拉菜单布局（纵向、横向）相关推荐

vba下拉框实现记忆功能_VBA | 这个二级下拉菜单挺有趣！
我的目标:让中国的大学生走出校门的那一刻就已经具备这些office技能,让职场人士能高效使用office为其服务.支持我,也为自己加油! 前面章节我们讲过了表单控件和ActiveX控件的区别,知道了A ...
CSS3蓝色宽屏二级下拉菜单DEMO演示
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能
先上DEMO, 虽然丑,那是因为零级按钮的界面太丑了,图标也丑┑(￣Д ￣)┍ 这两个优化后会好很多,毕竟美观不是我的特长嘛 DEMO链接: http://download.csdn.net/deta ...
纯CSS3实现宽屏二级下拉菜单
今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...
动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
绑定dictionary 给定关键字不再字典中_VBA数组与字典解决方案第51讲：字典嵌套及二级下拉菜单的制作...
大家好,今日我们继续讲解VBA数组与字典解决方案,今日讲解第51讲:对字典嵌套的理解及二级下拉菜单的制作. 在讲字典的时候,我反复说明,字典看视非常简单,由于它具有直达性可以省略去我们大量的循环查找代 ...
绑定dictionary 给定关键字不再字典中_对字典嵌套的理解及二级下拉菜单的制作...
大家好,今日我们继续讲解VBA数组与字典解决方案,今日讲解第51讲:对字典嵌套的理解及二级下拉菜单的制作. 在讲字典的时候,我反复说明,字典看视非常简单,由于它具有直达性可以省略去我们大量的循环查找代 ...
html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果
本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的,当然还有更为复杂的二级菜单,不过先学会如何制作简单的,分享给大家供大家参考,具体内容如下代码如下: 下拉菜单 nav a{ text-de ...
android二级菜单实现,Android编程实现二级下拉菜单及快速搜索的方法
本文实例讲述了Android编程实现二级下拉菜单及快速搜索的方法.分享给大家供大家参考,具体如下: 一.我们要做什么? 上面有个搜索框,下面是一个二级下拉菜单. 输入查询内容,下面列表将显示查询结果. ...
jQuery和CSS3超酷二级下拉菜单插件
这是一款效果很酷又简单实用的 jQuery二级下拉菜单特效,该特效在点击触发按钮后,二级下拉菜单会向下滑动覆盖原来的主菜单,关闭后二级下拉菜单又向上滑动回去,二级菜单不占用多余的空间. 这个菜单插件是 ...

二级下拉菜单布局（纵向、横向）

二级下拉菜单布局（纵向、横向）相关推荐

最新文章

热门文章