Hej!
Jag har försökt följa en youtube guide om hur man gör Responsive Web Design för mobiler och får en meny. Har följt hans exempel till punkt och pricka och försökt flera gånger, både gått igenom filerna och startat helt från början, fast jag får det inte javascriptet att fungera.
Någon som ser något fel i javascriptet eller någon annan stans
Youtube filmen
screen.css
script.js
Jag har försökt följa en youtube guide om hur man gör Responsive Web Design för mobiler och får en meny. Har följt hans exempel till punkt och pricka och försökt flera gånger, både gått igenom filerna och startat helt från början, fast jag får det inte javascriptet att fungera.
Någon som ser något fel i javascriptet eller någon annan stans
Youtube filmen
HTML-kod:
<!doctype html> <html lang="se"> <head> <title>menytest</title> <meta charset="utf-8"> <link rel="stylesheet" media="screen, projection" href="screen.css"> <script src="script.js"></script> </head> <body> <div class="Container"> <span class="menu-trigger">MENY</span> <div class="nav-menu"> <ul class="clearfix"> <li><a href="#">meny 1</a></li> <li><a href="#">meny 1</a></li> <li><a href="#">meny 1</a></li> <li><a href="#">meny 1</a></li> <li><a href="#">meny 1</a></li> </ul> </div> </div> </body> </html>
screen.css
HTML-kod:
div.nav-menu {
background-color: #e7ecf2;
padding: 0 20px;
}
div.nav-menu ul {
margin:0;
padding:0;
}
div.nav-menu ul li {
list-style: none;
float: left;
}
div.nav-menu ul li a:link,
div.nav-menu ul li a:visited {
display: block;
font-size: 90%;
padding: 10px 25px 10px 0;
color: #305782;
text-decoration: none;
font-weight: bold;
}
.menu-trigger {
display: none;
}
@media screen and (max-width: 480px) {
.menu-trigger {
display: block;
color: #305782;
background-color; #d5dce4;
padding: 10px;
text-align: right;
font-size: 83%;
cursor: pointer;
}
div.nav-menu {
display: none;
}
div.nav-expanded {
display:block;
}
div.nav-menu ul li {
float:none;
border-bottom: 2px solid #d5dce4;
}
div.nav-menu ul li:last-child {
border: none;
}
}
script.js
HTML-kod:
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function)() {
jQuery(".nav-menu").slideToggle(400, function)() {
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});
