利用hover实现伸缩导航栏
在很多网站页面,我们会看到很多地方都用到了伸缩式的导航栏。使得界面更加美观,用户更加方便的找到自己喜欢的板块。那么这些是如何实现的呢?
下面呢是编者最近刚刚学到的一种方式,作为一名小白呢,希望大家共同学习,一起加油!
不多说直接上代码,如若有误还请大家多多包涵,进行指正!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>menu</title>
<style type="text/css">
*{
padding: 0px;
border: 0xp;
margin: 0px;
}
.form1{
border: 1px solid red;
text-align: center;
}
#menu>li{
margin: 0px auto;
background-color: tan;
margin-top: 20px;
border:.5px solid turquoise;
width: 200px;
border-radius: 100%;
}
li{
list-style: none;
/* 取消所有列表的前面的小圆点 */
}
.boys{
display: none;
/* 实现将每个块下面的列表隐藏 */
text-indent: 20px;
/* 实现列表行首行缩进 */
}
#menu>li:hover .boys{
display: block;
/* 当鼠标移动到#menu下面的li标签上面时候显示隐藏的列表 */
}
</style>
</head>
<body>
<div class="form1">
<ul id='menu'>
<li><a href='#'>A班</a>
<ul class='boys'>
<li>高嘉朗</li>
<li>陆思恒</li>
<li>刘也</li>
<li>丰楚轩</li>
<li>高嘉朗</li>
<li>陆思恒</li>
<li>刘也</li>
<li>丰楚轩</li>
</ul>
</li>
<li><a href="#">B班</a>
<ul class='boys'>
<li>贺俊雄</li>
<li>张颜齐</li>
<li>高嘉朗</li>
<li>陆思恒</li>
<li>刘也</li>
<li>丰楚轩</li>
</ul>
</li>
<li><a href='#'>C班</a>
<ul class='boys'>
<li>俞彬</li>
<li>高嘉朗</li>
<li>陆思恒</li>
<li>刘也</li>
<li>丰楚轩</li>
<li>四正</li>
</ul>
</li>
<li><a href='#'>F班</a>
<ul class='boys'>
<li>姚琛</li>
<li>高嘉朗</li>
<li>陆思恒</li>
<li>刘也</li>
<li>丰楚轩</li><li>高嘉朗</li>
<li>陆思恒</li>
<li>刘也</li>
<li>丰楚轩</li>
<li>朱微之</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
代码实现结果如下
当鼠标移动到文本时
参考这位小姐姐的
https://blog.csdn.net/weixin_44520259/article/details/90287426?utm_medium=distribute.pc_relevant.none-task-blog-2defaultBlogCommendFromBaidu~default-6.baidujs