Menu with CSS3 and Javascript

Question

Menu with CSS3 and Javascript

Navigation

#1 by (3 votes)

2

I want to make a menu up to a point simple with CSS3 and Javascript. My menu needs to have a "hamburger" and when clicking it needs to turn an "X". When you click on a link it also needs to close and the "X" will turn the "hamburger" again.

Below is what I already have.

$(document).ready(function(){
	$('nav a').on('click', function(){
		$('#menu').prop('checked', false);
	});
});

*{ margin:0; box-sizing: border-box; overflow: hidden }

nav {
  border: 1px solid #333;
  display: flex;
  flex-flow: column wrap;
  right: -100%;
  transition: right 400ms ease-in;
  position: absolute;
  width: 100%;
  height:100%;
  background:rgba(0,0,0,8);
  opacity: 0.5;
  line-height: 30px;
}

nav a{
	text-decoration: none;
	text-align: center;
	font-size: 40px;
	margin:3% 0%;
	color:#fff;
	font-family:sans-serif;
}

nav.open{
  right: 0;
  transition: right 400ms ease-in;
}

nav a:hover{
	color:yellow;
}

label { display: block; padding:10px 10px 0px; text-align:left; }
#menu{display: none;
}

#menu:checked + nav {
  right: 0;
}

<label for='menu'>MENU</label>

<input id='menu' type='checkbox'/>

<nav>
  <a href='#!'>LINK 1</a>
  <a href='#!'>LINK 2</a>
  <a href='#!'>LINK 3</a>
  <a href='#!'>LINK 4</a>
<nav>

javascript html css3

asked by anonymous 15.02.2016 / 18:35

1 answer

Installing JDK on ubuntu linux Function in hyperlink

score 3 · Answer 1

If I understood correctly what you needed, it would look like this:

$('.burger').on('click', function() {
  return $(this).toggleClass('open');
});

.burger {
  display: block;
  position: absolute;
  width: 60px;
  height: 50px;
  top: 50%;
  left: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.burger.open div {
  background: none;
}
.burger.open div:before,
.burger.open div:after {
  top: 0;
}
.burger.open div:before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.burger.open div:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.burger.open:hover div:before {
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}
.burger.open:hover div:after {
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
.burger:hover:not(.open) div:before {
  top: -25px;
}
.burger:hover:not(.open) div:after {
  top: 25px;
}
.burger div,
.burger div:before,
.burger div:after {
  width: 100%;
  height: 10px;
  background: #222222;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.burger div {
  position: relative;
  margin: 20px auto 0;
}
.burger div:before,
div:after {
  content: "";
  position: absolute;
}
.burger div:before {
  top: -20px;
}
.burger div:after {
  top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><aclass="burger">
  <div></div>
</a>