Integrating a 'hamburger' with a navigation menu

Question

I have a working hamburger. And I have a working menu.

Can anyone integrate the two?

When I click on the hamburger, I want my menu with fade-in to appear.

When clicked again, I want my menu to fade out.

My two pieces of code are below (By the way, I am not very fluent in coding).

Thanks.

Hamburger

<style>

.buttons-container {
  margin: 100px auto;
  text-align: center;
}

button {
  display: inline-block;
  margin: 0 0.5em;
  border: none;
  background: none;
}
button span {
  display: block;
}

.grid-button {
  padding: 1rem;
  cursor: pointer;
  user-select: none;
}

.grid-button .grid {
  width: 0.5rem;
  height: 0.5rem;
  background: #ecf0f1;
  color: #ecf0f1;
  /* Not in use when the colors are specified below */
  transition: 0.3s;
}

.grid-button.close .grid {
  -webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);
  transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);
}

.grid-button.rearrange .grid {
  box-shadow: -0.625rem -0.625rem, 0 -0.625rem, 0.625rem -0.625rem, -0.625rem 0, 0.625rem 0, -0.625rem 0.625rem, 0 0.625rem, 0.625rem 0.625rem;
}

.grid-button.rearrange.close .grid {
  box-shadow: 0 -0.5rem, 0 -1rem, 0.5rem 0, -1rem 0, 1rem 0, -0.5rem 0, 0 1rem, 0 1rem;
}

.grid-button.collapse .grid {
  box-shadow: -0.625rem 0, -0.625rem 0.625rem, 0.625rem 0, 0.625rem -0.625rem, 0 -0.625rem, -0.625rem -0.625rem, 0 0.625rem, 0.625rem 0.625rem;
}

.grid-button.collapse.close .grid {
  box-shadow: -0.5rem 0, 0 0 transparent, 0.5rem 0, 0 0 transparent, 0 -0.5rem, 0 0 transparent, 0 0.5rem, 0 0 transparent;
}

/* ====================== lines button ==================================================*/
.lines-button {
  padding: 1rem 0.5rem;
  transition: .3s;
  cursor: pointer;
  user-select: none;
  border-radius: 0.285715rem;
  /* */
}
.lines-button:hover {
  opacity: 1;
}
.lines-button:active {
  transition: 0;
}

.lines {
  display: inline-block;
  width: 2rem;
  height: 0.285715rem;
  background: #FF0000;
  border-radius: 0.142855rem;
  transition: 0.3s;
  position: relative;
}
.lines:before, .lines:after {
  display: inline-block;
  width: 2rem;
  height: 0.285715rem;
  background: #FF0000;
  border-radius: 0.142855rem;
  transition: 0.3s;
  position: absolute;
  left: 0;
  content: '';
  -webkit-transform-origin: 0.142855rem center;
  transform-origin: 0.142855rem center;
}
.lines:before {
  top: 0.5rem;
}
.lines:after {
  top: -0.5rem;
}

.lines-button:hover .lines:before {
  top: 0.57143rem;
}
.lines-button:hover .lines:after {
  top: -.57143rem;
}

.lines-button.close {
  -webkit-transform: scale3d(0.8, 0.8, 0.8);
  transform: scale3d(0.8, 0.8, 0.8);
}

.lines-button.arrow.close .lines:before, .lines-button.arrow.close .lines:after {
  top: 0;
  width: 1.11111rem;
}

.lines-button.minus.close .lines:before, .lines-button.minus.close .lines:after {
  -webkit-transform: none;
  transform: none;
  top: 0;
  width: 2rem;
}

</style>



<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="description" content="">

  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="css/style.css">

  <script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>

    <div class="buttons-container">

        <button type="button" role="button" aria-label="Toggle Navigation" class="lines-button minus">
          <span class="lines"></span>
        </button>

    </div>
  </section>
  <footer>

  </footer>
  <script>
    var anchor = document.querySelectorAll('button');

    [].forEach.call(anchor, function(anchor){
      var open = false;
      anchor.onclick = function(event){
        event.preventDefault();
        if(!open){
          this.classList.add('close');
          open = true;
        }
        else{
          this.classList.remove('close');
          open = false;
        }
      }
    }); 
  </script>

</body>
</html>

Menu

<nav id="vertical-nav">
<ul>

<li class="fadeIn-1"><a href="#">Home</a></li>

<li class="fadeIn-2"><a href="#">1</a></li>

<li class="fadeIn-3"><a href="#">2</a></li>

<li class="fadeIn-4"><a href="#">3</a></li>

<li class="fadeIn-5"><a href="#">4</a></li>

<li class="fadeIn-6"><a href="#">5</a></li>

</ul>
</nav>

<style type="text/css">
#vertical-nav{width:220px;height:100%;display:block;margin:0;padding:0}

#vertical-nav ul{margin:0;padding:0;background:transparent;list-style:none;overflow:hidden}

#vertical-nav ul li{width:100%;display:block;background:transparent;text-align:left;padding:0;overflow:hidden;padding:0;margin:0;border-bottom:0px solid #}

#vertical-nav ul li:last-child{border-bottom:0}/* border bottom removed on the last item */

#vertical-nav ul li a {position:relative;box-sizing:border-box;display:block;background:transparent;text-decoration:none;padding:4px 10px;font:14px Arial, sans-serif;color:#B3B3B3;background:transparent}

#vertical-nav ul li a:hover{color:#FF0000; padding: 4px 30PX}

#vertical-nav ul li a:hover:before{display:block;position:absolute;left:10px;top:8px;content:"";width:3px;height:9px;background:#FF0000}

-webkit-transition: {0.3s all;-moz-transition: 0.3s all;transition: 0.3s all}

.fadeIn-1 {
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-2 {
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-3{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-4{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-5{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-6{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

</style>

Did you properly create that fiddle or did you just copy and paste your code in? — Meers E. Chahine, Oct 16 '15 at 08:47
I pasted the HTML and CSS into their proper fields. Was there something else I was supposed to do? — user5336878, Oct 16 '15 at 08:49
You also forgot to include the external source for the javascript file, which you were linking to locally, please, if you require an answer, do your best to format your question properly. — Meers E. Chahine, Oct 16 '15 at 08:54
Can you send the updated link? The one sent previously is the same, you generated a new link — Meers E. Chahine, Oct 16 '15 at 09:43

score 1 · Answer 1 · answered Oct 16 '15 at 07:18

1

Stack Overflow is not here to do you your assignments or homework for you. Don't ask.
Stack Overflow is not a code-writing service. Please do not ask us to write your code for you.
Stack Overflow is not a debugging service. Please do not ask us to find simple bugs and mistakes in your programs. You should be able to find them yourself using a debugger or similar tools.
Stack Overflow can help with tough problems but only after you've narrowed it down to the minimum code, and then posted the complete problem. See SSCCE.

If you have tried it before, please share this code through a fiddle or through a codepen

answered Oct 16 '15 at 07:18

Mike Donkers

3,461
1
20
33

The essential code is already here. I just don't know how to integrate it. There is a lot written on the web about how to create a hamburger, and a plethora of postings on how to write code for a menu. I found nothing on how to integrate the two. Thus, the reason for reaching out. – user5336878 Oct 16 '15 at 08:15
I must've misunderstood, I read that you wanted StackOverflow(SO) to implement a hamburger menu for you and you gave your current code, which to me seemed like a violation of bullet point 2 in my post. – Mike Donkers Oct 16 '15 at 09:12

score 0 · Accepted Answer · answered Oct 16 '15 at 10:47

0

Here is a fiddle of a working example of what you want.

I recreated your concept since your code was too long to read over simply. What you wanted was a button which when clicked a menu will fade in. I suggest you play around with the code and revamp it with your own.

This is the code I wrote.

HTML

<button id="shower" name="buttonOne">Show</button>

<div id="menu">
    <ul>        
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Portfolio</a></li>        
    </u>    
</div>

CSS

li {
    list-style-type:none;
}

a {
    text-decoration:none;
}

ul {
    padding:0;
}

#menu {
    display:none;
    animation:fadeIn 1s;
}

#buttonss {
    height:50px;
    width:50px;
    background-color:red;
}

@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
         opacity:1;   
    }
}

jQuery

$(document).ready(function() {
    $('#shower').click(function() {
        if( $("#menu").css('display') == 'block') {
            $('#menu').css('display', 'none');
        } else {
            $('#menu').css('display', 'block');         
        }       
    });
});

I hope this helped, I'm sure it won't be too much trouble to recreate your own styling within my concept, best of luck.

answered Oct 16 '15 at 10:47

Meers E. Chahine

702
1
15
42

Thanks Samir. This helps a lot. I working on integrating now. – user5336878 Oct 17 '15 at 01:51
I hope it's the correct answer :D Good luck my friend :) – Meers E. Chahine Oct 17 '15 at 01:56
You're welcome! Could you mark the question as correct? Glad I could help! :) @user5336878 – Meers E. Chahine Oct 18 '15 at 23:53
Samir. I will do that. Just how? – user5336878 Oct 19 '15 at 06:38
BTW, I am getting a blue halo around the menu in Chrome and Opera when clicked on. Any idea why? – user5336878 Oct 19 '15 at 06:39
Click the check under the voting widget to the left of my answer :) And I had the same problem, this was very useful http://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome, glad I could help! :) – Meers E. Chahine Oct 19 '15 at 06:42

Integrating a 'hamburger' with a navigation menu

2 Answers2