0

Пишу небольшую адаптивную панель на Bootstrap с вкладками. Интересует как сделать значок "бургер" для экранов xs. Спасибо

<!DOCTYPE html>
<html lang="en" xmlns:font-size="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Карточка объекта</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#tab1" role="tab" data-toggle="tab">Основная информация</a></li>
            <li role="presentation"><a href="#tab2" role="tab" data-toggle="tab">Оборудование</a></li>
            <li role="presentation"><a href="#tab3" role="tab" data-toggle="tab">Договоры и оплаты</a></li>
            <li role="presentation"><a href="#tab4" role="tab" data-toggle="tab">Контакты</a></li>
            <li role="presentation"><a href="#tab5" role="tab" data-toggle="tab">Коммерческие предложения и сметы</a></li>
            <li role="presentation"><a href="#tab6" role="tab" data-toggle="tab">История</a></li>
            <li role="presentation"><a href="#tab7" role="tab" data-toggle="tab">Акты обследования</a></li>
            <li role="presentation"><a href="#tab8" role="tab" data-toggle="tab">События графика</a></li>
      </ul>
    </div>
  <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade in active" id="tab1">
          <div class="jumbotron container-fluid" id="information">
              <h1>Карточка объекта</h1>
              <div class="col-lg-6 col-md-6">
                  <div class="panel panel-default">
                      <div class="panel-heading">Адрес объекта</div>
                      <div class="panel-body">Орджоникидзе д.42</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Район</div>
                      <div class="panel-body">Московский</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Тип обслуживания</div>
                      <div class="panel-body">
                          <div class="btn-group">
                              <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  Action
                              </button>
                              <div class="dropdown-menu">
                                  <a class="dropdown-item" href="#">Action</a>
                                  <a class="dropdown-item" href="#">Another action</a>
                                  <a class="dropdown-item" href="#">Something else here</a>
                                  <div class="dropdown-divider"></div>
                                  <a class="dropdown-item" href="#">Separated link</a>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Категория объекта</div>
                      <div class="panel-body">...</div>
                  </div>
              </div>
              <div class="col-lg-6 col-md-6">
                  <div class="panel panel-default">
                      <div class="panel-heading">Участок</div>
                      <div class="panel-body">...</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Инженер</div>
                      <div class="panel-body">...</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Ответственное лицо</div>
                      <div class="panel-body">...</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Персональный менеджер</div>
                      <div class="panel-body">...</div>
                  </div>
              </div>
          </div>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab2">
          ...
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab3">
          ...
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab4">
          ...
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab5">
          ...
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab6">
          ...
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab7">
          ...
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab8">
          ...
      </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

2 ответа 2

1

Например:

$.fn.responsiveTabs = function() {
  this.addClass('responsive-tabs');
  this.append($('<span class="glyphicon glyphicon glyphicon-menu-hamburger"></span>'));
  
  this.on('click', 'li.active > a, span.glyphicon', function() {
    this.toggleClass('open');
  }.bind(this));

  this.on('click', 'li:not(.active) > a', function() {
    this.removeClass('open');
  }.bind(this));
};

$('.nav.nav-tabs').responsiveTabs();
.responsive-tabs.nav-tabs {
  position: relative;
  z-index: 10;
  height: 42px;
  overflow: visible;
  border-bottom: none;
}

.responsive-tabs.nav-tabs span.glyphicon {
  position: absolute;
  top: 14px;
  right: 22px;
}

.responsive-tabs.nav-tabs span.glyphicon.glyphicon-triangle-top {
  display: none;
}

.responsive-tabs.nav-tabs > li {
  display: none;
  float: none;
  text-align: center;
}

.responsive-tabs.nav-tabs > li:last-of-type > a {
  margin-right: 0;
}

.responsive-tabs.nav-tabs > li > a {
  margin-right: 0;
  background: #fff;
  border: 1px solid #DDDDDD;
}

.responsive-tabs.nav-tabs > li.active {
  display: block;
}

.responsive-tabs.nav-tabs > li.active a {
  border: 1px solid #DDDDDD;
  border-radius: 2px;
}

.responsive-tabs.nav-tabs.open > li {
  display: block;
}
.responsive-tabs.nav-tabs.open > li a {
  border-radius: 0;
}
.responsive-tabs.nav-tabs.open > li:first-of-type a {
  border-radius: 2px 2px 0 0;
}
.responsive-tabs.nav-tabs.open > li:last-of-type a {
  border-radius: 0 0 2px 2px;
}

@media (min-width: 768px) {
  
  .responsive-tabs.nav-tabs {
    border-bottom: 1px solid #ddd;
  }
  
  .responsive-tabs.nav-tabs span.glyphicon {
    display: none;
  }
  
  .responsive-tabs.nav-tabs > li > a {
    margin-right: 4px;
  }
  
  .responsive-tabs.nav-tabs > li.active a {
    border-bottom-color: transparent;
  }
  
  .responsive-tabs.nav-tabs > li {
    display: block;
    float: left;
  }
  
  .responsive-tabs.nav-tabs.open span.glyphicon {
    display: none;
  }
}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" ></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
    <div class="container-fluid">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#tab1" role="tab" data-toggle="tab">Основная информация</a></li>
            <li role="presentation"><a href="#tab2" role="tab" data-toggle="tab">Оборудование</a></li>
            <li role="presentation"><a href="#tab3" role="tab" data-toggle="tab">Договоры и оплаты</a></li>
            <li role="presentation"><a href="#tab4" role="tab" data-toggle="tab">Контакты</a></li>
            <li role="presentation"><a href="#tab5" role="tab" data-toggle="tab">Коммерческие предложения и сметы</a></li>
            <li role="presentation"><a href="#tab6" role="tab" data-toggle="tab">История</a></li>
            <li role="presentation"><a href="#tab7" role="tab" data-toggle="tab">Акты обследования</a></li>
            <li role="presentation"><a href="#tab8" role="tab" data-toggle="tab">События графика</a></li>
        </ul>
      </div>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade in active" id="tab1">
          <div class="jumbotron container-fluid" id="information">
              <h1>Карточка объекта</h1>
              <div class="col-lg-6 col-md-6">
                  <div class="panel panel-default">
                      <div class="panel-heading">Адрес объекта</div>
                      <div class="panel-body">Орджоникидзе д.42</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Район</div>
                      <div class="panel-body">Московский</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Тип обслуживания</div>
                      <div class="panel-body">
                          <div class="btn-group">
                              <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  Action
                              </button>
                              <div class="dropdown-menu">
                                  <a class="dropdown-item" href="#">Action</a>
                                  <a class="dropdown-item" href="#">Another action</a>
                                  <a class="dropdown-item" href="#">Something else here</a>
                                  <div class="dropdown-divider"></div>
                                  <a class="dropdown-item" href="#">Separated link</a>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Категория объекта</div>
                      <div class="panel-body">...</div>
                  </div>
              </div>
              <div class="col-lg-6 col-md-6">
                  <div class="panel panel-default">
                      <div class="panel-heading">Участок</div>
                      <div class="panel-body">...</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Инженер</div>
                      <div class="panel-body">...</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Ответственное лицо</div>
                      <div class="panel-body">...</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Персональный менеджер</div>
                      <div class="panel-body">...</div>
                  </div>
              </div>
          </div>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab2">
          ... Оборудование
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab3">
          ... Договоры
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab4">
          ... Контакты
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab5">
          ... Коммерческие предложения
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab6">
          ... История
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab7">
          ... Акты
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab8">
          ... События
      </div>
  </div>

0

Спасибо за Ваш ответ. Я вставил Ваш код в свой редактор, но результат тот же, в чем дело?

$.fn.responsiveTabs = function() {
  this.addClass('responsive-tabs');
  this.append($('<span class="glyphicon glyphicon glyphicon-menu-hamburger"></span>'));
  
  this.on('click', 'li.active > a, span.glyphicon', function() {
    this.toggleClass('open');
  }.bind(this));

  this.on('click', 'li:not(.active) > a', function() {
    this.removeClass('open');
  }.bind(this));
};

$('.nav.nav-tabs').responsiveTabs();
.responsive-tabs.nav-tabs {
  position: relative;
  z-index: 10;
  height: 42px;
  overflow: visible;
  border-bottom: none;
}

.responsive-tabs.nav-tabs span.glyphicon {
  position: absolute;
  top: 14px;
  right: 22px;
}

.responsive-tabs.nav-tabs span.glyphicon.glyphicon-triangle-top {
  display: none;
}

.responsive-tabs.nav-tabs > li {
  display: none;
  float: none;
  text-align: center;
}

.responsive-tabs.nav-tabs > li:last-of-type > a {
  margin-right: 0;
}

.responsive-tabs.nav-tabs > li > a {
  margin-right: 0;
  background: #fff;
  border: 1px solid #DDDDDD;
}

.responsive-tabs.nav-tabs > li.active {
  display: block;
}

.responsive-tabs.nav-tabs > li.active a {
  border: 1px solid #DDDDDD;
  border-radius: 2px;
}

.responsive-tabs.nav-tabs.open > li {
  display: block;
}
.responsive-tabs.nav-tabs.open > li a {
  border-radius: 0;
}
.responsive-tabs.nav-tabs.open > li:first-of-type a {
  border-radius: 2px 2px 0 0;
}
.responsive-tabs.nav-tabs.open > li:last-of-type a {
  border-radius: 0 0 2px 2px;
}

@media (min-width: 768px) {
  
  .responsive-tabs.nav-tabs {
    border-bottom: 1px solid #ddd;
  }
  
  .responsive-tabs.nav-tabs span.glyphicon {
    display: none;
  }
  
  .responsive-tabs.nav-tabs > li > a {
    margin-right: 4px;
  }
  
  .responsive-tabs.nav-tabs > li.active a {
    border-bottom-color: transparent;
  }
  
  .responsive-tabs.nav-tabs > li {
    display: block;
    float: left;
  }
  
  .responsive-tabs.nav-tabs.open span.glyphicon {
    display: none;
  }
}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" ></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
    <div class="container-fluid">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#tab1" role="tab" data-toggle="tab">Основная информация</a></li>
            <li role="presentation"><a href="#tab2" role="tab" data-toggle="tab">Оборудование</a></li>
            <li role="presentation"><a href="#tab3" role="tab" data-toggle="tab">Договоры и оплаты</a></li>
            <li role="presentation"><a href="#tab4" role="tab" data-toggle="tab">Контакты</a></li>
            <li role="presentation"><a href="#tab5" role="tab" data-toggle="tab">Коммерческие предложения и сметы</a></li>
            <li role="presentation"><a href="#tab6" role="tab" data-toggle="tab">История</a></li>
            <li role="presentation"><a href="#tab7" role="tab" data-toggle="tab">Акты обследования</a></li>
            <li role="presentation"><a href="#tab8" role="tab" data-toggle="tab">События графика</a></li>
        </ul>
      </div>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade in active" id="tab1">
          <div class="jumbotron container-fluid" id="information">
              <h1>Карточка объекта</h1>
              <div class="col-lg-6 col-md-6">
                  <div class="panel panel-default">
                      <div class="panel-heading">Адрес объекта</div>
                      <div class="panel-body">Орджоникидзе д.42</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Район</div>
                      <div class="panel-body">Московский</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Тип обслуживания</div>
                      <div class="panel-body">
                          <div class="btn-group">
                              <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  Action
                              </button>
                              <div class="dropdown-menu">
                                  <a class="dropdown-item" href="#">Action</a>
                                  <a class="dropdown-item" href="#">Another action</a>
                                  <a class="dropdown-item" href="#">Something else here</a>
                                  <div class="dropdown-divider"></div>
                                  <a class="dropdown-item" href="#">Separated link</a>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Категория объекта</div>
                      <div class="panel-body">...</div>
                  </div>
              </div>
              <div class="col-lg-6 col-md-6">
                  <div class="panel panel-default">
                      <div class="panel-heading">Участок</div>
                      <div class="panel-body">...</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Инженер</div>
                      <div class="panel-body">...</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Ответственное лицо</div>
                      <div class="panel-body">...</div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">Персональный менеджер</div>
                      <div class="panel-body">...</div>
                  </div>
              </div>
          </div>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab2">
          ... Оборудование
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab3">
          ... Договоры
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab4">
          ... Контакты
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab5">
          ... Коммерческие предложения
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab6">
          ... История
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab7">
          ... Акты
      </div>
      <div role="tabpanel" class="tab-pane fade" id="tab8">
          ... События
      </div>
  </div>

Ваш ответ

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

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