问题描述:

so I'm new to html/css and I'm working on a personal website. I'm having trouble creating a drop down hamburger menu. I have the header set up for mobile resize, but when I click on the hamburger icon the menu butts up again the main navigation. I'm trying to make it nestle under the main menu and have a width of 100%. As well as add the "x" symbol to close it when the user is done looking at it. I hope I explained it well enough, I'll post the codepen link.

function myFunction() {

var x = document.getElementById("myTopnav");

if (x.className === "topnav") {

x.className += " responsive";

} else {

x.className = "topnav";

}

}

body {

background-color: #EFF0EC

}

.header {padding-left: 30px;background-color: #FFFFFF;padding-top: 18px;padding-bottom: 18px;

}

h1 {font-size: 36px;font-family: Buenard, Times, serif;background-color: #FFFFFFfloat: left;display: inline;

}

ul.topnav {list-style-type: none;display: inline;float: right;margin: auto;padding: 0;overflow: hidden;

}

li a {color: #000;text-decoration: none;display: inline-block;transition: 0.3s;

}

li a:hover {color: #80B198;

}

li {font-size: 22px;font-family: Lato, Arial sans-serif;padding: 10px 16px;display: inline-block;margin: auto;

}

ul. topnav li.icon {display: none;

}

/* Smartphone-size screens */

@media (max-width: 767px) {ul.topnav li {display: none;}ul.topnav li.icon {

display: inline-block;

}

ul.topnav.responsive {position: relative;}ul.topnav.responsive li.icon {

position: absolute;

right: 0;

top: 0;

}

ul.topnav.responsive li {

float: none;

display: inline;

}

ul.topnav.responsive li a {

display: block;

text-align: left;

}

}

<body>

<div class="header">

<h1>Lorem Ipsum</h1>

<ul class="topnav" id="myTopnav"><li><a class="active" href="#portfolio">Portfolio</a></li><li><a href="#about">About Me</a></li><li><a href="#contact">Contact</a></i><li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li></ul>

</div>

</body>

网友答案:

Well, First of all you have to get your icon outside of the ul and position this ul as absolute in the mobile devices with a width of 100%. if click on the hamburger icon then it opens the menu and if you click on it again it closes it.

Here's a codepen and below is the code.

Instead of having a cross. I think you should try one of these burger menu in this codepen. You can simply replace one of these with the <div class="icon">

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
body {
  background-color: #EFF0EC
}

.header {padding-left: 30px;background-color: #FFFFFF;padding-top: 18px;padding-bottom: 18px;
  position:relative;
}

h1 {font-size: 36px;font-family: Buenard, Times, serif;background-color: #FFFFFFfloat: left;display: inline;
}

ul.topnav {list-style-type: none;display: inline;float: right;margin: auto;
  margin-right:50px;padding: 0;overflow: hidden;
}

li a {color: #000;text-decoration: none;display: inline-block;transition: 0.3s;
}

li a:hover {color: #80B198;
}

li {font-size: 22px;font-family: Lato, Arial sans-serif;padding: 10px 16px;display: inline-block;margin: auto;
}

div.icon {position:absolute;
  top:30px;
  right:20px;
}

/* Smartphone-size screens */
@media (max-width: 767px) {
  ul.topnav{
    position:absolute;
    top:60px;
    left:0;
    margin:0;
    padding:0;
    width:100%;
    background-color:white;
  }ul.topnav li {display: none;}ul.topnav li.icon {
    display: inline-block;
    }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
<body>

<div class="header">
        <h1>Lorem Ipsum</h1>
        <ul class="topnav" id="myTopnav"><li><a class="active" href="#portfolio">Portfolio</a></li><li><a href="#about">About Me</a></li><li><a href="#contact">Contact</a></li></ul>
         <div class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> </div>
    </div>

</body>
相关阅读:
Top