Pass menu from "normal" to "hamburger"

Question

Pass menu from "normal" to "hamburger"

Navigation

#1 by (3 votes)
#2 by (3 votes)

2

Hello! My question is: What is the best way to go from a normal menu, with inline-block for example to a hamburger menu, that when you click the icon it opens the menu items, when the resolution does not support a menu in line?

Is there any good practice for this? Is it better to do with css, with js?

I have this menu:

<ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
    <li><a href="">Item 6</a></li>
    <li><a href="">Item 7</a></li>
</ul>

It has an inline-block display, getting it in the list.

I want it, when the resolution is too small for it to fit on the page, it turns into a "Hamburger." I want to know the best way to do this.

I hope I have been clear.

javascript html css

asked by anonymous 12.05.2016 / 13:27

2 answers

AJAX - Appear divs How to validate the IP of an Emails list to know if they are real or false and if they can receive message?

score 3 · Answer 1

The "secret" so to speak is to use @media-queries . Following the example of the framework materialize (which I recommend when you want to make your work easier with responsive sites and still with design material), you can create two menus:

  <ul id="menu-tela-grande">
    <li><a href="#">Item Menu</a></li>
    <li><a href="#">Item Menu</a></li>
    <li><a href="#">Item Menu</a></li>
  </ul>

  <button>, <img> ou <a> com imagem hamburger

  <ul id="menu-tela-pequena">
    <li><a href="#">Item Menu</a></li>
    <li><a href="#">Item Menu</a></li>
    <li><a href="#">Item Menu</a></li>
  </ul>

Css:

#menu-tela-grande {
  ...Seu estilo para quando o menu estiver em uma tela grande
}

#menu-tela-pequena {
  display: none;
  ...Seu estilo para quando o menu estiver em uma tela pequena
}

Seu botao hamburger tambem deve estar com display: none;

Still in css, you use @media-queries to check the screen size and display the corresponding menu:

@media only screen and (max-width : 950px) {
   #menu-tela-grande {
      display: none;
   }

   Botao hamburger {
      display: block;
   }
}

This code snippet is almost self-explanatory, but just to confirm it is "saying": 'If the screen size has width to 950px , hide #menu-tela-grande , and show hamburger button (which will show the small menu when clicked) '.

I hope I have helped, if I did not understand, I made an example in jssfidle for more details.

score 3 · Answer 2

Your first step is to define the structure of your layout, for example:

<div id="container">
  <header>    
  </header>
  <nav>        
  </nav>
  <main>
  </main>
</div>

In this case we have a header , which will be at the top of the page, a main that will have the contents and then nav with the navigation options ( menu ).

The second step is to choose which strategy to take, mobile-first or mobile-also ... I particularly prefer mobile-first , so let's organize the layout for a mobile screen.

var action = document.getElementById("action");
var navWrapper = document.querySelector(".nav-wrapper");
action.addEventListener("click", function () {
  action.classList.toggle("list");
  action.classList.toggle("close");
  navWrapper.classList.toggle("open");
});

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

div#container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

header {
  z-index: 2;
  position: absolute;
  top: 0px;
  height: 40px;
  padding: 5px;
  line-height: 40px;
  width: 100%;
  box-shadow: 0px 0px 5px black;
  background-color: whitesmoke;
  box-sizing: border-box;
}

.nav-wrapper {
  z-index: 1;
  position: absolute;
  top: 40px;
  left: -210px;
  bottom: 0px;
  width: 200px;
  background-color: rgba(0, 0, 0, 0.3);  
  transition: width 0.5s linear, left 0.5s linear 0.5s;
}

.nav-wrapper nav {
  height: 100%;
  width: 200px;
  box-shadow: 3px 0px 5px -3px black;
  background-color: whitesmoke;
}

.nav-wrapper nav a {
  display: block;
  height: 40px;
  width: 100%;
  border-bottom: 1px solid silver;
  line-height: 40px;
  box-sizing: border-box;
  padding: 5px;
}

.nav-wrapper nav a:hover {
  background-color: gainsboro;
}

.nav-wrapper.open {
  left: 0px;
  width: 100%;  
  transition: width 0.5s linear 0.5s, left 0.5s linear;
}

main {
  z-index: 0;
  position: absolute;
  top: 40px;
  bottom: 0px;
  width: 100%;
  background-color: white;
  overflow: auto;
  padding: 5px;
  box-sizing: border-box;
}

div.icon {
  float: left;
  height: 28px;
  width: 28px;
  border-radius: 2px;
  margin: 2px;
  background-size: calc(100% - 2px);
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0px 0px 5px black;
}

div.icon:hover {
  background-color: gainsboro;
}

div.icon.list {
  background-image: url(http://image005.flaticon.com/1/svg/114/114320.svg)
}

div.icon.close {
  background-image: url(http://image005.flaticon.com/1/svg/122/122264.svg)
}

<div id="container">
  <header>
    <div id="action" class="icon list"></div>
    Titulo
  </header>
  <div class="nav-wrapper">
    <nav>
      <a href="">Link</a>
      <a href="">Link</a>
      <a href="">Link</a>
      <a href="">Link</a>
    </nav>
  </div>
  <main>

  </main>
</div>

Now we already have our layout for mobile screens, but now we need to adjust the same for larger screens, for this example I will consider a larger screen as having at least width: 720px . then add the following block in your CSS.

@media (min-width: 720px) { 
  /* regras necessarias para transformar o layout */ 
}

follow the example already with the applied changes:

var action = document.getElementById("action");
var navWrapper = document.querySelector(".nav-wrapper");
action.addEventListener("click", function () {
  action.classList.toggle("list");
  action.classList.toggle("close");
  navWrapper.classList.toggle("open");
});

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

div#container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

header {
  z-index: 2;
  position: absolute;
  top: 0px;
  height: 40px;
  padding: 5px;
  line-height: 30px;
  width: 100%;
  box-shadow: 0px 0px 5px black;
  background-color: whitesmoke;
  box-sizing: border-box;
}

.nav-wrapper {
  z-index: 1;
  position: absolute;
  top: 40px;
  left: -210px;
  bottom: 0px;
  width: 200px;
  background-color: rgba(0, 0, 0, 0.3);  
  transition: width 0.5s linear, left 0.5s linear 0.5s;
}

.nav-wrapper nav {
  height: 100%;
  width: 200px;
  box-shadow: 3px 0px 5px -3px black;
  background-color: whitesmoke;
  overflow: auto;
}

.nav-wrapper nav a {
  display: block;
  height: 40px;
  width: 100%;
  border-bottom: 1px solid silver;
  line-height: 30px;
  box-sizing: border-box;
  padding: 5px;
}

.nav-wrapper nav a:hover {
  background-color: gainsboro;
}

.nav-wrapper.open {
  left: 0px;
  width: 100%;  
  transition: width 0.5s linear 0.5s, left 0.5s linear;
}

main {
  z-index: 0;
  position: absolute;
  top: 40px;
  bottom: 0px;
  width: 100%;
  background-color: white;
  overflow: auto;
  padding: 5px;
  box-sizing: border-box;
}

div.icon {
  float: left;
  height: 28px;
  width: 28px;
  border-radius: 2px;
  margin: 2px;
  background-size: calc(100% - 2px);
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0px 0px 5px black;
}

div.icon:hover {
  background-color: gainsboro;
}

div.icon.list {
  background-image: url(http://image005.flaticon.com/1/svg/114/114320.svg)
}

div.icon.close {
  background-image: url(http://image005.flaticon.com/1/svg/122/122264.svg)
}

@media (min-width: 720px) {
  div#action { display: none; }

  .nav-wrapper {
    z-index: 3;
    top: 0px;
    right: 0px;
    height: 40px;
    left: 0px;
    width: auto;
    background-color: transparent;
    pointer-events: none;
  }

  .nav-wrapper nav {
    width: auto;
    float: right;
    background-color: transparent;
    pointer-events: auto;
    overflow: hidden;
  }

  .nav-wrapper nav a {   
    display: table-cell;
    width: auto;
    padding: 5px;
    line-height: 30px;
    box-sizing: border-box;
    border-bottom: 0px none transparent;
    border-left: 1px solid silver;
    white-space: nowrap;
  }

<div id="container">
  <header>
    <div id="action" class="icon list"></div>
    Titulo
  </header>
  <div class="nav-wrapper">
    <nav>
      <a href="">Link de Teste 01</a>
      <a href="">Link de Teste 02</a>
      <a href="">Link de Teste 03</a>
      <a href="">Link de Teste 04</a>
      <a href="">Link de Teste 05</a>
      <a href="">Link de Teste 06</a>
    </nav>
  </div>
  <main class="content">
    <div id="lipsum">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec cursus ipsum. Vestibulum dignissim a quam vitae tincidunt. Suspendisse sapien mauris, rutrum eu nisl elementum, tristique consectetur magna. Phasellus fermentum, velit id ultricies ullamcorper, nulla erat tristique tortor, euismod laoreet lorem turpis id lorem. Aenean varius lorem nulla. Maecenas dictum efficitur dolor, nec vehicula mauris mollis quis. Proin congue scelerisque turpis. Maecenas dui nulla, ultricies eget lorem non, vulputate tristique diam. Pellentesque convallis, tortor ut imperdiet efficitur, lacus magna lobortis urna, vel scelerisque enim purus semper lorem. Praesent sed aliquet est.
      </p>
      <p>
        Ut tincidunt non felis quis congue. Quisque ornare vel elit et lacinia. Cras scelerisque eu mauris nec tempor. Vivamus vel urna mattis, consectetur metus in, facilisis nisi. Morbi vitae dolor nisi. Phasellus eu mi ultrices, laoreet neque vitae, posuere orci. Nam in felis in sem ultrices rhoncus eu sit amet urna. Fusce eget diam vel dolor feugiat aliquam et ultricies mauris.
      </p>
      <p>
        Morbi aliquet elit nibh, et viverra dui tempus ac. Integer eget diam nulla. Donec urna ligula, sagittis at lorem nec, blandit hendrerit metus. Vestibulum gravida dui vel sem gravida luctus. Vestibulum sed metus sit amet sapien tristique vestibulum. Proin ut lorem et est mollis eleifend non at sem. Pellentesque eu gravida est. Sed purus ipsum, varius eget accumsan sit amet, porta vitae ligula. In dictum, lorem id ultrices placerat, nulla justo viverra dui, sed viverra nibh risus vulputate metus. Proin aliquam posuere sem sed venenatis.
      </p>
      <p>
        Curabitur tortor mi, varius ac orci sit amet, pulvinar vulputate augue. Suspendisse scelerisque lectus at commodo ultricies. Etiam ullamcorper dui vel justo auctor tempus. Phasellus id sollicitudin lectus. Pellentesque in quam quis dui sagittis cursus. Nulla iaculis posuere aliquet. Cras tempor auctor felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut porta eleifend nibh et auctor. Pellentesque at erat quam. In urna nisi, pharetra vehicula lacus eget, fermentum sagittis eros. Mauris iaculis ante eget tellus semper bibendum. Mauris sollicitudin dolor nunc, nec laoreet ante luctus sit amet.
      </p>
      <p>
        Aliquam mi magna, dapibus ac egestas sed, aliquet id dui. Quisque ultrices efficitur urna, a cursus ipsum consequat hendrerit. Sed vehicula nisi sed vulputate pellentesque. Ut blandit sollicitudin sem vel egestas. Aliquam libero sapien, rutrum eget efficitur sed, ornare ut nibh. Pellentesque non cursus purus. Suspendisse volutpat ex vel nibh posuere, sed maximus ex maximus. Proin mi magna, placerat at purus id, bibendum lacinia nibh. Mauris non rhoncus ante. Proin mauris leo, suscipit vel laoreet egestas, venenatis a arcu. Fusce lobortis cursus placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ligula felis, pulvinar a interdum quis, auctor eu ipsum. Curabitur tempor, orci quis eleifend bibendum, tortor dolor venenatis nisi, ac facilisis quam nunc a enim. Nullam elit nulla, imperdiet eget euismod vitae, fringilla ut dolor. Morbi et accumsan neque, quis vehicula sem.
      </p>
      <p>
        Duis dolor tortor, pulvinar ut ipsum sit amet, cursus aliquet neque. Donec non ligula lobortis, malesuada ligula eu, suscipit nibh. Nam tempor, ipsum cursus bibendum elementum, eros eros feugiat eros, nec rhoncus orci arcu placerat lectus. Integer et ultricies felis. Duis nulla ipsum, malesuada vitae urna nec, egestas scelerisque nisl. Integer vulputate consectetur finibus. Aliquam erat volutpat. Nam sed est nulla. Aliquam tristique sed lorem eget malesuada. In hac habitasse platea dictumst. Cras ac dui elit. Proin pharetra sit amet metus ut fringilla. Etiam at turpis nec lacus mollis lobortis sodales non nisl.
      </p>
      <p>
        Nullam facilisis quam vitae suscipit euismod. Ut ligula metus, ultrices a nisi venenatis, tristique dictum lectus. Phasellus auctor porttitor tellus, sit amet vehicula velit malesuada in. Integer mauris nulla, volutpat ut hendrerit sit amet, gravida non leo. Duis purus augue, tempus eget pretium nec, malesuada malesuada tellus. Maecenas convallis pretium metus nec molestie. Morbi ac maximus mauris, in iaculis metus. Maecenas elementum dui ac tortor volutpat, ut iaculis odio convallis. Fusce malesuada tristique enim, ac vulputate leo semper in. Quisque auctor tempus urna, non suscipit justo mattis ut. In at metus blandit, euismod est id, mattis ex. Praesent gravida feugiat felis eget scelerisque.
      </p>
      <p>
        In urna nulla, dapibus in hendrerit sed, elementum suscipit eros. Vivamus dapibus magna vitae odio efficitur venenatis. Nulla id suscipit felis. Vestibulum varius sapien et nibh porta, sit amet ultricies velit pharetra. Vestibulum dictum diam et eros elementum convallis. Suspendisse id sem felis. Fusce dapibus, nibh at semper euismod, velit enim mollis lectus, eu mattis nulla turpis id magna. Morbi nec neque urna. Ut imperdiet pellentesque elit, fringilla laoreet ex venenatis sit amet. Mauris aliquam metus sem, id sagittis diam sollicitudin sit amet. Sed id venenatis est. Mauris id nisi justo. Cras varius ante non enim lacinia tristique. Ut justo dui, condimentum sed urna non, finibus tristique est. Nunc nec elit auctor, lacinia ipsum non, blandit odio. Nulla sit amet ligula et risus tincidunt fermentum ut sit amet massa.
      </p>
      <p>
        Integer vitae tincidunt odio. Quisque dui dolor, pellentesque id vehicula vitae, molestie dignissim justo. In ut scelerisque eros. Etiam at ipsum sit amet nulla fermentum sagittis. Quisque vitae auctor est. Fusce magna sem, tempus sed venenatis sed, rhoncus egestas odio. Quisque eleifend, odio eget tempus lobortis, nisi ante tincidunt tortor, non vestibulum urna leo aliquet elit. Fusce scelerisque nunc maximus felis blandit pharetra. Nunc commodo sed justo in facilisis. Cras lacinia risus et lorem rhoncus, in congue tortor condimentum. Suspendisse potenti. Nam rhoncus libero quis ipsum hendrerit efficitur. Ut diam purus, tincidunt eu varius sed, rhoncus a eros. Etiam vitae lacinia orci, eget vestibulum justo.
      </p>
      <p>
        Aliquam malesuada erat et justo placerat tristique. Sed blandit rutrum nibh a porttitor. Duis ut erat sit amet libero accumsan vehicula. Cras quis ex nec quam convallis suscipit. Nulla nisl enim, suscipit sit amet porttitor id, commodo non nunc. Curabitur ut imperdiet enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla accumsan laoreet sem, sit amet imperdiet metus malesuada sit amet. Integer finibus pharetra mattis.
      </p>
      <p>
        Etiam elit lacus, volutpat a sagittis vitae, tincidunt eget ipsum. Sed ac augue hendrerit, tempus nisl eu, porttitor est. Quisque elementum porta tortor, ac ornare elit rhoncus eget. Morbi vel rutrum eros. Quisque quis efficitur ipsum, commodo eleifend nisl. Suspendisse sodales consequat convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi consequat congue arcu vulputate dapibus. Nulla vitae consectetur eros, in luctus felis.
      </p>
      <p>
        Nam tempus justo ac lorem imperdiet, ut blandit ipsum pellentesque. In iaculis velit ante. Quisque eleifend mi id hendrerit porttitor. In sem ipsum, fermentum vitae lorem vel, aliquet finibus odio. In in ante ac lorem faucibus vulputate non iaculis justo. Aenean gravida ante quis venenatis lobortis. Maecenas pellentesque facilisis est vel faucibus. Integer sapien ligula, tempor vitae finibus vitae, elementum sed purus. Nunc iaculis nulla ac enim vehicula, at faucibus lacus laoreet. Phasellus venenatis venenatis est, dictum tincidunt tortor malesuada in. Cras at nulla ipsum. Sed suscipit felis non sapien fermentum semper. In hac habitasse platea dictumst. Ut vel libero quis erat laoreet porta. Donec massa mauris, pulvinar tincidunt dolor at, iaculis auctor tortor. Nulla vel libero et diam tincidunt blandit nec quis purus.
      </p>
      <p>
        Cras porta, arcu nec iaculis mollis, dolor enim pellentesque mauris, sed bibendum erat orci laoreet sem. Praesent purus lorem, congue vel nisl nec, pharetra dictum nibh. Cras ac mauris tempus, interdum tortor vel, pulvinar sapien. Mauris id ipsum id sem condimentum iaculis a in urna. Pellentesque vehicula arcu at congue ullamcorper. Proin dictum purus nulla, at volutpat nulla fermentum ut. Ut eleifend dui est, sed pellentesque sem lobortis non. Ut tellus dui, sodales sed pharetra commodo, aliquam vitae magna. Donec vel ultricies velit. Nunc hendrerit rutrum tellus, et ultricies eros aliquam ut. Ut eu elit lorem. Mauris consectetur sapien risus, at vulputate metus rutrum eleifend. Vivamus ac molestie lectus.
      </p>
      <p>
        Mauris at odio quis lacus varius posuere in sed arcu. Fusce dapibus arcu volutpat erat tincidunt, pulvinar commodo urna hendrerit. Donec nec justo maximus, sollicitudin mi at, placerat justo. Sed vitae ipsum porta, fermentum velit ac, vestibulum felis. Nulla ornare condimentum rutrum. Sed iaculis feugiat orci et rhoncus. Vivamus ut est quis erat commodo lacinia. Suspendisse consequat sem in augue sollicitudin pretium. Quisque commodo rhoncus nulla faucibus aliquam. Phasellus tristique velit nec sapien pulvinar lobortis. Fusce eu mollis velit, ac malesuada sapien. Praesent ultrices leo ac feugiat luctus. Nulla blandit dignissim purus non porttitor. Ut vel pretium nulla.
      </p>
      <p>
        Nam dignissim vestibulum ante, in consectetur purus semper non. Praesent venenatis sapien sed ultricies porta. Cras eu consectetur dolor, at efficitur mi. Cras enim purus, finibus non turpis ac, aliquet vulputate lorem. Aliquam maximus felis in orci rhoncus, eget finibus orci aliquet. Maecenas convallis lacus convallis lacus aliquet auctor. Phasellus dolor est, facilisis sed sapien et, maximus semper justo. Nam eget arcu id ligula fringilla commodo at at lectus. Sed bibendum mattis erat, vel bibendum mauris ultrices id. Suspendisse imperdiet massa sed purus vestibulum, posuere volutpat dolor porta. Proin consequat nisl lacus, dictum facilisis nisi auctor ut. Morbi a ante a lorem rutrum volutpat faucibus eu est.
      </p>
    </div>
  </main>
</div>

Just one more detail, keeping a resposible page is not just making this menu control. So depending on the size of your application, I advise you to use some framework, such as Twitter Bootstrap . But there are other options.

Zurb Foundation (If you do not want your application to look like Bootstrap and you want to have more control over the css and appearance of your page)

Material Design Lite (If you need to apply Material Design without having any type of dependency with other Frameworks, such as JQuery ).

Angular Material (If you want to apply Material Design and you are working with AngularJS )