Javascript 创建一个'；滑入'；使用js和css的菜单_Javascript_Jquery_Html_Css

Javascript 创建一个'；滑入'；使用js和css的菜单

javascript jquery html css

Javascript 创建一个'；滑入'；使用js和css的菜单,javascript,jquery,html,css,Javascript,Jquery,Html,Css,目前，我正在创建我的导航，它将由几个图标组成，当你点击每一个图标时，就会出现一个滑入菜单。到目前为止，这是我尝试过的javascript和css。不幸的是，当我点击我的图标时，似乎什么都没有发生 <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name

目前，我正在创建我的导航，它将由几个图标组成，当你点击每一个图标时，就会出现一个滑入菜单。到目前为止，这是我尝试过的javascript和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>

javascript

$(function(){

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

我会这样做，但不使用css转换：

    $(function(){

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

从侧面滑入，以

宽度开始：0px
    $(function(){

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

小提琴手：
我认为主要问题只是代码中的一个输入错误
正在尝试更改以下行：
$('.nav-toggle').on('click', fuction(){

到
我没有测试您的完整代码，但一个代码片段似乎如预期的那样工作
更新：
作为对OP注释的回应，更正了输入错误的原始代码如下所示。它似乎像预期的那样工作。运行代码段并单击“单击我！”进行尝试

$（函数（）{
$（'.nav toggle'）。打开（'click'，function（）{
$（'.information menu'）.toggleClass（'open'）；
});
});
。信息菜单{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：#222；
颜色：白色；
文本对齐：左对齐；
转化：translateX（-100%）；
过渡：0.6s轻松过渡；
}
.信息菜单.打开{
变换：translateX（0）；
}


点击我！


探索坎特伯雷
欢迎访问我们的网站，请四处看看
我希望它从左侧滑入，我要将slideDown更改为什么？从宽度开始：0px；这样做：$（“.information menu”）.animate（{width:'toggle'}，350）另外，在参数列表后获取控制台错误“uncaughtsyntaxerror:missing”）请稍等，我会处理它现在获取此错误我的js.js:1uncaughtreferenceerror:$未定义hh是的，哇！但似乎对我还是不起作用
$('.nav-toggle').on('click', fuction(){

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