bootstrap боковое меню

350

05 мая 2017, 18:42

Решил написать всплывающую/скрывающаяся боковое меню с использованием bootstrap.

Bootstrap только начал изучать. Опыта в верстке особа нету.

Получилось вот это (можно запустить и посмотеть, скинул весь код):

* 
{ 
  margin: 0; 
  padding: 0; 
  outline: none; 
} 
 
html 
{ 
  height: 100%; 
} 
 
body 
{ 
  width: 100%; 
  height: 100%; 
  font-family: tahoma,arial,verdana,sans-serif; 
  font-size: 12px; 
} 
 
.header 
{ 
  height: 50px; 
  width: calc(100% - 50px); 
  background-color: #FFFFFF; 
  float: right; 
} 
 
#user-menu 
{ 
  height: 200px; 
  width: 200px; 
  background-color: #1E8BC3; 
} 
 
#menu-toggle 
{ 
  width: 50px; 
  height: 50px; 
  background-color: #FFFFFF; 
  text-decoration: none; 
  color: #000000; 
} 
 
#sidebar-wrapper 
{ 
  z-index: 0; 
  position: absolute; 
  width: 50px; 
  height: 100%; 
  overflow-y: hidden; 
  background: #22313F; 
  margin-top: 50px; 
} 
 
#sidebar-wrapper-close 
{ 
  z-index: 0; 
  position: absolute; 
  width: 50px; 
  height: 100%; 
  overflow-y: hidden; 
  background: #22313F; 
  margin-top: 50px; 
} 
 
.page-content-wrapper 
{ 
  width: calc(100% - 50px); 
  padding-left: 50px;  
} 
 
#sidebar-nav 
{ 
  margin-top: 10px; 
  padding: 0; 
  list-style: none; 
} 
 
#sidebar-nav li 
{ 
  height: 40px; 
  text-indent: 10px; 
  line-height: 40px; 
} 
 
#sidebar-nav li a 
{ 
  white-space:nowrap; 
  display: block; 
  text-decoration: none; 
  color: #ddd; 
  border-left: 3px solid #22313F; 
} 
 
#sidebar-nav li a:hover 
{ 
  border-left: 3px solid #FFFFFF; 
  background-color: #2C3E50; 
} 
 
#menu-open 
{ 
  display: block; 
} 
 
#menu-close 
{ 
  display: none; 
} 
 
#wrapper.menuDisplayed #menu-open 
{ 
  display: none; 
} 
 
#wrapper.menuDisplayed #menu-close 
{ 
  display: block; 
} 
 
#wrapper.menuDisplayed #sidebar-wrapper 
{ 
  z-index: 5; 
  width: 200px; 
  height: 100%; 
  transition:  0.4s ease-out; 
} 
 
#wrapper.menuDisplayed #sidebar-wrapper-close 
{ 
  z-index: 0; 
  width: 200px; 
} 
 
#wrapper.menuDisplayed .page-content-wrapper 
{ 
  padding-left: 200px; 
} 
 
#wrapper .page-content-wrapper  
{ 
  transition:  0.4s ease-out; 
} 
 
#sidebar-nav .glyphicon 
{ 
  font-size: 10px;  
  padding: 10px 0px; 
} 
 
.glyphicon font 
{ 
  font-size: 12px; 
  font-family: tahoma,arial,verdana,sans-serif; 
} 
 
 
#wrapper #sidebar-wrapper-close 
{ 
  transition:  0.4s ease-out; 
}

<!DOCTYPE html> 
<html lang="ru"> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
  <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
   
  <div class="header"> 
 
  </div> 
 
  <div id="wrapper"> 
 
    <div id="sidebar-wrapper"> 
      <ul id="sidebar-nav"> 
        <div id="user-menu"></div> 
        <li><a href="#" class="glyphicon glyphicon-user"><font> Первый пункт</font></a></li> 
        <li><a href="#" class="glyphicon glyphicon-envelope"><font> Второй пункт</font></a></li> 
        <li><a href="#" class="glyphicon glyphicon-pencil"><font> Третий пункт</font></a></li> 
        <li><a href="#" class="glyphicon glyphicon-cog"><font> Четвертый пункт</font></a></li> 
      </ul> 
    </div> 
     
    <div id="sidebar-wrapper-close"> 
      <ul id="sidebar-nav"> 
        <li><a href="#" class="glyphicon glyphicon-user" style="text-align: center; padding-right: 15px;"></a></li> 
        <li><a href="#" class="glyphicon glyphicon-envelope" style="text-align: center; padding-right: 15px;"></a></li> 
        <li><a href="#" class="glyphicon glyphicon-pencil" style="text-align: center; padding-right: 15px;"></a></li> 
        <li><a href="#" class="glyphicon glyphicon-cog" style="text-align: center; padding-right: 15px;"></a></li> 
      </ul> 
    </div>  
     
      <button class="btn btn-link" id="menu-toggle"> 
        <span class="glyphicon glyphicon-th-list" id="menu-open"></span> 
        <span class="glyphicon glyphicon-th" id="menu-close"></span> 
      </button> 
 
    <div class="page-content-wrapper"> 
      <div class="container-fluid"> 
        <div class="row"> 
          <div class="col-md-12"> 
            <h1>Меню</h1> 
            <p> 
              Сдесь какой то текст!Сдесь какой то текст!Сдесь какой то текст!Сдесь какой то текст!Сдесь какой то текст! 
              Сдесь какой то текст!Сдесь какой то текст!Сдесь какой то текст!Сдесь какой то текст!Сдесь какой то текст! 
              Сдесь какой то текст!Сдесь какой то текст!Сдесь какой то текст!Сдесь какой то текст!Сдесь какой то текст! 
            </p> 
          </div>  
        </div> 
      </div> 
    </div> 
 
  </div> 
 
  <script> 
    $('#menu-toggle').click(function(e) { 
      e.preventDefault(); 
      $('#wrapper').toggleClass('menuDisplayed'); 
    }); 
  </script> 
 
</body> 
</html>

Вопросов несколько:

1) законно ли(можно ли так делать) использовать z-index в css, чтобы скрывать и показывать блоки (display: block и none не работали).

2) хотел вставить аннимированную кнопку для показа/вскрытия менюшки. в итоге не понял как это сделать. и использовал 2 бутстраповские картинки. меняю их переключением display на block и none. правильно ли так делать?

3) законно ли использовать width: calc(100% - 50px)?

4) не имею опыта в верстке. оцените, по возможности, код. напишите ошибки, и что бы вы сделали по другому

Спасибо.