How do I customize the hamburger menu directly below the hamburger icon?

Question

I want to click on the hamburger menu icon and then display the list under my icon. I created a hamburger menu icon with this style.

.menu-btn div {
    position: absolute;
    left: 100%;
    top: 64%;
    padding-right: 8px;
    margin-top: -0.50em;
    line-height: 1.2;
    font-size: 18px;
    font-weight: 200;
    vertical-align: middle;
    z-index: 99;
}

.menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px 0;
    background: #989da1;
    z-index: 99;
}

The taht parameter menu should appear after clicking on the hamburger menu

 <div class="responsive-menu">
    <ul id="menu">
       <li>Vote</li>
       <li>Search</li>
       <li>About</li>
       <li>Log In</li>
    </ul>
 </div>

but I don’t understand how to customize the style of the hamburger menu, so it appears right below the hamburger menu when you click on it. Right now, his appearance is concentrated at the top of the screen - https://jsfiddle.net/wtp1k57b/1/ . How to customize this style?

PS - , (, top: 27px) . , , , , .

Answer 1

, display: flex.

HTML

, . divs. , div ul. .

, @scooterlord, button . , nav .

CSS

, . , , . , box-sizing , inherit, , . , , margin: 0 auto body. .

, . , font-size - . , rem, em %. font-size 62.5%, , (1rem = 10px).

, display: flex . , . . top left.

: CSS - .

Flexbox px:

$('.menu-btn').click(function() {
  $('nav').toggleClass('nav-open');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  font: 1.6rem/1.4 Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

header {
  width: 100%;
  background-color: orange;
  text-align: center;
  padding: 1rem;
  position: relative;
}

nav {
  display: none;
  width: 30rem;
  padding: 5rem;
  background-color: #ededed;
  position: absolute;
  right: 5%;
  top: 100%;
}

.nav-open {
  display: block;
}

nav a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1.4rem 1.6rem;
  text-decoration: none;
  cursor: pointer;
  font-size: 2.2rem;
  color: #000;
}

nav a:hover {
  background-color: #111;
  color: #fff;
}

.menu-btn {
  position: absolute;
  right: 5%;
  top: 50%;
  margin-top: -1.1rem;
  display: inline-block;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: transparent;
}

@media only screen and (min-width: 500px) {
  .menu-btn, nav {
    display: none !important;
  }
}

.menu-btn span {
  display: block;
  width: 2rem;
  height: 0.2rem;
  margin: 0.4rem 0;
  background: #989da1;
  z-index: 99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h2>Page Title</h2>
  <button class="menu-btn">
    <span></span>
    <span></span>
    <span></span>
  </button>

  <nav>
    <a href="vote.html">Vote</a>
    <a href="search.html">Search</a>
    <a href="about.html">About</a>
    <a href="login.html">Log In</a>
  </nav>
</header>

Hide result

.

Answer 2

css: top right, .

#menu
{
  position: absolute;
  top: 48px;
  right: 2px;

  background: #ededed;
  list-style-type: none;
}

Answer 3

CSS - , top right:

#menu {
  position: absolute;
  width: 300px;
  margin: 0;
  padding: 50px;  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  top: 50px;
  right: 0;
}

https://jsfiddle.net/meuexde6/

, right -100px 0, , , , .

:

, position: relative , .mobile-nav. position: absolute position: relative.

:

#menu {
  position: absolute;
  width: 300px;
  margin: 0;
  padding: 50px;  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  top: 40px;
  right: -32px;
}

: https://jsfiddle.net/meuexde6/1/

, ( - ​​ ), top right .

Answer 4

, . , , , , . , , . - , ?:)

HTML

- - .

- button , button ? , , div, id - id class, . .mobile-nav, .

<button class="menu-btn">
  <span></span>
  <span></span>
  <span></span>
</button>

<div class="responsive-menu">
  <ul id="menu">
    <li>Vote</li>
    <li>Search</li>
    <li>About</li>
    <li>Log In</li>
  </ul>
</div>

CSS

menu-btn width, #pageTitle height ( 50px - ), ; , , - id. .responsive-menu. , . css - - , ul .responsive-menu.

.menu-btn {
  position:absolute;
  display:block;
  right:0;
  top:0;
  width:50px;
  height:50px;
  background:yellow;
  border:none;
  padding:16px;
}

.responsive-menu {
  position: absolute;
  top: 50px;
  right: 0;
  display: none;
}

Javascript

, class body; , - , .

$('.menu-btn').on('click', function() {
  $('body').toggleClass('responsive-menu-open');
});

jsfiddle: https://jsfiddle.net/scooterlord/4atafhge/

, - , , .responsive-menu ul .. , .

: , , .

height , - "#pageTitle" relative top:100% ( ):

#pageTitle {
  display: flex;
  height: 50px;
  position:relative;
}

.responsive-menu {
  position: absolute;
  top: 100%;
  right: 0;
  display: none;
}

: https://jsfiddle.net/scooterlord/4atafhge/1/

: , , . .menu-wrapper, float:right - . ! YAY!

.menu-wrapper {
  position:absolute;
  top:0;
  right:0;
}
.menu-btn {
  float:right;
  ...
}
.responsive-menu {
 float:right;
  clear:both; // to clear the .menu-btn and sit exactly below it
  ...
}

: https://jsfiddle.net/scooterlord/4atafhge/2/

Answer 5

HTML5.

details > summary {
  padding: 2px 6px;
  width:12px;
  border: none;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

ul{
list-style: none;
margin-left:0;
padding-left:0;
}

<details>
  <summary>☰</summary>
  <ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  </ul>
</details>

Run codeHide result