大家好,又见面了,我是你们的朋友全栈君。
今天我们来练习一下二级菜单栏,说实话比较简单,但是自己一个人写的时候错误百出,逻辑混乱,于是乎网上找了几个案例,借鉴了一下思路,才整明白,鄙人确实不才,哈哈!
效果图附上:
首先:我已链接了外部样式重置,所以无需自己亲自写:
reset.css网上有很多,我用的是下面这个,免费分享给大家,永久有效哦!
链接:https://pan.baidu.com/s/1doPA17vy–QtSzUB8q9b8w
提取码:qq4o
HTML:代码:
<!-- 外部样式表reset.css -->
<link rel="stylesheet" href="reset.css">
<!-- 外部样式表二级菜单 -->
<link rel="stylesheet" href="style.css">
注意:以下我写的所有样式,必须要用reset.css外部样式表!!
1. 首先,我们来创建一个容器,用来放置整个导航栏:
HTML代码:
<div class="topmenu"></div>
CSS代码:
/* 设置整个容器宽高背景色 */
.topmenu {
width: 100%;
height: 50px;
background: lightgreen;
}
效果图:只有一个绿色的条哈!
2. 接下来我们要在.topmenu 容器中添加内容:
HTML代码:
<div class="topmenu">
<!-- nav 整个导航栏 -->
<ul class="nav">
<!-- 一级菜单 -->
<li class="nav-container">
<a href="https://blog.csdn.net/weixin_36732046">我的博客</a>
</li>
<!-- 一级菜单 w3school -->
<li class="nav-container">
<a href="https://www.w3school.com.cn/">W3school</a>
</li>
<!-- 一级菜单 菜鸟教程 -->
<li class="nav-container">
<a href="https://www.runoob.com/">菜鸟教程</a>
</li>
</ul>
</div>
CSS代码:
/* 一级菜单栏.nav-container设置 */
.topmenu .nav .nav-container {
float: left; /* 一级菜单设置左浮动,使其水平排列 */
background: lightgreen; /*给整个一级菜单设置背景色(二级菜单包括在一级菜单中)*/
text-align: center; /* 对齐方式为居中 */
width: 155px; /*设置宽度*/
border-right:solid 2px #fff; /*使用右边框分割*/
}
设置字体行高和颜色:
a {
line-height: 50px;
color: #fff;
}
3. 一级菜单栏写完啦,接下来写二级菜单栏,把二级菜单栏添加到一级的<li>下面:
附上完整的HTML代码:
<div class="topmenu">
<!-- nav 整个导航栏 -->
<ul class="nav">
<!-- 一级菜单 -->
<li class="nav-container">
<a href="https://blog.csdn.net/weixin_36732046">我的博客</a>
<!-- 二级菜单 -->
<ul class="nav-list">
<li>
<a href="https://blog.csdn.net/weixin_36732046/category_9560702.html">工具安装</a>
</li>
<li>
<a href="https://blog.csdn.net/weixin_36732046/category_8012920.html">问题解决</a>
</li>
<li>
<a href="https://blog.csdn.net/weixin_36732046/category_8527355.html">实战案例</a>
</li>
<li>
<a href="https://blog.csdn.net/weixin_36732046/category_8078929.html">Js函数</a>
</li>
</ul>
</li>
<li class="nav-container">
<!-- 一级菜单 w3school -->
<a href="https://www.w3school.com.cn/">W3school</a>
<!-- 二级菜单 -->
<ul class="nav-list">
<li>
<a href="https://www.w3school.com.cn/html/index.asp">HTML</a>
</li>
<li>
<a href="https://www.w3school.com.cn/html5/index.asp">HTML5</a>
</li>
<li>
<a href="https://www.w3school.com.cn/html5/index.asp">CSS</a>
</li>
<li>
<a href="https://www.w3school.com.cn/css3/index.asp">CSS3</a>
</li>
</ul>
</li>
<li class="nav-container">
<!-- 一级菜单 菜鸟教程 -->
<a href="https://www.runoob.com/">菜鸟教程</a>
<!-- 二级菜单 -->
<ul class="nav-list">
<li><a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li>
<li><a href="https://www.runoob.com/foundation/foundation-tutorial.html">Foundation5 教程</a></li>
<li><a href="https://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li>
<li><a href="https://www.runoob.com/angularjs/angularjs-tutorial.html">CSS3 教程</a></li>
<li><a href="https://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li>
</ul>
</li>
</ul> <!-- nav 整个导航栏结束 -->
</div>
效果图:
3. 我们完成的差不多了,现在只需要把二级菜单栏隐藏,然后让它点击对应的一级菜单栏的时候再出现就行了。
CSS代码:
/* 隐藏二级菜单 */
.topmenu .nav .nav-container .nav-list {
display: none;
}
/*点击一级菜单的时候显示二级菜单*/
.topmenu .nav .nav-container:hover .nav-list {
display: list-item;
}
/*点击时变色*/
.topmenu li:hover{
background: lightskyblue;
}
4. 好啦!已经全部做完啦! 网页背景是我自己添加的,为了美化视觉效果用!
CSS代码:
/* 网页背景图片 */
body {
background:url(http://attach.bbs.miui.com/forum/201202/18/090658g5shfjyixlhwjyyi.jpg);
}
效果图参考页面最顶部!!
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/130049.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...