jQuery版侧边栏菜单 Minimalist Responsive Push Menu with jQuery and CSS3

jQuery侧边栏菜单实现

最新推荐文章于 2024-05-31 10:05:50 发布

原创最新推荐文章于 2024-05-31 10:05:50 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Javascript /Jquery / Bootstrap / Web 专栏收录该内容

434 篇文章

订阅专栏

本文介绍了一种使用jQuery和CSS3实现的响应式侧边栏菜单，该菜单通过简单的HTML结构结合jQuery动画效果实现页面内容的平滑推移。教程详细介绍了创建菜单所需的基本步骤，包括HTML结构设置、CSS样式定义及jQuery脚本编写。

A jQuery & CSS3 based off-canvas navigation menu that pushes the main page to the right when toggled.

How to use it:

1. Create an off-canvas menu with a close menu as follows.

<div class="menu"> 
  
  <!-- <a href="http://www.jqueryscript.net/menu/">Menu</a> icon -->
  <div class="icon-close"> <img src="close.png"> </div>
  
  <!-- Menu -->
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

2. Wrap your main content and the menu toggle button into a container.

<div class="main-content">
  <div class="icon-menu">
  Toggle Menu
  </div>
  ...
</div>

3. The basic CSS styles for the off-canvas menu.

body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.menu {
  left: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
}

4. Include the necessary jQuery library at the end of the document.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

5. Enable the push menu.

var main = function() {
  $('.icon-menu').click( function() {
    $('.menu').animate( {
    left: '0px'
  }, 200);

  $('body').animate( {
    left: '285px'
    }, 200); 
  });

  $('.icon-close').click( function() {
    $('.menu').animate( {
    left: '-285px'
  }, 200); 

  $('body').animate({
    left: "0px"
    }, 200);
  });
};


$(document).ready(main);

This awesome jQuery plugin is developed by renhades. For more Advanced Usages, please check the demo page or visit the official website.

下载: Minimalist-Responsive-Push-Menu-with-jQuery-CSS3

原文: http://www.jqueryscript.net/menu/Minimalist-Responsive-Push-Menu-with-jQuery-CSS3.html

本文: jQuery版侧边栏菜单 Minimalist Responsive Push Menu with jQuery and CSS3