如何向响应式菜单导航栏添加样式？

问题描述 投票：0回答：1

我创建了一个导航栏，左侧有徽标，右侧有链接，另外两个突出显示的链接，我添加了一个图标菜单，该菜单出现在小屏幕上，但是，问题是当我打开菜单时，链接是并排的，我希望它保持列格式。

我尝试了很多代码，但都不起作用——什么也没有发生。另外，我想让突出显示的按钮也保留在菜单框中。顺便说一句，我是一个完全的初学者，所以使用 css 对我来说真的很难，有点令人困惑。请问有人可以救救我吗？

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/main/style.css">
    <link rel="stylesheet" href="/main/main.css">
    <!--fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/de42dd2adf.js" crossorigin="anonymous"></script>
    <title>Bryant Ecom</title>
</head>
<body>
    <!-- navegação -->
    <header>
        <nav id="navbar">
            <img src="/images/logo.png" alt="Bryant Ecom" id="logo">
                
                <div class="nav-links" id="navLinks">
                    <a href="index.html" class="active">Início</a>
                    <a href="link2.html">Link 2</a>
                    <a href="link3.html">Link 3</a>
                    <a href="link4.html">Link 4</a>
                    <a href="link5.html">Link 5</a>
                    <a href="link6.html">Link 6</a>
                </div>
                    
                <div class="highlight-links">
                    <a href="#" class="nav-btn">Login</a>
                    <a href="#" class="nav-btn">Contato</a>
                </div>

                <a href="javascript:void(0)" class="btn" onclick="myFunction()">
                    <i class="fa-solid fa-bars"></i>
                </a>
        </nav>
    </header>
    <script src="/main/script.js"></script>
</body>
</html>

:root{
    /* cores */
    --cor-principal: #186fdb;
    --cor-secundaria: #000000;
    --cor-adicional: #ffffff;
    /* fontes */
    --ff:"Manrope", sans-serif;
    --h1: bold 4rem/1em var(--ff);
    --h2: bold 3rem/1.2em var(--ff);
    --h3: bold 2.25rem/1.2em var(--ff);
    --h4: bold 1.5rem/1.6em var(--ff);
    --p: 1rem/1.6em var(--ff); 
    --fw: 600;
    --logo: 150px;
}

body {
    font-family: var(--ff);
    margin: 0;
    padding: 28px 8%;
    box-sizing: border-box;
}

header {
    width: 100%; /* ocupa toda a largura da tela  */
}

#logo {
    height: var(--logo);
    cursor: pointer;
}

/* navbar */

#navbar {
    width: 100%;
    display: flex; /* um elemento ao lado do outro */
    align-items: center;
    justify-content: space-between;
}

.nav-links {
    display: flex;
    gap: 80px;
}

.nav-links a {
    text-decoration: none;
    color: var(--cor-secundaria);
    font: var(--p);
    font-weight: var(--fw);
    position: relative;
}

.nav-links a::after{
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background-color: var(--cor-principal);
    left: 0;
    bottom: 0;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a.active::after {
    width: 100%;
}

.nav-links.active a {
    color: var(--cor-principal);
    border-bottom: 3px solid var(--cor-principal);
}

/* botões personalizados */
.highlight-links {  /* essa class altera o espaçamento apenas entre os dois botões */
    display: flex;
    gap: 10px;
    list-style: none;
}

.nav-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding: 10px 15px;
    font-weight: var(--fw);
    color: var(--cor-adicional);
    background-color: var(--cor-principal);
    transition: background-color .3s ease;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
} 

.nav-btn:hover {
    background-color: #468ce2;
}

/* menu mobile */
.btn {
    display: none;
    color: var(--cor-secundaria);
}

@media screen and (max-width: 1170px) {
    .nav-links, 
    #navbar .highlight-links {
        display: none;
        gap: 10px;
    }

    .btn {
        display: block;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }
    
}

@media screen and (max-width: 1170px) {
    .nav-links.responsive {position: relative;}
    .nav-links.responsive .btn {
        position: absolute;
        right: 0;
        top: 0;
    }

    .nav-links.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    
}

function myFunction() {
    var x = document.getElementById("navLinks");
    if (x.className === "nav-links") {
      x.className += "responsive";
    } else {
      x.className = "nav-links";
    }
  }

// hover
const navLinks = document.querySelectorAll('.nav-links a');
navLinks.forEach(link => {
  link.addEventListener('click', function () {
    navLinks.forEach(link => link.classList.remove('active'));
    this.classList.add('active');
  });
});
javascript html css navigation web-frontend
1个回答
0
投票

我无法提供完整的解决方案，因为我无法访问整个源代码，但是如果您制作“nav-links”div的显示属性，其中包含需要堆叠的项目，flex和设置flex-direction为column，即可固定。

@media screen and (max-width: 1170px) {
  
  .nav-links.responsive  {

    display:flex;
    flex-direction: column;

   }


    
}
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.