分享一個手機隱藏導航，點擊出現，點擊隱藏。
如下圖：
js
代碼如下：
(function($){
$(function(){
var menu_head = $('ul.side-menu h2.title').height();
var item_height = $('ul.side-menu li a').height();
// Untoggle menu on click outside of it
$(document).mouseup(function (e) {
var container = $('ul.side-menu');
if ((!container.is(e.target) && container.has(e.target).length === 0) &&
(!($('a.menu-icon').is(e.target)) && $('a.menu-icon').has(e.target).length === 0)) {
container.removeClass("in");
$('body, ul.side-menu').removeClass("open");
$('ul.side-menu li').css("top", "100%");
$('ul.side-menu h2').css("top", "-60px");
}
});
$("a.menu-icon").click(function(e) {
e.preventDefault();
if ($('ul.side-menu, body').hasClass('open')) {
$('ul.side-menu').removeClass('open');
$('body').removeClass('open');
// Reset menu on close
$('ul.side-menu li').css("top", "100%");
$('ul.side-menu h2').css("top", "-60px");
}
else {
$('ul.side-menu').addClass('open');
$('body').addClass('open');
$('ul.side-menu h2').css("top", 0);
$('ul.side-menu li').each(function() {
// Traditional Effect
if ($(this).hasClass('link')) {
var i = ($(this).index() - 1)
var fromTop = menu_head + (i * item_height);
var delayTime = 100 * i;
$(this).delay(delayTime).queue(function(){
$(this).css("top", fromTop);
$(this).dequeue();
});
}
// Metro Effect
else if ($(this).hasClass('metro')) {
var row_i = ($(this).parent().parent().index() - 1); // Vertical Index
var col_i = $(this).index(); // Horizontal Index
var fromTop = menu_head + (row_i * 125);
var fromLeft = col_i * 125;
var delayTime = (row_i * 200) + Math.floor((Math.random() * 200) + 1);
console.log(delayTime);
$(this).css("left", fromLeft);
$(this).delay(delayTime).queue(function(){
$(this).css("top", fromTop);
$(this).dequeue();
});
}
});
}
})
}); // end of document ready
})(jQuery); // end of jQuery name spacehtml如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Faded Text Effect</title>
<link href="style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div id="home" class="container">
<div class="header">
<a href="http://webdesigncrowd.com" class="btn">WebDesignCrowd</a>
<a href="" class="btn">Back to Article</a>
<h1>Faded Text Effect</h1>
<a href="index.html" class="btn btn-small active">Waterfall</a>
<a href="metro.html" class="btn btn-small">Metro Boxes</a>
<a class="menu-icon" href="#"><i class="icon-reorder"></i></a>
<ul class="side-menu">
<h2 class="title">Menu</h2>
<li class="link"><a href="#">Google</a></li>
<li class="link"><a href="#">Twitter</a></li>
<li class="link"><a href="#">Facebook</a></li>
<li class="link"><a href="#">GitHub</a></li>
<li class="link"><a href="#">Reddit</a></li>
<li class="link"><a href="#">Tumblr</a></li>
</ul>
</div>
<div class="content">
<p class="excerpt">Lo
<span class="text-fader"><a class="reveal" href="#"><i class="icon-chevron-down"></i></a></span>
</p>
</div>
</div>
<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/init.js"></script>
</body>
</html>
demo下載