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菜單問題

回答

相關問題