Question

我有一个html和css代码（我不能使用Java或其他任何东西），带有一个汉堡菜单，当屏幕缩小时会显示出来。但是由于某种原因，它已经变得不可见了，我不知道为什么。

该代码用于音乐网站，我需要它能够在导航栏之间切换，但是我的汉堡菜单不想显示。我曾尝试在代码中添加“可见性”，但我将其删除却无法正常工作。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8"><meta name=”robots” content=”noindex,nofollow”><meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Nova Square" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Piazzolla" rel="stylesheet" />
    <title>The Script</title>
    <style type="text/css">html { 
        background: url('images/main.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    </style>
</head>
<body>
<main><!-- Header/Navbar: John -->
<header><a href="index.html"><img alt="Main Logo" id="mainlogo" src="images/logo.png" /></a>
<nav role="navigation">
<div id="menuToggle"><!--
                      A fake / hidden checkbox is used as click reciever,
                      so you can use the :checked selector on it.
                      --><input type="checkbox" /> <!--
                      Some spans to act as a hamburger.
                      
                      They are acting like a real hamburger,
                      not that McDonalds stuff.
                      --> <!--
                      Too bad the menu has to be inside of the button
                      but hey, it's pure CSS magic.
                      -->
<ul id="menu">
    <li><a href="index.html">Home</a> <a href="music.html">Music</a> <a href="about.html">About</a> <a href="press.html">Press Kit</a> <a href="contact.html">Contact</a> <a href="https://www.facebook.com" target="_blank"><img alt="Facebook Logo" class="navbarsocialicon" src="images/fb_icon.png" /></a> <a href="https://www.twitter.com" target="_blank"><img alt="Twitter Logo" class="navbarsocialicon" src="images/tw_icon.png" /></a> <a href="https://www.instagram.com" target="_blank"><img alt="Instagram Logo" class="navbarsocialicon" src="images/in_icon.png" /></a> <a href="https://www.youtube.com" target="_blank"><img alt="Youtube Logo" class="navbarsocialicon" src="images/yt_icon.png" /></a></li>
</ul>
</div>
</nav>
</header>
</main>

<div class="flex-container">
<div style="width:35%;"><img alt="Senaste albumet: The last time" id="img1" src="images/sunsetsalbum.jpg" /></div>

<div>
<h1 style="padding-top: 2%; padding-left:10%;"></h1>
</div>
</div>

<p><span style="color:#FFFFFF;">Sunsets &amp; Full Moons is the sixth studio album by Irish rock trio The Script, released on 8 November 2019 through Sony Music Entertainment. It is supported by the lead single &quot;The Last Time&quot;. The Script will embark on a European tour in 2021 in promotion of the album. The band consider the album to be a sequel to their self-titled debut album, released in 2008, as both were &quot;written and recorded following traumatic personal events&quot; for lead singer Danny O&#39;Donoghue, whose parents both died ten years apart. O&#39;Donoghue called the album the &quot;most poignant record we&#39;ve ever made&quot;, and said &quot;Our music was always about being together with the audience, and writing about your own feelings, and sharing them.&quot;</span></p>
</body>
</html>

CSS

@media screen and (max-width: 768px) {
 
body
{
  margin: 0;
  padding: 0;
  
  /* make it look decent enough */
  background: transparent;
  /*colors of inner text in mobile form*/
  color: #ffffff;
  font-family: "Avenir Next", "Avenir", sans-serif;
  
  overflow-x: hidden; /* needed because hiding the menu on the right side is not perfect,  */
}

a
{
  text-decoration: none;
  color: #ffffff;
  
  transition: color 0.3s ease;
}

a:hover
{
  color: tomato;
}

#menuToggle
{
  display: block;
  position: absolute;
  top: 50px;
  right: 50px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #ffffff;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #000000;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 0;
  padding: 50px;
  padding-top: 125px;
  right: -100px;
  
  
  /*Inner color of menu box*/ 
  background: #103570;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
  opacity: 1;
}


  }

隐形汉堡菜单HTML

0 个答案: