我想制作一个导航栏,但我无法为其编写正确的 CSS 样式。 如何制作徽标图像向左浮动、菜单内容向右浮动的导航栏。
我尝试了纯CSS,但没有用。
试试这个 - HTML 导航栏
<section>
<picture>
<source srcset="../assets/images/logos/my_logo/My_Logo1.png" type="image/png+xml" title="logo - Kaviya">
<img src="./My_Logo.svg" alt="" width="57" title="logo ">
</picture>
<div class="navIcon">
<img src="../assets/images/icons8-menu-128.png" alt="" width="50" id="menu">
</div>
<div class="navIcon">
<img src="../assets/images/icons8-close-64.png" alt="" width="50" id="menu_close">
</div>
<nav>
<dl id="header_navigation" >
<dd><a href="#home">Home</a></dd>
<dd><a href="#about">About</a></dd>
<dd><a href="#project">Project</a></dd>
<dd><a href="#assignment">Assignment</a></dd>
<dd><a href="gallery.html">Gallery</a></dd>
<dd><a href="#contact">Contact</a></dd>
</dl>
<div id="mobile_navigation">
<dl id="header_navigation_mobile" >
<dd><a href="#home">Home</a></dd>
<dd><a href="#about">About</a></dd>
<dd><a href="#project">Project</a></dd>
<dd><a href="#assignment">Assignment</a></dd>
<dd><a href="gallery.html">Gallery</a></dd>
<dd><a href="#contact">Contact</a></dd>
</dl>
</div>
</nav>
</section>
实现你的CSS -
#header_navigation>dd{
display: inline;
margin: 1vw;
}
#mobile_navigation {
position: absolute;
right: 0;
opacity: 0;
transform: translateX(20px);
width: 20vw;
height: 100vh;
background: #F3FFF1;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
transition: all 0.5s ease;
display: none;
}
#mobile_navigation > dl > dd > a {
text-decoration: none;
color: black;
font-weight: bold;
position: relative;
font-family: 'Oswald', sans-serif;
}
#mobile_navigation > dl > dd{
display: grid;
margin-top: 7vh;
}
header{
position: sticky;
top: 0;
background: #ffffff;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
padding: 1vh;
z-index: 99999;
}
.navIcon{
display: inline;
position: absolute;
right: 5vw;
}
nav > dl > dd > a {
text-decoration: none;
color: black;
font-weight: bold;
position: relative;
font-family: 'Oswald', sans-serif;
}
#menu_close,#menu{
display: none;
}
@media all and (min-width: 1024px) {
#menu_close,#menu,#mobile_navigation{
display: none !important;
}
header > section > nav >#header_navigation {
position: absolute;
right: 10%;
top: 15%;
}
header > section > picture{
position: relative;
left: 10%;
}
#header_navigation > dd > a:hover::after {
background-color: green;
width: 100%;
}
#header_navigation > dd > a:after {
content: '';
position: absolute;
width: 0;
height: 3px;
background-color: transparent;
bottom: -8px;
left: 0;
transition: width 0.3s ease;
}
}
@media all and (max-width: 1000px ){
nav>#header_navigation{
display: none;
}
#menu{
display: block;
transition: all 0.5s ease;
}
#menu_close{
transition: all 0.5s ease;
}
#mobile_navigation {
width: 30vw;
z-index: 1111;
}
}
并实现这个标题导航Js文件..
$("#menu").on("click", () => {
$("#menu").css("transform", "rotate(180deg)");
$("#menu_close").css("transform", "rotate(180deg)");
$("#mobile_navigation").css("display", "block");
// Apply the transitioned styles
setTimeout(() => {
$("#menu").css("display", "none");
$("#menu_close").css("display", "block");
$("#mobile_navigation").css("opacity", "1");
$("#mobile_navigation").css("transform", "translateX(0)");
}, 300); // Add a slight delay to allow the initial styles to take effect
});
$("#menu_close").on("click", () => {
$("#menu_close").css("transform", "rotate(-180deg)");
$("#menu").css("transform", "rotate(-180deg)");
// Apply the transitioned styles
setTimeout(() => {
$("#menu_close").css("display", "none");
$("#menu").css("display", "block");
// $("#mobile_navigation").css("display", "none");
$("#mobile_navigation").css("opacity", "0");
$("#mobile_navigation").css("transform", "translateX(100%)");
}, 300); // Add a slight delay to allow the initial styles to take effect
});
但我建议你使用 bootstrap 来完成。这是创建导航栏的非常简单的方法