下拉菜单栏制作心得

下拉菜单栏制作心得

这次主要是制作下拉式菜单栏，做完之后我的理解是，主体部分运用ul无序列表进行布局，在需要弹出下拉页面的地方进行一个li-ul的嵌套列表，在通过css进行细节上的修改变化，难点我觉得主要是在css选择器的目标选定上有一个ul-li-ul-li的嵌套选择，然后就是一大堆的嵌套选择，其他感觉就还好。

一.主题部分

emmmm，主体部分倒不是特别复杂

<nav id="navbar">
	    <ul>
	        <li><a href="#">Home</a></li>
	        <li><a href="#">About</a></li>
	        <li>Services <i class="fas fa-angle-down"></i>
	            <ul>
	                <li><a href="#">Web Development</a></li>
	                <li><a href="#">Website Design</a></li>
	                <li><a href="#">Mobile Development</a></li>
	                <li><a href="#">SEO</a></li>
	            </ul>
	        </li>
	        <li>Blog <i class="fas fa-angle-down"></i>
	            <ul>
	                <li><a href="#">HTML</a> <span>22 Posts</span></li>
	                <li><a href="#">CSS</a> <span>16 Posts</span></li>
	                <li><a href="#">JavaScript</a> <span>10 Posts</span></li>
	                <li><a href="#">Python</a> <span>13 Posts</span></li>
	                <li><a href="#">PHP</a> <span>10 Posts</span></li>
	                <li><a href="#">Design</a> <span>21 Posts</span></li>
	            </ul>
	        </li>
	        <li><a href="#">Contact</a></li>
	    </ul>
	</nav>
	<header id="showcase">
	    <h1>Welcome</h1>
	</header>

效果是这样的

这样主题的框架就出来了，通过图片结果，我们能很明显的看到，这是一个ul无序列表的嵌套结构。

二.css部分的设计

首先我觉得和上一次滑动手风琴一样的一点就是下拉框里面显示的内容首先运用display：none，将其影藏起来，然后通过伪类的设置再将其显示出来

#navbar ul li ul{
    display: none;
}

然后

#navbar ul li:hover ul{
    display: block;
    position: absolute;
    left: 0;
    width: 200px;
    margin-top: 1rem;
}

#navbar ul li:hover ul li{
    display: block;
    background: #e7e7e7;
}
#navbar ul li:hover ul li a{
    color: #333;
}
#navbar ul li:hover ul li:hover{
    background: #e0e0e0;
    color: inherit;
}

#navbar ul li:hover ul li span{
    float: right;
    color: #fff;
    background: var(--primary-color);
    padding: 0.2rem 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    border-radius: 5px;
}
#navbar ul li:hover ul li:hover span{
    background: var(--secondary-color);
}

然后这里的var是提前设置好的渲染颜色（虽然我还没搞清楚为什么要这么做）

:root{
    --primary-color:coral;
    --secondary-color:chocolate;
}

预处理的颜色代码

最后是响应式的设置

@media(max-width: 600px) {
    #navbar ul li{
        display: block;
    }
    
    #navbar ul li:hover ul{
        width: 100%;
        position: relative;
        
    }

这样就结束了
效果图

有时努力学习的一天！