使侧边栏响应

Question

我目前正在开发一个新网站，我想知道如何让边栏响应，也就是说：

它从左边移动到顶部（不粘）；
链接变成汉堡图标；
当点击汉堡包图标时，会出现一个全屏菜单（透明颜色），可用链接位于屏幕中央，右上角有一个“X”以关闭菜单；
汉堡包图标和徽标都在导航中垂直居中，徽标左对齐，汉堡包图标右对齐；

这是我的 HTML:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Maestoso Digital</title>
        <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head>

    <body>
        <nav id="nav">
            <img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
            <ul id="nav-links">
                <li id="active">Home</li>
                <li><a href="hosting.html">Hosting</a></li>
                <li><a href="cloud-management.html">Cloud Deployment</a></li>
                <li><a href="system-admin.html">System Administration</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
            <form action="customers.html">
                <input id="customers-button" type="submit" value="Existing Customers" />
            </form>
        </nav>

        <main>
            <div id="header">
                <img id="header-img" src="img/header.png" alt="Picture of data centre">
                <h1 id="header-title">Welcome</h1>
            </div>
            <div id="content">
                <h1>We are an internet service provider for the modern digital age!</h1>
                <p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>

                <footer>
                    <p>&copy; <a href="#">Maestoso Digital</a>. All rights reserved.</p>
                </footer>
            </div>
        </main>
    </body>
</html>

这是我的 CSS:

@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');

* {
    box-sizing: border-box;
    font-family: "Share Tech", sans-serif;
}

body {
    margin: 0;
    padding: 0;
}


a {
    text-decoration: none;
    color: #ed15ac;
}

a:hover {
    font-weight: bold;
    color: #ed1c51;
}

#content {
    margin-top: 50px;
    margin-left: 310px;
    margin-right: 10px;
    padding-bottom: 2.5rem;
}

p, ul, li {
    font-size: 16pt;
}

#nav {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background-color: #dbdbdb;
    align-items: center;
    z-index: 10;
}

@media screen and (max-width: 700px) {
    #nav {
        width: 100%;
        height: auto;
        position: relative;
        padding-bottom: 10px;
        float: right;  
    }
  
    #nav a {float: left;}
  
    div#content {margin-left: 0; padding: 5px;}
}

@media screen and (max-width: 400px) {
    #nav a {
        text-align: center;
        float: none;
    }
}


nav img {
    display: block;
    margin-bottom: 35px;
    padding-top: 20%;
    max-width: 150px;
}


#nav-links {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 16pt;
}

#nav-links:not(:last-child) {
    margin-bottom: 50px;
}

p {
    font-size: 16pt;
    font-color: #1a1a1a;
}

h1 {
    font-size: 24pt;
    font-color: #000;
}

input {
    background-color: #ed15ac;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition-duration: 0.4s;
}

input:hover {
    background-color: #ed1c51;
    color: white;
    cursor: pointer;
}

#header {
    position: relative;
}

#header-title {
    position: absolute;
    bottom: 5px;
    left: 310px;
    color: white;
    opacity: 60%;
    font-size: 120px;
    text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}


footer {
    padding-top: 20px;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    text-align: center;
}

我已经尝试了所有我能想到的方法，但就是无法正常工作。任何建议将不胜感激。

你的，古董

Answer 1

@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
* {
  box-sizing: border-box;
  font-family: "Share Tech", sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #ed15ac;
}

a:hover {
  font-weight: bold;
  color: #ed1c51;
}

#content {
  margin-top: 50px;
  margin-left: 310px;
  margin-right: 10px;
  padding-bottom: 2.5rem;
}

p,
ul,
li {
  font-size: 16pt;
}

#nav {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background-color: #dbdbdb;
  align-items: center;
  z-index: 10;
}

.nav-links {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.nav-links li {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.navigation a:hover,
.navigation a:focus {
  color: #f1f1f1;
}

#hamburger {
  display: none;
}

.navigation .closebtn {
  display: none;
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-width: 700px) {
  #nav {
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: 10px;
    float: right;
  }
  #nav a {
    float: left;
  }
  div#content {
    margin-left: 0;
    padding: 5px;
  }
}

@media screen and (max-width: 400px) {
  #hamburger {
    display: block;
  }
  .navigation {
    height: 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
  }
  #nav a {
    text-align: center;
    float: none;
  }
  .navigation a {
    font-size: 20px
  }
  .navigation .closebtn {
    display: block;
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
  li {
    padding: 10px;
  }
  #nav-links {
    text-align: center;
    margin-top: 40%;
  }
  #header {
    position: relative;
    top: 167px;
    left: -303px;
  }
}

nav img {
  display: block;
  margin-bottom: 35px;
  padding-top: 20%;
  max-width: 150px;
}

#nav-links {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 16pt;
}

#nav-links:not(:last-child) {
  margin-bottom: 50px;
}

p {
  font-size: 16pt;
  color: #1a1a1a;
}

h1 {
  font-size: 24pt;
  color: #000;
}

input {
  background-color: #ed15ac;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
}

input:hover {
  background-color: #ed1c51;
  color: white;
  cursor: pointer;
}

#header {
  position: relative;
}

#header-title {
  position: absolute;
  bottom: 5px;
  left: 310px;
  color: white;
  opacity: 60%;
  font-size: 95px;
  text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}

footer {
  padding-top: 20px;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  text-align: center;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Maestoso Digital</title>
  <link rel="stylesheet" type="text/css" href="stack.css" />
</head>

<body>
  <nav id="nav">
    <img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
    <div id="myNav" class="navigation">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <ul id="nav-links">
        <li id="active">Home</li>
        <li><a href="hosting.html">Hosting</a></li>
        <li><a href="cloud-management.html">Cloud Deployment</a></li>
        <li><a href="system-admin.html">System Administration</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()" id="hamburger">&#9776;</span>

    <form action="customers.html">
      <input id="customers-button" type="submit" value="Existing Customers" />
    </form>
  </nav>

  <main>
    <div id="header">
      <img id="header-img" src="img/header.png" alt="Picture of data centre">
      <h1 id="header-title">Welcome</h1>
    </div>
    <div id="content">
      <h1>We are an internet service provider for the modern digital age!</h1>
      <p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer
        ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>

      <footer>
        <p>&copy; <a href="#">Maestoso Digital</a>. All rights reserved.</p>
      </footer>
    </div>
  </main>
  <script>
    function openNav() {
      document.getElementById("myNav").style.display = "block";
    }

    function closeNav() {
      document.getElementById("myNav").style.display = "none";
    }
  </script>
</body>

</html>

Answer 2

这是一个非常基本的可切换菜单示例，但您至少需要一点 javascript 才能在导航容器上切换 .open class。 .open 增加了 display: block，而在移动 css 中默认是 display:none 所以菜单首先隐藏。

或者，如果您想为菜单的外观设置动画，您可以改为切换可见性和高度 - 对此有不同的实现方式，我建议检查其他网站的小视口尺寸的菜单代码以查看他们如何实施移动导航以获取创意。

在我的示例中，我没有将这些样式放入媒体查询中，因此您可以清楚地看到它的实际效果，而不必调整 window.

function navToggle() {
  document.getElementById('nav-links').classList.toggle("open");
}

@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
* {
  box-sizing: border-box;
  font-family: "Share Tech", sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #ed15ac;
}

a:hover {
  font-weight: bold;
  color: #ed1c51;
}

#content {
  margin-top: 50px;
  margin-left: 310px;
  margin-right: 10px;
  padding-bottom: 2.5rem;
}

p,
ul,
li {
  font-size: 16pt;
}

#nav {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background-color: #dbdbdb;
  align-items: center;
  z-index: 10;
}

nav img {
  display: block;
  margin-bottom: 35px;
  padding-top: 20%;
  max-width: 150px;
}

#nav-links {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 16pt;
}

#nav-links:not(:last-child) {
  margin-bottom: 50px;
}

p {
  font-size: 16pt;
  font-color: #1a1a1a;
}

h1 {
  font-size: 24pt;
  font-color: #000;
}

input {
  background-color: #ed15ac;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
}

input:hover {
  background-color: #ed1c51;
  color: white;
  cursor: pointer;
}

#header {
  position: relative;
}

#header-title {
  position: absolute;
  bottom: 5px;
  left: 310px;
  color: white;
  opacity: 60%;
  font-size: 120px;
  text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}

footer {
  padding-top: 20px;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  text-align: center;
}


/*for purposes of demonstration, normally you stick this code in a media query, hide the hamburger toggle on desktop! */

#nav-links {
  display: none;
}

#nav-links.open {
  display: block;
}

@media screen and (max-width: 700px) {
  #nav {
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: 10px;
    float: right;
  }
  #nav a {
    float: left;
  }
  div#content {
    margin-left: 0;
    padding: 5px;
  }
}

@media screen and (max-width: 400px) {
  #nav a {
    text-align: center;
    float: none;
  }
}

<nav id="nav">
  <img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
  <div class="hamburger-cont"><button id="hamburger-toggle" onclick="navToggle()">&#9776;</button></div>
  <ul id="nav-links">
    <li id="active">Home</li>
    <li><a href="hosting.html">Hosting</a></li>
    <li><a href="cloud-management.html">Cloud Deployment</a></li>
    <li><a href="system-admin.html">System Administration</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <form action="customers.html">
    <input id="customers-button" type="submit" value="Existing Customers" />
  </form>
</nav>

<main>
  <div id="header">
    <img id="header-img" src="img/header.png" alt="Picture of data centre">
    <h1 id="header-title">Welcome</h1>
  </div>
  <div id="content">
    <h1>We are an internet service provider for the modern digital age!</h1>
    <p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer
      ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>

    <footer>
      <p>&copy; <a href="#">Maestoso Digital</a>. All rights reserved.</p>
    </footer>
  </div>
</main>

使侧边栏响应

Make sidebar responsive

html

css

responsive