11 {{ upvoteCount | shortNum }}
11 {{ upvoteCount | shortNum }}

hamburger style css only menu?

by Arcsn
8 replies
hi guys,

please let me know where to find a css-only (no jquery) tutorial for a hamburger style drop down menu?

I have two menus and i need them to convert to a hamburger one on mobile (two separate "hamburgers", I'll use different icons obviously).

i did it for one, but when i try to proceed with the second menu - it seems not working... (maybe there is some conflict)... help.

going crazy about this website....
#css #hamburger #menu #style
  • Profile picture of the author totalprocessing.net
    Here is a css only responsive menu tutorial.

    Signature
    Premium WooCommerce & WordPress Plugins $10/ea. or FREE With Membership. PluginForage.com
    {{ DiscussionBoard.errors[10226576].message }}
  • Profile picture of the author Arcsn
    i just tried this tutorial and it's messing with my code. I paid an attention not to confuse the id's, but it got messy... my whole web got crazy.

    i'll try the way i did it for the main menu... there must be a way...
    {{ DiscussionBoard.errors[10227840].message }}
  • Profile picture of the author kdavies
    Have a look at bootstrap:

    Bootstrap · The world's most popular mobile-first and responsive front-end framework.
    Signature
    About
    Special Offers
    Portfolio
    Testimonials
    {{ DiscussionBoard.errors[10228606].message }}
    • Profile picture of the author Arcsn
      i tried foundation and bootstrap, but they also are messing with my code....

      i need to simplify not to complicate...
      {{ DiscussionBoard.errors[10251602].message }}
  • Profile picture of the author webcosmo
    Try using css media queries.
    Signature


    {{ DiscussionBoard.errors[10252518].message }}
  • Profile picture of the author arojilla
    One hamburger menu is bad enough, your bounce rate will skyrocket. Two might be overkill. If you still want to use them, leave at lest 2 to 3 important links out of them, in a menu bar at the header or at the bottom.

    In case you wonder, these are the first 5 results in Google for hamburger menu:

    Why and How to Avoid Hamburger Menu
    The Hamburger Menu-Icon Debate
    Kill The Hamburger Button
    Hamburger Menu: Handy Tool or Useless Icon?
    The Hamburger Menu Doesn't Work

    About the menu itself, it's pretty easy to do one, but I'd use some simple javascript (not bloated libraries though). As a quick example:

    Code:
    <div class="menu"><i onclick="turn('menu');">Menu</i><ul id="menu"><li><a href="">Link 1</a></li><li><a href="">Link 2</a></li></ul></div>
    Hide the i tag with CSS and let the list (ul) show, styled as you may prefer. Then with a simple media query hide the ul and show the i (you can add a font icon to it, I use FontAwesome, or an image, either inline or as background).

    Code:
    div.menu i {display:none;}

@media only screen and (max-width:799px) {
div.menu i {display:block;}
ul#menu, ul#menu.off {display:none;}
ul#menu.on {display:block;}
}
    When i is clicked it changes the class of ul with this JS:

    Code:
    function turn(id) {
	if (document.getElementById(id).className == 'off') {
		document.getElementById(id).className = 'on';
	} else {
		document.getElementById(id).className = 'off';
	}
}
    It changes the class to on, then when it is clicked again, to off, and so on. You can use the same JS to change the class of any other element BTW, it's simple but very reusable.

    Hope it helps.
    {{ DiscussionBoard.errors[10252579].message }}
    • Profile picture of the author Arcsn
      Thank you!
      You might be right about the hamburger menu. Not intuitive at all, but at the moment I have no other clue how to present my both menus on my website.
      The overall look is clean and minimal so I thought that a small icon will not disturb much... But I'm not so sure now.
      Anyway, I will read all the articles and try to figure out what's best solution.
      {{ DiscussionBoard.errors[10252694].message }}
  • Profile picture of the author Arcsn
    thanks guys i solved the problem, eliminated all the icons and made two responsive navbar.
    {{ DiscussionBoard.errors[10265560].message }}

Trending Topics