当前位置： 文江博客话题详情

JavaScript Navbar不应响应，因为它应该是

发布于 2025-01-31 13:47:07 字数 5493 浏览 2 评论 0原文

我尝试使用CSS和JS自定义W3学校响应式Navbar。我想添加一个网页的徽标和标题，然后添加Navbar。当网页最大化时，它可以正常工作，但是当我使其较小时，navbar零件溢出，然后单击菜单时，菜单图标消失了，除非刷新，否则我无法返回原始表格 代码笔链接

function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className += " responsive";
      } else {
        x.className = "topnav";
      }
    }
 @media screen and (max-width: 600px) {
      .topnav a:not(:first-child) {
        display: none;
      }
      .topnav a.icon {
        float: right;
        display: block;
      }
    }
    
    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    
    @media screen and (max-width: 600px) {
      .topnav.responsive {
        position: relative;
      }
      .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
    }
    
    header {
      background-color: rgba(2, 13, 24, 1);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      display: flex;
      align-items: center;
      box-shadow: 0 0 25px 0 rgba(2, 13, 24, 1);
    }
    
    header * {
      display: inline;
    }
    
    img.logo {
      height: 45px;
      margin-left: 40px;
    }
    
    h6.title {
      padding: 20px;
      color: white;
      font-family: "Rubik", sans-serif;
      font-weight: 500;
      font-size: larger;
    }
    
    .topnav {
      background-color: rgba(2, 13, 24, 1);
      overflow: hidden;
    }
    
    /* Style the links inside the navigation bar */
    
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-family: "Rubik", sans-serif;
      font-weight: 400;
      font-size: medium;
    }
    
    /* Change the color of links on hover */
    
    .topnav a:hover {
      background-color: rgba(35, 58, 80, 1);
      color: white;
    }
    
    /* Add an active class to highlight the current page */
    
    .topnav a.active {
      color: rgba(219, 255, 2, 1);
    }
    
    /* Hide the link that should open and close the topnav on small screens */
    
    .topnav .icon {
      display: none;
    }
    
    body {
      margin: 0px;
      background: linear-gradient(
            to bottom,
            rgba(30, 59, 112, 0.6),
            rgba(2, 13, 24, 0.6)
          )
          no-repeat center center fixed,
        url("../Images/Background.jpg");
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      -o-background-size: cover;
    }
    
    main {
      color: white;
    }
 <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="..\Css\style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" <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=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
      <title>Document</title>
    </head>
    
    <body>
      <header>
        <img src="https://www.freeiconspng.com/uploads/cinema-movie-theatre-icon-2.png" class="logo">
        <h6 class="title">MoviesHub</h6>
        <div class="topnav" id="myTopnav">
          <ul>
            <li><a href="#home" class="active">Home</a></li>
            <li><a href="#news">Movies</a></li>
            <li><a href="#contact">Celebrities</a></li>
            <li> <a href="#about">About</a></li>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
              <i class="fa fa-bars"></i>
            </a>
          </ul>
        </div>
      </header>
      <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consequat libero eget magna commodo, quis pharetra tellus pretium. Sed viverra ante in mauris finibus dapibus. Maecenas congue dapibus nulla, eu gravida orci consequat eu. Phasellus nec nunc malesuada, aliquam massa ac, accumsan metus. Fusce sed dignissim lectus. Nunc elit tellus, sollicitudin ac accumsan ut, egestas et dui. Maecenas aliquam est a ligula scelerisque, in aliquam neque sodales. Nullam condimentum euismod dictum. Curabitur non ex elementum, pretium enim ut, ornare ipsum.</p>
      </main>
    </body>
    
    </html>

原文

I tried customizing w3 school responsive navbar using CSS and JS. I wanted to add a logo and a title of the web page and then the navbar. When the webpage is maximized it works fine but when I make it smaller then the navbar part overflows and when clicked to drop down the menu the menu icon vanishes and I cant return to the original form unless refreshed
code pen link

function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className += " responsive";
      } else {
        x.className = "topnav";
      }
    }
 @media screen and (max-width: 600px) {
      .topnav a:not(:first-child) {
        display: none;
      }
      .topnav a.icon {
        float: right;
        display: block;
      }
    }
    
    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    
    @media screen and (max-width: 600px) {
      .topnav.responsive {
        position: relative;
      }
      .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
    }
    
    header {
      background-color: rgba(2, 13, 24, 1);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      display: flex;
      align-items: center;
      box-shadow: 0 0 25px 0 rgba(2, 13, 24, 1);
    }
    
    header * {
      display: inline;
    }
    
    img.logo {
      height: 45px;
      margin-left: 40px;
    }
    
    h6.title {
      padding: 20px;
      color: white;
      font-family: "Rubik", sans-serif;
      font-weight: 500;
      font-size: larger;
    }
    
    .topnav {
      background-color: rgba(2, 13, 24, 1);
      overflow: hidden;
    }
    
    /* Style the links inside the navigation bar */
    
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-family: "Rubik", sans-serif;
      font-weight: 400;
      font-size: medium;
    }
    
    /* Change the color of links on hover */
    
    .topnav a:hover {
      background-color: rgba(35, 58, 80, 1);
      color: white;
    }
    
    /* Add an active class to highlight the current page */
    
    .topnav a.active {
      color: rgba(219, 255, 2, 1);
    }
    
    /* Hide the link that should open and close the topnav on small screens */
    
    .topnav .icon {
      display: none;
    }
    
    body {
      margin: 0px;
      background: linear-gradient(
            to bottom,
            rgba(30, 59, 112, 0.6),
            rgba(2, 13, 24, 0.6)
          )
          no-repeat center center fixed,
        url("../Images/Background.jpg");
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      -o-background-size: cover;
    }
    
    main {
      color: white;
    }
 <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="..\Css\style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" <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=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
      <title>Document</title>
    </head>
    
    <body>
      <header>
        <img src="https://www.freeiconspng.com/uploads/cinema-movie-theatre-icon-2.png" class="logo">
        <h6 class="title">MoviesHub</h6>
        <div class="topnav" id="myTopnav">
          <ul>
            <li><a href="#home" class="active">Home</a></li>
            <li><a href="#news">Movies</a></li>
            <li><a href="#contact">Celebrities</a></li>
            <li> <a href="#about">About</a></li>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
              <i class="fa fa-bars"></i>
            </a>
          </ul>
        </div>
      </header>
      <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consequat libero eget magna commodo, quis pharetra tellus pretium. Sed viverra ante in mauris finibus dapibus. Maecenas congue dapibus nulla, eu gravida orci consequat eu. Phasellus nec nunc malesuada, aliquam massa ac, accumsan metus. Fusce sed dignissim lectus. Nunc elit tellus, sollicitudin ac accumsan ut, egestas et dui. Maecenas aliquam est a ligula scelerisque, in aliquam neque sodales. Nullam condimentum euismod dictum. Curabitur non ex elementum, pretium enim ut, ornare ipsum.</p>
      </main>
    </body>
    
    </html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

娇纵 2025-02-07 13:47:07

我自己完成了，我使用MediaQuery获取NAV栏的最大宽度（徽标和菜单）奖励在脚本标签中添加了jQuery，以更改菜单图标，以在打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="..\Css\style.css">
    <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=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="top-bar">
        <span>
            <ion-icon name="call" clasa="call"></ion-icon>
            123 456 789
        </span>
        <ul>
            <li><a href="#">
                    <ion-icon name="logo-facebook"></ion-icon>
                </a></li>
            <li><a href="#">
                    <ion-icon name="logo-twitter"></ion-icon>
                </a></li>
            <li><a href="#">
                    <ion-icon name="logo-instagram"></ion-icon>
                </a></li>
        </ul>
    </div>
    <nav>
        <div class="logo">
            <a href="#"><img src="..\Images\logo.png" alt="logo">MoviesHub</a>
        </div>
        <div class="toggle">
            <a href="#">
                <ion-icon name='menu'></ion-icon>
            </a>
        </div>
        <ul class="menu">
            <li><a href="#" class="select">Home</a></li>
            <li><a href="#">Movies</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $(".toggle").on("click", function() {
                if ($(".menu").hasClass("active")) {
                    $(".menu").removeClass("active");
                    $(this).find("a").html("<ion-icon name='menu'></ion-icon>");
                } else {
                    $(".menu").addClass("active");
                    $(this).find("a").html("<ion-icon name='close'></ion-icon>");
                }
            });
        });
    </script>
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>

</html>

CSS时关闭图标

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a,
a:hover {
    text-decoration: none;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 25px;
    background: rgba(32, 51, 71, 1);
}

.top-bar span {
    color: white;
    font-weight: 400;
    font-size: 12px;
}

.call ion-icon {
    position: relative;
    top: 20px;
}

.top-bar ul {
    list-style: none;
    display: flex;
}

.top-bar li {
    margin: 0px 10px;
}

.top-bar a {
    color: white;
    font-size: 15px;
}

.top-bar a:hover {
    color: rgba(2, 13, 24, 1)
}

nav {
    background: rgba(2, 13, 24, 1);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 1 25px 0 rgba(2, 13, 24, 1);
}

.logo img {
    width: 40px;
    margin-right: 10px;
}

nav a {
    color: white;
}

.menu a.select{
    color: rgba(213, 255, 0, 1);;
}

nav a:hover {
    color: rgba(213, 255, 0, 1);
}

.logo {
    flex: 1;
}

.logo a {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}

.logo a:hover {
    color: rgba(213, 255, 0, 1);
}

.menu {
    display: flex;
    align-items: center;
    list-style: none;
}

.menu li {
    margin: 0px 10px;
    padding: 12px 8px;
    font-size: 14px;
}

.toggle {
    font-size: 18px;
    display: none;
}

@media screen and (max-width: 600px) {
    nav {
        display: block;
        position: relative;
        padding: 15px 20px;
    }

    .menu {
        margin-top: 15px;
        display: none;
    }

    .menu.active,
    .toggle {
        display: block;
    }

    .toggle {
        position: absolute;
        top: 25px;
        right: 20px;
    }
}

body {
    background: linear-gradient(to bottom,
            rgba(30, 59, 112, 0.6),
            rgba(2, 13, 24, 0.6)) no-repeat center center fixed,
        url("../Images/Background.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    font-family: 'Rubik', sans-serif;

}

Got it done by myself, I used Mediaquery to get the max width of the nav bar ( both logo and menu) bonus added jquery within script tag to change the menu icon to close icon when opened

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="..\Css\style.css">
    <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=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="top-bar">
        <span>
            <ion-icon name="call" clasa="call"></ion-icon>
            123 456 789
        </span>
        <ul>
            <li><a href="#">
                    <ion-icon name="logo-facebook"></ion-icon>
                </a></li>
            <li><a href="#">
                    <ion-icon name="logo-twitter"></ion-icon>
                </a></li>
            <li><a href="#">
                    <ion-icon name="logo-instagram"></ion-icon>
                </a></li>
        </ul>
    </div>
    <nav>
        <div class="logo">
            <a href="#"><img src="..\Images\logo.png" alt="logo">MoviesHub</a>
        </div>
        <div class="toggle">
            <a href="#">
                <ion-icon name='menu'></ion-icon>
            </a>
        </div>
        <ul class="menu">
            <li><a href="#" class="select">Home</a></li>
            <li><a href="#">Movies</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $(".toggle").on("click", function() {
                if ($(".menu").hasClass("active")) {
                    $(".menu").removeClass("active");
                    $(this).find("a").html("<ion-icon name='menu'></ion-icon>");
                } else {
                    $(".menu").addClass("active");
                    $(this).find("a").html("<ion-icon name='close'></ion-icon>");
                }
            });
        });
    </script>
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>

</html>

Css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a,
a:hover {
    text-decoration: none;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 25px;
    background: rgba(32, 51, 71, 1);
}

.top-bar span {
    color: white;
    font-weight: 400;
    font-size: 12px;
}

.call ion-icon {
    position: relative;
    top: 20px;
}

.top-bar ul {
    list-style: none;
    display: flex;
}

.top-bar li {
    margin: 0px 10px;
}

.top-bar a {
    color: white;
    font-size: 15px;
}

.top-bar a:hover {
    color: rgba(2, 13, 24, 1)
}

nav {
    background: rgba(2, 13, 24, 1);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 1 25px 0 rgba(2, 13, 24, 1);
}

.logo img {
    width: 40px;
    margin-right: 10px;
}

nav a {
    color: white;
}

.menu a.select{
    color: rgba(213, 255, 0, 1);;
}

nav a:hover {
    color: rgba(213, 255, 0, 1);
}

.logo {
    flex: 1;
}

.logo a {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}

.logo a:hover {
    color: rgba(213, 255, 0, 1);
}

.menu {
    display: flex;
    align-items: center;
    list-style: none;
}

.menu li {
    margin: 0px 10px;
    padding: 12px 8px;
    font-size: 14px;
}

.toggle {
    font-size: 18px;
    display: none;
}

@media screen and (max-width: 600px) {
    nav {
        display: block;
        position: relative;
        padding: 15px 20px;
    }

    .menu {
        margin-top: 15px;
        display: none;
    }

    .menu.active,
    .toggle {
        display: block;
    }

    .toggle {
        position: absolute;
        top: 25px;
        right: 20px;
    }
}

body {
    background: linear-gradient(to bottom,
            rgba(30, 59, 112, 0.6),
            rgba(2, 13, 24, 0.6)) no-repeat center center fixed,
        url("../Images/Background.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    font-family: 'Rubik', sans-serif;

}
回复 原文
~没有更多了~

关于作者

小嗷兮

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

李珊平

文章 0 评论 0

Quxin

文章 0 评论 0

范无咎

文章 0 评论 0

github_ZOJ2N8YxBm

文章 0 评论 0

若言

文章 0 评论 0

南…巷孤猫

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文