-2

Я реализую Bootstrap Navbar, но это не отображается нормально и отображается ошибка на моей консоли говоряпочему sideNav функция не работает в загрузчике

enter image description here

Я попытался изменить порядки моего сценария грешить головки раздела но не избавился от этой проблемы. Кто-нибудь поможет мне в выяснении моей ошибки?

Код

<head> 
    <meta charset="UTF-8"> 
    <title></title> 

    <!-- Ajax Library 1.11.3 --> 
    <script src="assets/js/ajax_1.11.3.js"></script> 

    <!-- Tether for Bootstrap --> 
    <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> 

    <!-- Bootstrap --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 

    <!-- Including js file for Animations Effects--> 
    <script type="text/javascript" src="assets/js/jquery_2.1.3_animation.js"></script> 
    <script type="text/javascript" src="assets/js/jquery-ui_1.11.3.js"></script> 

    <!--Including both these files from Html_respond master--> 
    <script src="assets/js/html5shiv.min.js"></script> 
    <script src="assets/js/respond.min.js"></script> 

    <!-- Including js file for Fonts--> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"> 

    <!-- Including Files for Bootstrap Form Validations --> 
    <script src="assets/js/form_Validation.js"></script> 
    <script src="assets/js/formvalidation_bootstrap.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('.button-collapse').sideNav(); 
     }); // end of document ready 
    </script> 
</head> 
<body> 
    <!--Navbar--> 
    <nav class="navbar navbar-dark bg-primary"> 
     <!--Collapse button--> 
     <a href="#" data-activates="mobile-menu" class="button-collapse"><i class="fa fa-bars white-text"></i></a> 
     <!--Content for large and medium screens--> 
     <div class="navbar-desktop"> 
      <!--Navbar Brand--> 
      <a class="navbar-brand" href="#">Navbar</a> 
      <!--Links--> 
      <ul class="nav navbar-nav"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Features</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Pricing</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">About</a> 
       </li> 
      </ul> 
      <!--Search form--> 
      <form class="form-inline pull-xs-right"> 
       <input class="form-control" type="text" placeholder="Search"> 
      </form> 
     </div> 
     <!-- Content for mobile devices--> 
     <div class="navbar-mobile"> 
      <ul class="side-nav" id="mobile-menu"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Features</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Pricing</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">About</a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
    <!--/.Navbar--> 
</body> 
+4

Там нет компонента "sideNav" в Bootstrap – ZimSystem

+0

@Skelly Ооо на самом деле! Как и где я буду включать это? –

+0

@Skelly Я скопировал код навигатора из какого-то внешнего источника, который не знает, включать ли этот компонент в код навигатора. –

ответ

0

Дважды Навигационное меню (кнопка SideNav выдвижная) Демо

// Initialize collapse button 
 
$(".button-collapse").sideNav(); 
 
// Initialize collapsible (uncomment the line below if you use the dropdown variation) 
 
$('.collapsible').collapsible();
body { 
 
     background: url("http://mdbootstrap.com/images/regular/nature/img%20(23).jpg") no-repeat center center fixed; 
 
     background-size: cover; 
 
}
<!-- Material Design Icons --> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 

 
<!-- Font Awesome --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 

 
<!-- Bootstrap core CSS --> 
 
<link href="http://mdbootstrap.com/live/_doc/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<!-- Material Design Bootstrap --> 
 
<link href="http://mdbootstrap.com/live/_doc/css/mdb.min.css" rel="stylesheet"> 
 

 
<!-- SideNav slide-out button --> 
 
<a href="#" data-activates="slide-out" class="navbar-brand button-collapse"><i class="material-icons">menu</i></a> 
 
<!--/. SideNav slide-out button --> 
 

 

 
    <!-- SCRIPTS --> 
 
    <!-- JQuery --> 
 
    <script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/jquery.min.js"></script> 
 

 
    <!-- Bootstrap core JavaScript --> 
 
    <script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/bootstrap.min.js"></script> 
 

 
    <!-- Material Design Bootstrap --> 
 
    <script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/mdb.min.js"></script> 
 

 

 
<!-- Sidebar navigation --> 
 
<ul id="slide-out" class="side-nav admin-side-nav dark-side-nav"> 
 
<!-- Side navigation links --> 
 
<ul class="collapsible collapsible-accordion"> 
 
<li><a href="#intro" class="waves-effect waves-light"><i class="fa fa-home"></i> Home</a></li> 
 
      <li><a href="#" class="waves-effect waves-light"><i class="fa fa-money"></i> Sales</a></li> 
 
      <li><a href="#" class="waves-effect waves-light"><i class="fa fa-line-chart"></i> Conversion</a></li> 
 
      <li><a href="#" class="waves-effect waves-light"><i class="fa fa-users"></i> Website Traffic</a></li> 
 
      <li><a href="#" class="waves-effect waves-light"><i class="fa fa-search"></i> SEO</a></li> 
 
      <li><a href="#" class="waves-effect waves-light"><i class="fa fa-share-alt"></i> Social</a></li> 
 
     </ul> 
 
     <!--/. Side navigation links --> 
 

 
    </ul> 
 
    <!--/. Sidebar navigation --> 
 

 
    <!--Navbar--> 
 
    <nav class="double-navbar navbar navbar-fixed-top unique-color z-depth-1" role="navigation"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header pull-left"> 
 
       <!-- SideNav slide-out button --> 
 
       <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a> 
 
       <!--/. SideNav slide-out button --> 
 

 
      </div> 
 

 
      <!-- Navbar Icons --> 
 
      <ul class="list-inline pull-right text-center"> 
 
       <li><a href="#" class="waves-effect waves-light" data-toggle="modal" data-target="#contact-form"><i class="fa fa-question"></i><br><span>Help</span></a></li> 
 
       <li><a href="#" class="waves-effect waves-light" data-toggle="modal" data-target="#contact-form"><i class="fa fa-cogs"></i><br><span>Settings</span></a></li> 
 
       <li><a href="#" class="waves-effect waves-light" data-toggle="modal" data-target="#contact-form"><i class="fa fa-sign-out"></i><br><span>Logout</span></a></li> 
 

 
      </ul> 
 
      <!--/. Navbar Icons --> 
 
     </div> 
 
    </nav> 
 
    <!--/.Navbar--> 
 
    <div class="container"> 
 
     <div class="space-50" style="height: 300px"></div> 
 
     <h1 class="white-text">Scorll Down</h1> 
 
     <div class="space-50" style="height: 900px"></div> 
 
    </div>

Переключение навигации Demo.

// Initialize collapse button 
 
$(".button-collapse").sideNav(); 
 
// Initialize collapsible (uncomment the line below if you use the dropdown variation) 
 
$('.collapsible').collapsible();
body { 
 
\t background: url("http://mdbootstrap.com/images/regular/nature/img%20(4).jpg") no-repeat center center fixed; 
 
\t background-size: cover; 
 
} 
 

 
.top-nav-collapse { 
 
\t background-color: #3F729B !important; 
 
} 
 
/* Small Devices, Tablets */ 
 

 
@media only screen and (max-width: 768px) { 
 
\t .navbar { 
 
\t \t background-color: #3F729B !important; 
 
\t } 
 
}
<!-- Material Design Icons --> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 

 
<!-- Font Awesome --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 

 
<!-- Bootstrap core CSS --> 
 
<link href="http://mdbootstrap.com/live/_doc/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<!-- Material Design Bootstrap --> 
 
<link href="http://mdbootstrap.com/live/_doc/css/mdb.min.css" rel="stylesheet"> 
 

 
<!-- SCRIPTS --> 
 
<!-- JQuery --> 
 
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/jquery.min.js"></script> 
 

 
<!-- Bootstrap core JavaScript --> 
 
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/bootstrap.min.js"></script> 
 

 
<!-- Material Design Bootstrap --> 
 
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/mdb.min.js"></script> 
 

 

 
<!--Navbar--> 
 
<nav class="navbar primary-color"> 
 
\t <div class="container-fluid"> 
 
\t \t <div class="navbar-header"> 
 
\t \t \t <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> 
 
\t \t \t \t <span class="sr-only">Toggle navigation</span> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t </button> 
 
\t \t \t <a class="navbar-brand waves-effect waves-light" href="#">Brand</a> 
 
\t \t </div> 
 

 
\t \t <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> 
 
\t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t <li class="active"><a href="#" class="waves-effect waves-light">Link <span class="sr-only">(current)</span></a></li> 
 
\t \t \t \t <li><a href="#" class="waves-effect waves-light">Link</a></li> 
 
\t \t \t \t <li class="dropdown"> 
 
\t \t \t \t \t <a href="#" class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
\t \t \t \t \t <ul class="dropdown-menu" role="menu"> 
 
\t \t \t \t \t \t <li><a href="#">Action</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Another action</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Something else here</a></li> 
 
\t \t \t \t \t \t <li class="divider"></li> 
 
\t \t \t \t \t \t <li><a href="#">Separated link</a></li> 
 
\t \t \t \t \t \t <li class="divider"></li> 
 
\t \t \t \t \t \t <li><a href="#">One more separated link</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t \t <form class="navbar-form navbar-right" role="search"> 
 
\t \t \t \t <div class="form-group waves-effect waves-light"> 
 
\t \t \t \t \t <input type="text" class="form-control" placeholder="Search"> 
 
\t \t \t \t </div> 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t </div> 
 
</nav> 
 
<!--/.Navbar-->

+0

Но 1.11.3 уже прикрепленна наверху –

+0

Это файл jQuery или файл Ajax? –

+0

Это фактически