分享一个手机隐藏导航，点击出现，点击隐藏

来源：互联网发布：王乐平1368单词淘宝编辑：程序博客网时间：2024/06/06 03:05

分享一个手机隐藏导航，点击出现，点击隐藏。

如下图：

代码如下：

(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 space

html如下：

<!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下载

0 0