[英]How to change navigation bar to a hamburger menu in mobile view using HTML and CSS?
如何使用 CSS 和 HTML 中的媒体查询将桌面网页中的导航栏更改为移动网页中的汉堡菜单。
在此先感谢您的帮助。
Media Query部分应该怎么做?
这是桌面网页代码:
HTML
<div id="menu">
<a href="#" id="logo">Hello</a>
<ul>
<li id="list_item"><a class="active" href="index.html">About</a></li>
<li id="list_item"><a href="#skills">Skills</a></li>
<li id="list_item"><a href="#education">Education</a></li>
<li id="list_item"><a href="#contact">Contact</a></li>
<li id="list_item"><a href="Assets/Dream CV.pdf" target="_blank">Download CV</a></li>
<li id="list_item"><a href="#"><i class="fa-solid fa-ellipsis-vertical"></i></a></li>
</ul>
</div>
CSS
#menu{
width: 75%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 999;
background: #FFFFFF;
position: fixed;
top: 0px;
box-shadow: 0 1px 3px 0 rgba(78, 77, 77, 0.6)
}
#logo{
text-decoration: none;
font-weight: 700;
font-size: 42px;
color: #2E2E2E;
padding: 0px 30px;
font-family: 'Libre Barcode 128 Text', cursive;
}
#menu ul{
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px 20px;
}
#list_item{
padding: 0px 15px;
position: relative;
}
是这样的:
/* Default styles for desktop */
#menu {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Media query for screens smaller than 600px */
@media screen and (max-width: 600px) {
/* Change the display to block for the menu */
#menu {
display: block;
}
/* Hide the menu items */
#menu ul {
display: none;
}
/* Add a hamburger icon */
#menu #hamburger {
display: block;
cursor: pointer;
}
}
此媒体查询将针对小于 600px 的屏幕(您可以根据自己的喜好调整此值),并将菜单的显示更改为块状、隐藏菜单项并添加汉堡图标。
对于汉堡图标,您可以使用 HTML 标签和 CSS class 来设置样式。
<i class="fa-solid fa-ellipsis-vertical"></i>
/* Hamburger icon */
.fa-ellipsis-vertical{
display: none;
font-size: 30px;
color: #2E2E2E;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.