我怎樣才能實現這個導航使用jquery toggle

目前我已經使用css3的目標功能做了這方面的導航，但我想知道我怎麼可以做到這一點與jquery沒有改變任何干擾的佈局，請幫助儘快possilble 這裏是代碼我怎樣才能實現這個導航使用jquery toggle

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html" charset="utf-8"> 
<style type="text/css"> 
@-webkit-keyframes nav { 
    from {left:-100px;opacity: 0;} 
    to {left:0px;opacity:1;} 
} 
@keyframes nav{ 
    from {left:-100px;opacity: 0;} 
    to {left:0px;opacity:1;} 
} 

body { 
margin:0; 
padding:0; 
background-color:#EFEBE9; 
} 
.navigate { 
width:100%; 
height:100px; 
background-color:#FFF; 
padding-bottom:1px solid #F6F6F6; 
display:inline-block; 
position:fixed; 
} 
.navigate > .navicon { 
width:2em; 
height:100px; 
background-color:#1565C0; 
color:#FFF; 
font-size:4em; 
text-align:center; 
} 
.navigate > .navicon > a { 
text-decoration:none; 
color:#FFF; 
} 
.menu { 
display:none; 
} 
.menu:target { 
display:table; 
background-color:#0D47A1; 
} 
nav { 
width:40%; 
height:100%; 
background-color:#1565C0; 
position:absolute; 
-webkit-animation-name:nav; 
    -webkit-animation-duration: 0.5s; 
    animation-name:nav; 
    animation-duration: 0.5s; 
} 
.closebtn { 
color:#FFF; 
font-size:2.5em; 
margin:.3em; 
float:right; 
text-decoration:none; 
} 
.closebtn > a { 
text-decoration:none; 
font-size:1em; 
color:#FFF; 
} 



</style> 
</head> 
<body> 
<div class="navigate"> 
<div class="navicon" onclick="window.location.href='#menu';" >☰</div> 
</div> 
<div class="menu" id="menu"> 
<nav> 
<div class="closebtn"><a href="">✖</a></div> 
</nav> 
</div> 
</body> 
</html>

來源

2015-11-03 Suhail Invento

請檢查http://jsfiddle.net/s1g5ccty/1/ – guradio

嗨，我已經張貼下面的答案。我修改了你的CSS，並使用過渡效果+ jQuery而不是動畫。希望它可以幫助你。 – dunli

我試着修改你的css代碼並添加了一些jquery。

$('.navicon').click(function(){ 
    $('#menu nav').addClass('nav-open'); 
}); 
$('#menu .closebtn').click(function(){ 
    $('#menu nav').removeClass('nav-open'); 
});

在此請看：http://jsfiddle.net/btgqh3oe/1/

來源

2015-11-03 02:36:41 dunli

嘿謝謝，但你可以做一個這樣的筆，所以我可以下載它 - 一個簡單的方法 –

@SuhailInvento這是我從小提琴創建的筆我做的：http://codepen.io/anon/pen/yYxVdO – dunli

$('.menu').hide(); 
$('.navicon').click(function() { 
    $('.menu').toggle('slow'); 
})

使用hide()隱藏菜單

然後使用toggle()顯示和隱藏按鈕菜單中單擊

demo

來源

2015-11-03 02:22:21 guradio

我怎樣才能實現這個導航使用jquery toggle

回答

相關問題