一、纯CSS实现
实现下拉菜单需要用display,即改变display的block或none值。
先构建基本的HTML框架,
<div id="nav">
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">体育</a>
<ul class="item">
<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>
纯CSS实现,
#nav{ /*1*/
width: 600px;
height: 50px;
margin: 0 auto;
background-color: #e9e9e9;
color: #000;
}
#nav ul li{ /*2*/
width:100px;
text-align: center;
line-height: 50px;
float: left;
}
#nav ul li a:hover{ /*3*/
display:block;
background-color:#5c5c5c;
}
.item li{ /*4*/
background-color: #e9e9e9;
display:none;
}
#nav ul li:hover .item li{ /*5*/
display:block;
}
上述代码详解:
1、给整体标题(id="nav")设置样式,自适应居中。
2、标题下的每个一级列表设置样式,设置左浮动让其一排显示。
3、当鼠标滑至每个标题的一级列表上时显示背景色,将<a>标签设置成块元素才可以改变背景色。
4、所需要下拉的菜单为二级菜单,默认情况下保持不显示状态。
5、如下,
标题中每个列表在鼠标滑过时,只有class="item"的元素下的 li 会有显示。
在样式设置时,需要一些初始化设置,可以在CSS文档的头部写好,也可以单独写成一份文档 reset.css 先引入,也方便以后使用,保存该文档需要初始化就引入。
*{
margin: 0;
padding: 0;
list-style: none;
}
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
margin: 0;
padding: 0;
}
/** 重置列表元素 **/
ul,li, ol {
list-style: none;
}
/** 重置文本格式元素 **/
a,a:hover{
text-decoration: none;
}
/** 重置表单元素 **/
legend{ /* for ie6 */
color: #000;
}
fieldset, img /* 让链接里的 img 无边框 */
{
border: 0;
}
button, input, select, textarea{ /* 使得表单元素在 ie 下能继承字体大小 */
font-size: 100%;
}
/** 重置表格元素 **/
table{
border-collapse: collapse;
border-spacing: 0;
}
二、原生JS实现
先构建基本的HTML框架,
<div id="nav">
<ul>
<li><a href="#">新闻</a></li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">体育</a>
<ul>
<li><a href="#">乒乓球</a></li>
<li><a href="#">羽毛球</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">科技</a>
<ul>
<li><a href="#">VR</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>
</ul>
</div>
设置标题菜单的基本样式,同样将初始化的文档先引入,
#nav{
width:600px;
height:40px;
background-color:#eee;
margin:0 auto;
}
ul li{
float:left;
line-height:40px;
text-align:center;
width:100px;
}
a:hover{
display: block;
color:#F00;
background-color:#ccc;
}
ul li ul li{
float:none;
background-color:#eee;
margin:2px 0px;
}
ul li ul{
display:none;
}
JavaScript实现下拉菜单,
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
上述代码详解:
定义两个函数用于显示和隐藏下拉菜单。显示函数中,(隐藏函数同理)
1、函数参数为图中竖形标记的区域。
2、函数参数(li)下获取<ul> 标签,[ 0 ] 表示找第一个 < ul >,因为有可能该 li 元素下有多个 < ul >,并定义变量将获取的值赋给它。
3、将样式设置成可见的。
4、HTML中添加鼠标事件,this表示获取到元素的当前 li 元素。
三、jQuery实现
先构建基本的HTML框架,
<div id="nav">
<ul>
<li><a href="#">新闻</a></li>
<li class="select"><a href="#">体育</a>
<ul class="item">
<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>
设置标题菜单的基本样式,同样将初始化的文档先引入,
#nav{
width:600px;
height:40px;
background-color:#eee;
margin:0 auto;
}
ul li{
float:left;
line-height:40px;
text-align:center;
width:100px;
}
ul li:hover{
color:#F00;
background-color:#ccc;
cursor: pointer;
}
.item li{
background-color:#eee;
}
.item{
display:none;
}
jQuery实现下拉菜单,
$(document).ready(function(){
$('.select').hover(function() {
$(".item").css('display', 'block');
}, function() {
$(".item").css('display', 'none');
});
})
上述代码详解:
1、选中class="select" 元素设置它下面的class="item" CSS样式的显示、隐藏。
2、CSS中设置class="item"默认情况下为隐藏。
但存在一个问题尚未解决,
选中下拉的二级菜单时候,背景颜色应该还原的 “体育” 没有改变!
关注我吧
关注「前端一起学」公众号 ,让我们一起学前端,一起进步。