响应式导航栏点击

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

我尝试让我的导航栏响应。请在 w3schools 上关注此教程。如果我复制并粘贴它是有效的，但我希望它首先是移动的（媒体查询），这就是我的问题。

可以从移动设备切换到平板电脑/桌面设备。但是点击功能和css有问题

window.onload=function() {

  const x = document.getElementById("myTopnav");
  const burger = document.getElementById("burger");

  burger.addEventListener("click", () => {

    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
    
  });

};
.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: right;
  display: none;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 24px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
  display: block;
  float: left;

}

.topnav .icon {
  display: block;
}

.topnav.responsive a { 
  display: block;
}


/*  X-Small devices (portrait phones, less than 576px)
    No media query for `xs` since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .topnav a:not(:first-child) {display: block;}
  .topnav a.icon {
    float: right;
    display: none;
  }
}

@media (min-width: 768px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}
<nav>
    <!-- Top Navigation Menu -->
    <div class="topnav" id="myTopnav">
      <a href="#home" class="active">Brand</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
      <a href="#" id="burger" class="icon">
        <svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.46447 20.5355C4.92893 22 7.28595 22 12 22C16.714 22 19.0711 22 20.5355 20.5355C22 19.0711 22 16.714 22 12C22 7.28595 22 4.92893 20.5355 3.46447C19.0711 2 16.714 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355ZM18.75 16C18.75 16.4142 18.4142 16.75 18 16.75H6C5.58579 16.75 5.25 16.4142 5.25 16C5.25 15.5858 5.58579 15.25 6 15.25H18C18.4142 15.25 18.75 15.5858 18.75 16ZM18 12.75C18.4142 12.75 18.75 12.4142 18.75 12C18.75 11.5858 18.4142 11.25 18 11.25H6C5.58579 11.25 5.25 11.5858 5.25 12C5.25 12.4142 5.58579 12.75 6 12.75H18ZM18.75 8C18.75 8.41421 18.4142 8.75 18 8.75H6C5.58579 8.75 5.25 8.41421 5.25 8C5.25 7.58579 5.58579 7.25 6 7.25H18C18.4142 7.25 18.75 7.58579 18.75 8Z" fill="#fff"></path> </g></svg>
      </a>
    </div>
</nav>

希望有人能帮助我。

javascript css responsive-design navigation onclick
1个回答
0
投票

您缺少与添加响应类后元素更改相对应的

CSS
代码。所以我添加了它们：

1)

.topnav.responsive .icon {
position: absolute;
right: 8px;
top: 8px;
}

（这样它就保持在固定位置并且不会浮动到链接列表的底部）。

2)

.topnav.responsive a {
display: block;
float: none;
}

（移除浮动，并显示列表）。

在完整的代码中，它看起来像这样（所有其余的代码保持不变，但只是为了让你可以看到结果......）：

 window.onload = function () {

            const x = document.getElementById("myTopnav");
            const burger = document.getElementById("burger");

            burger.addEventListener("click", () => {

                if (x.className === "topnav") {
                    x.className += " responsive";
                } else {
                    x.className = "topnav";
                }

            });

        };
.topnav {
        overflow: hidden;
        background-color: #333;
    }

    .topnav a {
        float: right;
        display: none;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 24px;
    }

    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }

    .topnav a.active {
        background-color: #04AA6D;
        color: white;
        display: block;
        float: left;

    }

    .topnav .icon {
        display: block;
    }

    .topnav.responsive .icon {
        position: absolute;
        right: 8px;
        top: 8px;
    }

    .topnav.responsive a {
        display: block;
        float: none;
    }


    /*  X-Small devices (portrait phones, less than 576px)
      No media query for `xs` since this is the default in Bootstrap
  */
    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) {}

    @media (min-width: 576px) {}

    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) {
        .topnav a:not(:first-child) {
            display: block;
        }

        .topnav a.icon {
            float: right;
            display: none;
        }
    }

    @media (min-width: 768px) {
        .topnav.responsive {
            position: relative;
        }

        .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
        }

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

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {}

    /* X-Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {}

    /* XX-Large devices (larger desktops, 1400px and up) */
    @media (min-width: 1400px) {}
<nav>
        <!-- Top Navigation Menu -->
        <div class="topnav" id="myTopnav">
            <a href="#home" class="active">Brand</a>
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
            <a href="#" id="burger" class="icon">
                <svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                    stroke="#000000">
                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                    <g id="SVGRepo_iconCarrier">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M3.46447 20.5355C4.92893 22 7.28595 22 12 22C16.714 22 19.0711 22 20.5355 20.5355C22 19.0711 22 16.714 22 12C22 7.28595 22 4.92893 20.5355 3.46447C19.0711 2 16.714 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355ZM18.75 16C18.75 16.4142 18.4142 16.75 18 16.75H6C5.58579 16.75 5.25 16.4142 5.25 16C5.25 15.5858 5.58579 15.25 6 15.25H18C18.4142 15.25 18.75 15.5858 18.75 16ZM18 12.75C18.4142 12.75 18.75 12.4142 18.75 12C18.75 11.5858 18.4142 11.25 18 11.25H6C5.58579 11.25 5.25 11.5858 5.25 12C5.25 12.4142 5.58579 12.75 6 12.75H18ZM18.75 8C18.75 8.41421 18.4142 8.75 18 8.75H6C5.58579 8.75 5.25 8.41421 5.25 8C5.25 7.58579 5.58579 7.25 6 7.25H18C18.4142 7.25 18.75 7.58579 18.75 8Z"
                            fill="#fff"></path>
                    </g>
                </svg>
            </a>
        </div>
    </nav>

希望对你有帮助，祝你好运！

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