使用js和css創建'滑入式'菜單

目前我創建的導航將包含多個圖標，當您單擊每個圖標時，菜單中的幻燈片將會出現。到目前爲止，這是我嘗試過的JavaScript和CSS。不幸的是，當我點擊我的圖標時似乎沒有發生。使用js和css創建'滑入式'菜單

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>Explore Canterbury</title> 

<style> 

.infoIcon { 
    background-image:url(img/information.png); 
    width:34px; 
    height:34px; 
    display: block; 
} 
} 
    </style> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/custom.css" rel="stylesheet"> 
    <script src="js/my-js.js"></script> 

    </head> 

    <body> 

    <div class="container"> 

     <!-- Static navbar --> 
     <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div id="navbar"> 
      <ul class="nav navbar-nav"> 
      <li><span class="LocIcon nav-toggle"></span></li> 
      </ul> 
      </div><!--/.nav-collapse --> 

      <form class="navbar-form" role="search"> 
      <div class="input-group"> 
       <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> 
      </div> 
      </form> 

     </div><!--/.container-fluid --> 
     </nav> 

    </div> <!-- /container --> 

     <div class="information-menu"> 
     <h1>Explore Canterbury</h1> 
     <p>Welcome to our website, please look around!</p>   
     </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

CSS

.information-menu { 
    position: fixed; 
    top: 0; 
    left:0; 
    width: 100%; 
    height: 100%; 
    background: #222; 
    text-align: left; 
    transform: translateX(-100%); 
    transition: transform 0.6s ease; 
} 

.information-menu.open{ 
    transform: translateX(0); 
}

的JavaScript

$(function(){ 

    $('.nav-toggle').on('click', fuction(){ 
     $('.information-menu').toggleClass('open'); 
    }); 
});

來源

2016-02-01 user3005003

我會那樣做wihtout使用CSS-轉換：

$(function(){ 

    $('.nav-toggle').on('click', function(){ 
     $('.information-menu').slideDown(600); 
    }); 
});

在形式方面開始滑動與width: 0px;

$(function(){ 

    $('.nav-toggle').on('click', function(){ 
     $(".information-menu").animate({width:'toggle'},350); 
    }); 
});

小提琴：https://jsfiddle.net/L7L1eb04/1/

來源

2016-02-01 16:51:27 osanger

我希望它在從左側滑出，我該怎麼改了slideDown什麼？ – user3005003

也是，在參數列表' – user3005003

開始於寬度：0px;獲取此控制檯錯誤'Uncaught SyntaxError：missing）並且像這樣做：'$（「。information-menu」）。animate（{width：'toggle'}，350）;' – osanger

我認爲主要的問題是隻是在代碼中的錯字。

試圖更改以下行：

$('.nav-toggle').on('click', fuction(){

到

$('.nav-toggle').on('click', function(){

我沒有測試你的完整代碼，而是一個片段似乎按預期方式工作。

UPDATE：

響應於OP評論，原碼，與校正的錯字，如下所示。它似乎按預期工作。運行代碼片段並點擊「Click Me！」嘗試。

$(function() { 
 

 
    $('.nav-toggle').on('click', function() { 
 
    $('.information-menu').toggleClass('open'); 
 
    }); 
 
});

.information-menu { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #222; 
 
    color: white; 
 
    text-align: left; 
 
    transform: translateX(-100%); 
 
    transition: transform 0.6s ease; 
 
} 
 
.information-menu.open { 
 
    transform: translateX(0); 
 
}

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

 
<div class="container"> 
 

 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <div id="navbar"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><span class="LocIcon nav-toggle">Click Me!</span> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 
     <form class="navbar-form" role="search"> 
 
     <div class="input-group"> 
 
      <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> 
 
     </div> 
 
     </form> 
 

 
    </div> 
 
    </nav> 
 

 
</div> 
 

 
<div class="information-menu"> 
 
    <h1>Explore Canterbury</h1> 
 
    <p>Welcome to our website, please look around!</p> 
 
</div>

來源

2016-02-01 17:03:13 Roberto

啊，是的，哎呀！仍然似乎沒有爲我工作，雖然 – user3005003

@ user3005003 - 請參閱上面的更新。 – Roberto

使用js和css創建'滑入式'菜單

回答

相關問題