Адаптивные вкладки

320
28 ноября 2017, 21:06

Пишу небольшую адаптивную панель на 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>
Answer 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>

Answer 2

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

$.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>

READ ALSO
Где можно практиковаться по вёрстке? [требует правки]
CSS

Где можно практиковаться по вёрстке? [требует правки]

Куда можно выложить свои работы по вёрстке макета на всеобщее обозрение? И где могут дать ценные советы?

 315
Вылазит текст за поле
CSS

Вылазит текст за поле

Вылазит длинный текст

 287
jquery-ui: неактивный элемент selectmenu становится активным при повторном выборе элемента списка
CSS

jquery-ui: неактивный элемент selectmenu становится активным при повторном выборе элемента списка

Приветствую

 301
TextArea изменить цвет при наведении мышкой (Css стили)
CSS

TextArea изменить цвет при наведении мышкой (Css стили)

есть какой-то не примечательный TextArea (который нельзя изменять), хочу чтобы при наведении на него мышкой, область изменялась в черный цвет,...

 421