I don't what is going on, but if anyone can help me that could be great. So I'm trying to create a navigation menu that is off-canvas for mobile layouts, but I've been running into issues; and I'm at a dead end right now. If someone can take a look at my code and point me in the right direction that would be great.
The html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../scripts/javascript/mobilnavprotoscript.js"></script>
<script src="../scripts/javascript/modernizr.custom.64630.js"></script>
<link href="../css/mobilnavstyles.css" rel="stylesheet" type="text/css" media="screen"/>
<title>Welcome to My Domain</title>
</head>
<body>
<nav id="toggle" class="main">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Audio</a></li>
<li><a href="#">Other Work</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
<div id="wrapper">
<div class="mobilmenu"><a href="#toggle" class="nav-link"><i class="fa fa-bars"></i></a></div>
<header>
<h1>This is a placeholder <br />
for header</h1>
</header>
<div id="content">
<article class="content-main">
<section>
<h2>Heading goes here...</h2>
<time datetime="2014-05-21T02:43:00">Officialy Posted On May 21<sup>st</sup> 2:35 A.M.</time>
<p>Content will go here...</p>
</section>
</article>
<aside>
<p>More content soon...</p>
</aside>
</div>
<footer>
<div class="copyright">
<span>All rights reserved 2014.</span>
</div>
<nav class="foot">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Audio</a></li>
<li><a href="#">Other Work</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
Here's the css that's neccesary for what I'm trying to do (Please do let me know if there's any other parts of my css you need to see.):
nav#toggle
{
position: absolute;
top: 0;
bottom: 0;
width: 15.750em;
left: -15.750em;
transform: translate(0px, 0px);
transition: 0.15s ease;
height: 100%;
}
nav#toggle.active
{
transform: translate(15.750em, 0px);
}
nav.main
{
margin: 0;
padding: 0;
font-family: 'bebas_neueregular',sans-serif;
box-shadow: 0px 2px 3px #393333;
background-color: #950707;
}
nav.main ul
{
display: flex;
flex-direction: column;
text-align: right;
font-size: 1.45em;
list-style: none;
margin: 0;
padding: 0;
}
nav.main ul li
{
border-bottom: 1px solid #af1b1b;
}
nav.main ul li:first-child
{
border-top: 1px solid #af1b1b;
}
nav.main ul li a
{
display: block;
text-decoration: none;
color: inherit;
padding: 0.35em;
}
nav.main ul li a:hover
{
background-color: #ffffff;
}
div.mobilmenu
{
background-color: #950707;
}
div.mobilmenu a
{
text-decoration: none;
color: inherit;
}
div.mobilmenu a i
{
font-size: 1.75em;
padding: 0.32em;
}
div.mobilmenu a i:hover
{
background-color: #ffffff;
transition: 325ms ease;
}
#wrapper
{
display: flex;
flex-direction: column;
transform: translate(0px, 0px);
transition: 0.15s ease;
}
#wrapper.active
{
transform: translate(15.750em, 0px);
}
Here's the jQuery script I'm using:
$(document).ready(function () {
$('a.nav-link').click(function () {
$('nav#toggle').toggleClass('active');
$('#wrapper').toggleClass('active');
});
});
is this what you want to do? http://jsfiddle.net/qsHRh/2/
$(document).ready(function () {
$('a.nav-link').click(function () {
$('nav#toggle').toggleClass('active');
$('#wrapper').toggleClass('active');
});
$('.nav-link').click(function(){
$('#toggle').animate({left:'0px'},200);
});
$(document).click(function(e){
if (!$('#toggle, .nav-link').is(e.target) && $('#toggle').has(e.target).length === 0){
$('#toggle').animate({left:'-15.750em'},200);
}
});
});
UPDATE:
you need to wrap your whole page into a div, let's call it #whole, and then give it the style, position:relative; left:0; top:0;
position:relative; left:0; top:0;
and then shift the whole page as needed. check the fiddle below:
I think this is what you need. if not, let me know.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.