创建可折叠侧边菜单

时间：2016-01-29 05:22:06

标签： javascript jquery html css

我想要实现的效果是： https://gesso-theme.myshopify.com/
当您单击左上角的可折叠菜单时。

我坚持并且想要实现的目标是：

1。）当菜单移入时，如何使菜单似乎将正文内容向右移动？ （这不重要，但很高兴知道）
2。）为什么我的影子div会隐藏我的身体内容到浏览器的全宽和高度？
3。）无论身体内容如何，​​我都希望能够实现这一目标 4。）我想在没有插件或引导程序的情况下实现这一点，只需javascript，jquery，css和html，这样我就能真正了解正在发生的事情。

＆＃13;
＆＃13; 
$(".show-side-menu").click(function(){
$(".container").toggle();
$(".darkness").toggle();
});
＆＃13; 
*{
  margin:0;
  padding:0;
}
html, body{
  height: 100%;
    		margin: 0;
}
.container{
height:100%;
width:200px;
background:white;
position:absolute;
top:0;
bottom:0;
display:none;
}
a.show-side-menu{
  background:blue;
  color:white;
  font-size:20px;
  z-index:10;
  position:absolute;
}
.random-content{
height:500px;
width:500px;
margin:10px;
background:purple;
}
.darkness{

  background:rgba(136, 114, 114, 0.65);
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  display:none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="show-side-menu">Show</a>
<div class="darkness"></div>
<div class="container">

</div>

<div class="random-content">
  
</div>

<div class="random-content">
  
</div>
<div class="random-content">
  
</div>
<div class="random-content">
  
</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

  1. 换身体 的 jquery的 

    $('.darkness').toggle(function () {
 $(".random-content").addClass("moveLeft");
 }, function () {
  $(".random-content").removeClass("moveLeft");
});

    <强> CSS 

    .random-content.moveLeft {
   transform: translateX(200px); 
}

  2. 要覆盖整个浏览器窗口，请将 .darkness 的css从位置：绝对; 更改为位置：已固定;

    3. 它应该解决你的问题。

答案 1 :(得分：0)

使用最简单的html和css，这是我可以给你的

＆＃13;
＆＃13; 
$(function() {
	$(".ui-menu-toggle").click(function() {
  	$(".ui-menu").toggleClass("open");
    console.info($(".ui-menu"));
  });
});
＆＃13; 
.ui-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1001;
}
.ui-menu > .ui-menu-overlay {
  opacity: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  position: fixed;
  background: #000;
  transition-property: opacity;
  transition-duration: 0.2s;
}
.ui-menu > .ui-menu-container {
  background-color: #fff;
  box-shadow: 0 -1px 24px rgba(0, 0, 0, 0.4);
  height: 100%;
  left: -340px;
  position: absolute;
  width: 320px;
  transition-property: transform;
  transition-duration: 0.3s;
} 

.ui-menu.open {
  display: block;
}

.ui-menu.open > .ui-menu-overlay {
  opacity: 0.3;
}
.ui-menu.open > .ui-menu-container {
  transform: translateX(340px);
} 

.ui-body {
  background: pink;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  transition-property: transform;
  transition-duration: 0.3s;  
}

.ui-menu.open > .ui-body {
  transform: translateX(320px);
  z-index: -1;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ui-menu">
	<div class="ui-menu-overlay"></div>
	<div class="ui-menu-container">
    <a href="#" class="ui-menu-toggle">close menu</a>
		menu content
	</div>
  <div class="ui-body">
    <a href="#" class="ui-menu-toggle">open menu</a>
    body content
  </div>  
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以执行以下操作：http://codepen.io/kevinkl3/pen/ZQoNxm 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="wrapper">
  <div class="menu">
    <h2 align="center">Menu</h2>
  </div>
  <div class="container">
      <a href="#" class="show-side-menu">Show</a>
    <div class="random-content">
    </div>
    <div class="random-content">
    </div>
    <div class="random-content">
    </div>
    <div class="random-content">
    </div>
    <div class="darkness"></div>
  </div>

</div>

CSS：

body{
  font-family: sans-serif;
}

html, body{
  margin: 0px;
}

.menu{
  height:100%;
  width:240px;
  background:white;
  position:fixed;
  left: 0px;
  top:0px;
  bottom:0px;
}
a.show-side-menu{
  background:blue;
  color:white;
  font-size:20px;
  z-index:10;
  position:fixed;
  top:5px;
  left:5px;
  transition: all 0.35s;
}

.wrapper.menu-open a.show-side-menu{
  left: 245px;
}

.random-content{
  height:500px;
  width:500px;
  margin:10px;
  background:purple;
}
.darkness{
  background:rgba(0, 0, 0, 0.8);
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  opacity: 0;
  transition: all 0.35s;
  pointer-events:none;
}

.wrapper .container{
  position:relative;
  margin-left:0px;
  transition: all 0.35s;
  padding-top:20px;
}

.wrapper.menu-open .darkness{
  opacity: 1;
}

.wrapper.menu-open .container{
  margin-left:240px;
}

.wrapper:not(.menu-open) .menu{
  margin-left:-240px;

}

.wrapper .menu{
  transition: all 0.35s;
  margin-left:0px;
  z-index:9999;
}

JS：

$(".show-side-menu").click(function(){
  var wrapper = $(".wrapper");
  wrapper.toggleClass('menu-open');
  if(!wrapper.hasClass('menu-open'))
    $(".show-side-menu").text('show')
  else
    $(".show-side-menu").text('hide')
});

答案 3 :(得分：0)

将一个js文件添加到jquery.transit.min.js

更改Function 

$(document).ready(function () {

            $(document).off('click', '.show-side-menu');
            $(document).on('click', '.show-side-menu', function () {
                $(this).addClass('active');
                $(this).html('Hide');
                $(this).transition({ x: '200px' });
                $(this).removeClass('show-side-menu');
                $(".container").animate({ left: 0 });
                $(".darkness").show();
                $(".random-content").transition({ x: '200px' });
            });
            $(document).off('click', '.active');
            $(document).on('click', '.active', function () {
                $(this).removeClass('active');
                $(this).html('Show');
                $(this).transition({ x: '0px' });
                $(this).addClass('show-side-menu');
                $(".container").animate({ left: "-=200px" });
                $(".random-content").transition({ x: '0px' });
                $(".darkness").hide();
            });
        });
 * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            margin: 0;
        }

        .container {
            height: 100%;
            width: 200px;
            background: white;
            position: absolute;
            top: 0;
            bottom: 0;
            left: -200px;
z-index:9;
        }

        a.show-side-menu, a.active {
            background: blue;
            color: white;
            font-size: 20px;
            z-index: 10;
            position: absolute;
        }

        a.active {
            background: red;
        }

        .random-content {
            height: 500px;
            width: 500px;
            /*margin: 10px;*/
            background: purple;
        }

        .darkness {
            background: rgba(136, 114, 114, 0.65);
            position: fixed;
            height: 100%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: none;
z-index:5;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<a href="#" class="show-side-menu">Show</a>
    <div class="darkness"></div>
    <div class="container">

    </div>

    <div class="random-content">

    </div>

    <div class="random-content">

    </div>
    <div class="random-content">

    </div>
    <div class="random-content">

    </div>

相关问题
最新问题