-1

взял код с codepen, но не знаю, куда вставить js код, чтобы бургер работал.

$(".burger").click(function() {
  console.log("click");
  $("#menu").toggleClass('hidden');
  $("#header .burger").toggleClass('hidden');
});
body {
  margin-top: 60px;
}

p {
  font-size: large;
}

#header {
  color: #009688;
  background-color: white;
  height: 40px;
  width: 100%;
  top: 0;
  padding-top: 10px;
  padding-left: 5px;
  position: fixed;
}

#menu {
  background-color: white;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 10px;
}

#menu .panel-body,
#header .panel-body {
  padding-top: 0;
}

#menu .panel-body {
  margin-left: 10px;
}

#card .panel-body {
  padding: 0;
  padding-bottom: 10px;
}

.title,
.desc,
.author {
  margin-left: 10px;
  margin-right: 10px;
}

.lien {
  padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row panel panel-default" id="header">
    <div class="panel-body col-md-1">
      <a href="#" class="burger">
        <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#009688" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
        </svg>
      </a>
    </div>
  </div>
  <div class="row panel panel-default hidden" id="menu">
    <div class="panel-body">
      <div class="row">
        <div class="col-md-9">
          <p>Burger Menu</p>
        </div>
        <div class="col-md-1">
          <a href="#" class="burger">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#009688" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
            </svg>
          </a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#profile.html">My profile</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#msg.html">Messages</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#set.html">Settings</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#art.html">My articles</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#group.html">Groups</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#alb.html">Albums</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#svp.html">Saved Posts</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#blog.html">Blog</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#frum.html">Forum</a>
        </div>
      </div>
    </div>
  </div>
</div>

скиньте html код с связаным js,чтобы все работало.

6
  • 1
    Что значит все работало?
    – Roman C
    9 апр 2018 в 13:23
  • @RomanC чтобы был полноценный бургер
    –  sekeke6
    9 апр 2018 в 13:24
  • на сайт jQuery подключал вообще?
    – E1mir
    9 апр 2018 в 13:33
  • 1
    Не понял, что значит "полноценный бургер"?
    – Roman C
    9 апр 2018 в 13:57
  • 1
    А что не работает?
    – Roman C
    9 апр 2018 в 14:25

1 ответ 1

0

Вы потеряли класс hidden и jquery не подключили. Вот так работает.

$(".burger").click(function(){
  /*console.log("click");*/
  $("#menu").toggleClass('hidden');
  $("#header .burger").toggleClass('hidden');
});
body{
  margin-top: 60px;
}

p{
  font-size: large;
}

#header{
  color: #009688;
  background-color: white;
  height: 40px;
  width: 100%;
  top: 0;
  padding-top: 10px;
  padding-left: 5px;
  position: fixed;
}

#menu{
  background-color: white;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 10px;
}
#menu .panel-body, #header .panel-body{
  padding-top: 0;
}
#menu .panel-body{
  margin-left: 10px;
}

#card .panel-body{
  padding: 0;
  padding-bottom: 10px;
}

.title, .desc, .author{
  margin-left: 10px;
  margin-right: 10px;
}

.lien{
  padding-top: 10px;
}

.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="new.css">
    <link rel="stylesheet" href="now.js">
    <link rel="stylesheet" href="set.html">
</head>
<body>
    <div class="container-fluid">
  <div class="row panel panel-default" id="header">
    <div class="panel-body col-md-1">
      <a href="#" class="burger">
        <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#009688" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
        </svg>
      </a>
    </div>
  </div>
  <div class="row panel panel-default hidden" id="menu">
    <div class="panel-body">
      <div class="row">
        <div class="col-md-9">
          <p>Burger Menu</p>
        </div>
        <div class="col-md-1">
          <a href="#" class="burger">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#009688" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
            </svg>
          </a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#profile.html">My profile</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#msg.html">Messages</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#set.html">Settings</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#art.html">My articles</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#group.html">Groups</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#alb.html">Albums</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#svp.html">Saved Posts</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#blog.html">Blog</a>
        </div>
      </div>
      <div class="row lien">
        <div class="col-md-12">
          <a href="#frum.html">Forum</a>
        </div>
      </div>
    </div>
  </div>
    </div>
  </div>
</div>
</body>
</html>

3
  • почему-то не работает у меня, а на сайте все ок
    –  sekeke6
    9 апр 2018 в 15:02
  • наверно вы на сайте jquery не подключили или неправильно прописали. <script src="ajax.googleapis.com/ajax/libs/jquery/2.1.1/…> пропишите в header блоке.
    – coder675
    10 апр 2018 в 12:01
  • Или напишите что у вас по итогу на сайте получается вам подскажут как прописать.
    – coder675
    10 апр 2018 в 12:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.