JQuery CSS菜单问题

我正在尝试创建一个滑动菜单，它给了我一些麻烦。JQuery CSS菜单问题

不是任何CSS和JQuery大师的任何延伸，寻找一些指针，特别是与JQ/JS切换看起来好多了，但无法让它适应一个类（为什么我有一些CSS类与“ -on“）来显示菜单。

我浏览了一些在线指南，但他们并没有按照我的意愿去做，而且当它是复制面食时，我并没有完全理解它们。

试图从头开始构建我自己的，但现在灰色出现在点击，但导航没有与它一起出现。

主要目标是创建一个基本滑动菜单，将内容“推”到右侧。

标记

<head> 
    <meta name="viewport" content="width=device-width" /> 
    <link href="~/Content/slide.css" rel="stylesheet" type="text/css"/> 
    <script src="~/Scripts/jquery-1.5.1.min.js"></script> 
    <script> 
     $(function() { 
      $(".burger_on").click(function() { 
       $(".page-wrap").removeClass("main-nav"); 
       $(".push-wrap").removeClass("push-wrap"); 
       $(".page-wrap").addClass("main-nav-on"); 
       $(".push-wrap").addClass("push-wrap-on"); 
       return false; 
      }); 
     }); 

     $(function() { 
      $(".burger_off").click(function() { 
       $(".page-wrap").removeClass("main-nav-on"); 
       $(".push-wrap").removeClass("push-wrap-on"); 
       $(".page-wrap").addClass("main-nav"); 
       $(".push-wrap").addClass("push-wrap"); 

       return false; 
      }); 
     }); 
    </script> 
    <title></title> 
</head> 
<body> 
    <div class="page-wrap"> 
     <div class="main-nav"> 
      <ul> 
       <li class="nav-item">About</li> 
       <li class="nav-item">Contact</li> 
       <li class="nav-item">Home</li> 
      </ul> 
     </div> 
     <div class="push-wrap"> 
      <button class="burger_on">☰</button> 
      <button class="burger_off">☰</button> 
      <div class="content"> 
       @RenderBody() 
      </div> 
     </div> 
    </div> 
</body>

CSS

body { 
    font-family: Arial; 
    background-repeat: repeat-x; 
    background-position: center top; 
    background-color: green; 
    font-size: 0.8em; 
} 

.page-wrap { 
    height:100%; 
    width:100%; 
} 
.main-nav { /* change width to 20% when menu active*/ 
    width:0%; 
    transition: 0.3s ease; 
    background-color: darkgrey; 
    height:100%; 
} 
.main-nav-on { 
    float: left; 
    width:20%; 
    transition: 0.3s ease; 
    background-color: darkgrey; 
    height: 100%; 
} 
.push-wrap { /* change width to 80% when menu active*/ 
    width:100%; 
    height: 100%; 
} 
.push-wrap-on { 
    width:80%; 
    height: 100%; 
}

来源

2015-06-05 JammAndTea

对不起，可能需要一些背景 - 也这样做停止的按钮，所有的工作。 – JammAndTea

哇，这比我一直在寻找的，谢谢你，把它当作答案，我会接受。 – JammAndTea

欢呼@ humble.rumble – JammAndTea

首先，在头脚本需要一个$(document).ready()包装所以DOM被加载之前，他们不会执行。

其次，你可以设置一个标志变量来保存菜单的状态，而不是查询CSS。

第三，最简单的方法是使用绝对定位并改变左边的属性。

（Demo）

$(document).ready(function() { 
    var open = false 
    $("#burger").click(function() { 
     if (!open) { // open it 
      open = true; 
      $('#off-canvas').css('left', '0px'); 
      $('#canvas').css('left', '200px'); 
     } else { // close it 
      open = false; 
      $('#off-canvas').css('left', '-200px'); 
      $('#canvas').css('left', '0px'); 
     } 
    }); 
});

引用单个元素时，应使用唯一的ID，而不是类。

如果你想#canvas来调整，而不是移动，在#canvas

html, body { 
    margin: 0; 
    height: 100%; 
} 
.page-wrap { 
    height:100%; 
} 
#off-canvas { 
    position: absolute; 
    left: -200px; 
    background-color: darkgrey; 
    height:100%; 
    width: 200px; 
    transition: left 0.3s ease-in-out; 
} 
#canvas { 
    left: 0px; 
    width: 100%; 
    position: absolute; 
    height: 100%; 
    overflow: auto; 
    transition: left 0.3s ease-in-out; 
}

设置right: 0;这里是什么HTML最终看起来像

<div id="off-canvas"> 
    <ul> 
     <li class="nav-item">About</li> 
     <li class="nav-item">Contact</li> 
     <li class="nav-item">Home</li> 
    </ul> 
</div> 
<div id="canvas"> 
    <button id="burger">☰</button> 
    <div class="content"> 
     @RenderBody() 
    </div> 
</div>

来源

2015-06-05 16:59:13

您正在寻找这样的事情？

$(".menu-button").click(function(){ 
 
    $("nav").animate({width:'toggle'}, 300); 
 
});

body, html { 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
.menu { 
 
    background-color: Gray; 
 
    width: 100%; 
 
    padding: 5px 0px 5px 10px; 
 
} 
 

 
.menu-button { 
 
    font-size: 1.5em; 
 
} 
 

 
nav { 
 
    background-color: LightGray; 
 
    width: 100px; 
 
    height: 100%; 
 
    padding: 15px; 
 
    float: left; 
 
} 
 

 
nav > a { 
 
    line-height:150%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
    <span class="menu-button">☰</span> 
 
</div> 
 
<nav> 
 
    <a href="/">About</a> 
 
    <a href="/">Contact</a> 
 
    <a href="/">Home</a> 
 
</nav> 
 
<div>Hello</div>

来源

2015-06-05 16:59:23

JQuery CSS菜单问题

回答

相关问题