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? — Sam 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. — Sam 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 — Sam Chahine, Oct 16 '15 at 09:43

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

Sam Chahine

530
1
17
52

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 :) – Sam Chahine Oct 17 '15 at 01:56
You're welcome! Could you mark the question as correct? Glad I could help! :) @user5336878 – Sam 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! :) – Sam Chahine Oct 19 '15 at 06:42

Integrating a 'hamburger' with a navigation menu

1 Answers1