Question

我无法在徽标旁边放置css汉堡包菜单：（我将css汉堡包和徽标都放在标题中。我设法将徽标浮动在右侧，但应该与徽标在同一行菜单。

在标题之后，我想做一些盒子。顺便说一句，这将是该网站的移动版本。

body {
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
}

h1 {
  width: 100%;
  color: #fff;
  text-align: center;
}

img {
  max-width: 100%;
}

.header_logo {
  float: right;
}


/*
     * Made by Erik Terwan
     * 24th of November 2015
     * MIT License
     *
     *
     * If you are thinking of using this in
     * production code, beware of the browser
     * prefixes.
     */

a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease;
}

a:hover {
  color: tomato;
}

#menuToggle {
  display: block;
  margin: 19px 0 5px 5px;
  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: 5px;
  position: relative;
  background: #006663;
  /*spans*/
  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: #fff;
}


/*
     * 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) {
  transform: rotate(-45deg) translate(0, -1px);
}


/*
     * Make this absolute positioned
     * at the top left of the screen
     */

#menu
/*Hier Position ändern! Auch Z-index*/

{
  position: absolute;
  z-index: 3 width: 20%;
  margin: -50px 0 0 -30px;
  padding: 50px 0 50px 50px;
  border-radius: 20px;
  background: #006663;
  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: 0 10px 10px 0;
  font-size: 22px;
}


/*
     * And let's slide it in from the left
     */

#menuToggle input:checked~ul {
  transform: none;
}

.box {
  width: 100%;
  height: 300px;
}

#box_dates {
  background-color: green;
}

#box_about {
  background-color: orange;
}

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Batukeros - Space Groove Gang</title>
  <link href="" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="stylesheet" type="text/css" href="../css/responsive.css">
</head>

<body>
  <div class="container">
    <header>

      <!--menu-->
      <!--    Made by Erik Terwan    -->
      <!--   24th of November 2015   -->
      <!--        MIT License        -->
      <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.
        -->
          <span></span>
          <span></span>
          <span></span>

          <!--
        Too bad the menu has to be inside of the button
        but hey, it's pure CSS magic.
        -->
          <ul id="menu">
            <a href="#">
              <li>Home</li>
            </a>
            <a href="#">
              <li>About</li>
            </a>
            <a href="#">
              <li>Info</li>
            </a>
            <a href="#">
              <li>Contact</li>
            </a>
          </ul>
        </div>
      </nav>

      <img class="header_logo" src="../images/logo_s.png" alt="logo batukeros">

      <!--  <h1 class="header__title">
              Space Groove Gang
            </h1> -->
    </header>


    <main>
      <section class="content">
        <section id="box_dates" class="box">Termine</section>
        <section id="box_about" class="box">Über uns</section>
        <section id="box_pics" class="box">Fotos</section>
        <section id="box_imprint" class="box">Impressum</section>
      </section>
    </main>
  </div>
</body>

</html>

谢谢您的帮助！

Answer 1

您也应该浮动导航，还应将display: flex;添加到header

徽标和汉堡菜单的位置

1 个答案: