бутстрап гамбургер навбар не будет работать - PullRequest
Новая
       6

бутстрап гамбургер навбар не будет работать

0 голосов
/ 29 июня 2018

Я пытаюсь создать загрузочную навигационную панель с кнопкой для гамбургера, но она не работает, и я не уверен, почему. 

<link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="jquery.js"></script>
<script src="vue.js"></script>
<!DOCTYPE html>
<html lang="">
    <head>
        <style>
            nav a{
                color: white
            }
            nav {background-color: #1c71b9; }
            .navbar-toggle{border: 3px solid white;}
            .icon-bar{background-color: white;}
            .navbar-brand:hover{background-color: white;
            color: #1c71b9;
            }
            body{margin-top: 50px;}
            h1, h2, h3, h4, h5, h6, p{
                -webkit-font-smoothing: antialiased;
                text-rendering: optimizeLegibility;
            }
            .row + .row{margin-top: 20px;}
        </style>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
     <nav class="navbar navbar-fixed-top">
        <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
             <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand" href="index.php">My site</a>
            </div><!--end .navbar-header-->
            <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Subscriptions</a></li>
                <li><a href="#">Templates</a></li>
                <li><a href="#">Stock</a></li>
                <li><a href="#">Login</a></li>
                <li><a href="#">Signup</a></li>
                </ul>
            </div><!--end #navbar-->
         </div><!--end container-->
        </nav>
    </body>
</html>

1 Ответ

0 голосов
/ 29 июня 2018

У вас две проблемы с вашим кодом:

  • Вы добавили большую часть своего <head> содержимого до вашего <html> тега, который является недействительным HTML. Теги <link>, <script>, <style> и <meta> должны находиться внутри <head>.
  • Хотя вы включили (локальную копию) jQuery, на самом деле вы не включили сам JavaScript Bootstrap. Вы используете версию 3 Bootstrap, поэтому вам понадобится
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Вот рабочее обновление, в котором я исправил вашу <head> структуру, заменил вашу локальную версию jQuery на размещенную (просто для того, чтобы этот пример работал) и добавил в соответствующий Bootstrap JavaScript: 

<!DOCTYPE html>
<html lang="">

<head>
  <link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
  <!--<script src="jquery.js"></script>-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <script src="vue.js"></script>
  
  <style>
    nav a {
      color: white
    }
    
    nav {
      background-color: #1c71b9;
    }
    
    .navbar-toggle {
      border: 3px solid white;
    }
    
    .icon-bar {
      background-color: white;
    }
    
    .navbar-brand:hover {
      background-color: white;
      color: #1c71b9;
    }
    
    body {
      margin-top: 50px;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    
    .row+.row {
      margin-top: 20px;
    }
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <nav class="navbar navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
             <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
             </button>
        <a class="navbar-brand" href="index.php">My site</a>
      </div>
      <!--end .navbar-header-->
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Subscriptions</a></li>
          <li><a href="#">Templates</a></li>
          <li><a href="#">Stock</a></li>
          <li><a href="#">Login</a></li>
          <li><a href="#">Signup</a></li>
        </ul>
      </div>
      <!--end #navbar-->
    </div>
    <!--end container-->
  </nav>
</body>

</html>
...