我正在开发一个具有响应式顶部导航栏的网页,对于宽度小于 550px 的屏幕,会发生下图的效果。
我希望带有图像的轮播在展开时位于导航栏的链接列表下方,就像未展开时一样:
这是我的html代码:
<header>
<aside class="menu">
<section class="main-content menu-content">
<h1>
<a href="index.html">
<img class="logo" src="assets/img/logo.png" alt="logo">
</a>
</h1>
<div class="hamburguer">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<nav class="menu-nav">
<ul>
<li><a href="#init">Início</a></li>
<li><a href="#about">Sobre</a></li>
<li><a href="#services">Serviços</a></li>
<li>
<a href="https://www.instagram.com/goat.slts/" target="_blank" rel="noopener noreferrer">
<img src="./assets/img/instagram.svg" alt="instagram" id="instagram-logo">
</a>
</li>
</ul>
</nav>
</section>
</aside>
<script src="assets/js/menu.js"></script>
</header>
<main class="main">
<section id="init">
<div class="init">
<div class="carousel-container">
<button class="arrow-left carousel-control" aria-label="Previous image">
<img class="next-icon" src="./assets/img/next-icon.svg" alt="next-icon">
</button>
<button class="arrow-right carousel-control" aria-label="Next image">
<img class="next-icon" src="./assets/img/next-icon.svg" alt="next-icon">
</button>
<div class="gallery-wrapper">
<div class="gallery">
<div class="carousel-item carousel-current-item">
<img src="./assets/img/carousel-1.png" alt="carousel-1">
</div>
<div class="carousel-item">
<img src="./assets/img/carousel-2.png" alt="carousel-2">
</div>
<div class="carousel-item">
<img src="./assets/img/carousel-3.png" alt="carousel-3">
</div>
</div>
</div>
</div>
</div>
<script src="assets/js/carousel.js"></script>
</section>
<section id="about">
<div class="about">
</div>
</section>
<section id="services">
<div class="services">
</div>
</section>
</main>
这是导航栏和轮播 CSS:
.menu {
width: 100%;
position: fixed;
background: var(--primary-color-grey);
top: 0;
left: 0;
right: 0;
}
.menu-content {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0;
padding-bottom: 0;
}
.menu ul {
list-style: none;
display: flex;
align-items: center;
}
.menu ul li a {
display: flex;
height: var(--menu-height);
padding: 0 2rem;
font-size: 1.8rem;
color: white;
position: relative;
text-decoration: none;
align-items: center;
}
.menu ul li a:hover {
background: var(--primary-color);
}
#instagram-logo {
height: 2.8rem;
}
.logo {
height: var(--menu-height);
display: flex;
padding: 1rem;
}
.hamburguer {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 2.5rem;
height: 0.3rem;
margin: 0.5rem auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: white;
}
@media (max-width: 550px) {
.menu-nav {
position: fixed;
top: var(--menu-height);
right: 0;
flex-direction: column;
background: var(--primary-color-grey);
width: 100%;
text-align: center;
}
.menu-nav:not(.active) {
visibility: hidden;
opacity: 0;
}
.menu-nav.active {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
visibility: visible;
opacity: 1;
}
.menu ul {
display: block;
}
.menu ul li a {
justify-content: center;
}
.hamburguer {
display: block;
}
.hamburguer.active .bar:nth-child(2) {
opacity: 0;
}
.hamburguer.active .bar:nth-child(1) {
transform: translateY(0.8rem) rotate(45deg);
}
.hamburguer.active .bar:nth-child(3) {
transform: translateY(-0.8rem) rotate(-45deg);
}
}
.
.arrow-right, .arrow-left {
position: absolute;
top: 0;
left: auto;
right: 0;
bottom: 0;
border: none;
background-color: #0000;
opacity: 0.5;
}
.arrow-left {
top: 0;
left: 0;
right: auto;
bottom: 0;
transform: rotate(180deg);
}
.arrow-right:hover, .arrow-left:hover {
opacity: 1;
}
.next-icon {
width: 5vw;
cursor: pointer;
}
.carousel-container {
position: relative;
margin: 0 auto;
}
.gallery-wrapper {
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gallery-wrapper::-webkit-scrollbar {
display: none;
}
.gallery {
display: flex;
flex-flow: row nowrap;
}
.gallery img {
width: 100%;
height: auto;
display: flex;
}
.carousel-item {
display: flex;
width: 100%;
flex-shrink: 0;
object-fit: cover;
}
位置:绝对;位置:相对;需要组合以确保汉堡包图标相对于其包含元素定位,在本例中为 .menu-content。
.menu-content {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0;
padding-bottom: 0;
}
.hamburguer {
display: block;
content: '';
position: absolute;
right: 0;
top: 80px;
z-index: 2;
}
通过设置
top: 80px
;和 right: 0
;,您将汉堡包图标放置在距其包含元素 (.menu-content) 顶部 80 像素的位置,并与右边缘对齐。如果.bars
出现在错误的位置,请使用“右”和“上”进行调整。
最后设置
z-index: 2
;确保汉堡包图标出现在页面上其他元素的前面,包括轮播,通常使用默认的 z-index 定位。
我的建议是:始终首先创建移动设备
开始使用最小宽度,而不是使用最大宽度。我认为适应更大的屏幕比适应更小的屏幕容易得多。