I'm studying Javascript and I decided to practice my knowledges by coding what I have studied since I started Javascript. My target is to create a responsive nav-bar that in a max-with: 768px display views a nav-bar with hidden elements. When you click on the "icon" ( it's not an icon, but these are three span tags) the elements belonged to nav-bar are shown. For doing this, obviously I have to use Events. I wrote the code below. Could you help me to understand the mistakes?
var bar = document.querySelectorAll('.header__icon-bar');
var menu = document.querySelectorAll('.header__menu');
function openingclick(e){
if (menu[0].className == 'header_menu'){
menu[0].className = 'is-open';
}
else if ( menu[0].className == 'is-open'){
menu[0].className='header__menu';
}
e.preventDefault();
}
bar[0].addEventListener('click', openingclick, false);
body{
background-color: #eee;
}
.header{ background: #333; }
.header__logo{ color: #fff; float: left; display: block; padding: 10px;}
.header__menu{ float: right; padding: 0px; margin: 0px;}
.header__menu__item{display: inline-block; }
.header__menu__item a{color: #fff; display: block; padding: 10px; text-decoration: none; }
.header__menu__item a:hover{ background: #000;}
.header__icon-bar { display: block; float: right; padding: 10px; display: none;
}
.header__icon-bar span{ display: block; height: 3px; width: 30px; background: white; margin: 5px;
}
/*tabled*/
@media(max-with: 998px){
}
/*smartphone*/
@media(max-width: 768px){
.header__icon-bar{ display: block; }
.header__menu { width: 100%; height: 0px; overflow: hidden;}
.header__menu__item{ display: block;}
.is-open{ height: 250px; overflow: auto; display: block;
}
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
<!DOCTYPE html>
<html>
<head><title></title>
<link href="http://ift.tt/2kTnysT" type="text/css" rel="stylesheet">
<link href="mycss.css" type="text/css" rel="stylesheet">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header class="header clearfix">
<a class="header__logo" href="esempio.com">LOGO</a>
<a href="" class="header__icon-bar">
<span></span>
<span></span>
<span></span>
</a>
<ul class="header__menu">
<li class="header__menu__item"><a href="">item</a></li>
<li class="header__menu__item"><a href="">item</a></li>
<li class="header__menu__item"><a href="">item</a></li>
<li class="header__menu__item"><a href="">item</a></li>
<li class="header__menu__item"><a href="">item</a></li>
<li class="header__menu__item"><a href="">item</a></li>
</ul>
</header>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire