javascript - Responsive menu won't close -
i have problems responsive menu. can't go again when click on link. have used ajax , jquery make menu sites stay on front page, can't figure out wrong?
the site can seen here: www.sverkel.dk/m_index.php
html:
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/menu.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>untitled document</title> </head> <body> <div> <center><img src="http://oi60.tinypic.com/2ykaurc.jpg"></center> </div> <div class="handle"><img src="http://oi58.tinypic.com/mn0w95.jpg"></div> <nav> <ul id="nav"> <li><a href="index">forside</a></li> <li><a href="produkter">produkter</a></li> <li><a href="priser">priser</a></li> <li><a href="om">om os</a></li> <li><a href="kontakt">kontakt</a></li> </ul> </nav> <section> <script> $('.handle').on('click', function(){ $('nav ul').toggleclass('showing'); }); </script> </section> <div class="tekst" align="center" id="content"></div> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="js/general.js"></script> </div> </body> </html> css:
body { margin: 0; padding: 0; font-family: arial; } img, object { max-height: 100%; max-width: 100%; } .i { text-align: left; padding: 1px 15px; } { text-decoration: none; color:inherit; } nav ul { background-color: #a34949; overflow: hidden; color: white; padding: 0; text-align: center; margin: 0; -webkit-transition: max-height 0.4s; -ms-transition: max-height 0.4s; -moz-transition: max-height 0.4s; -o-transition: max-height 0.4s; transition: max-height 0.4s; } nav ul li { display:inline-block; padding: 20px; border-top:1px solid #fff; } nav ul li:hover { background-color: #ae3a43; } section { line-height: 1.5em; font-size: 0.9em; padding: 10px; width: 75%; margin: 0 auto; } .handle { width: 100%; background: #a34949; margin: 0 auto; text-align: left; box-sizing:border-box; padding: 10px 10px; cursor: pointer; color: white; display: block!important; } @media screen , (max-width: 750px) { nav ul { max-height: 0; } .showing{ max-height: 20em; } nav ul li { box-sizing: border-box; width: 100%; padding: 15px; text-align: left; } .handle { display:block; } }
final
html:
<div> <div> <center><img src="http://oi60.tinypic.com/2ykaurc.jpg"></center> </div> <div class="handle"><img src="http://oi58.tinypic.com/mn0w95.jpg"> <nav> <ul id="nav"> <li><a href="index">forside</a></li> <li><a href="produkter">produkter</a></li> <li><a href="priser">priser</a></li> <li><a href="om">om os</a></li> <li><a href="kontakt">kontakt</a></li> </ul> </nav> </div> <div class="tekst" align="center" id="content"></div> </div> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="js/general.js"></script> general.js
$(document).ready(function() { // toggle menu $('.handle').on('click', function(){ $('nav ul').toggleclass('showing'); }); // load index page $('#content').load('content/index.php'); // load clicked page $('#nav').on('click', 'a', function(e) { // trigger toggle closes $('.handle').trigger('click'); var page = $(this).attr('href'); // load $('#content').load('content/' + page + '.php'); return false; }); }); 
Comments
Post a Comment