Вёрстка вертикального меню

114

08 июня 2019, 01:40

Всем привет. Начал изучать вёрстку, как-то сложно переключить сознание с разработки .exe приложений, ну либо я такой)

Прошу помощи: 1. Сделал 2 глобальных дива (вертикальное меню и контент) 2. В меню сделал большие иконки, по нажатию на которые выезжает текст из иконки направо. Вот пример: http://nisnom.com/veb-razrabotki/vertical-css-menus/ 3. Естественно хочу это сделать самостоятельно для понимания разметки, css, событий и прочего.

Не могу понять концепцию этого выезжающего меню. Мне нужно добавить ещё один

<div class="col-1> в который выводить текст?
<div class=".container-fluid">
        <div class="row">
            <div class="col-1">
                <div class="sidebar">
                    <img src="img/Logo.png" width="100%">
                    <a class="nav-link" href="#"><i class="fa fa-fw fa-home"></i></a>
                      <div class="menu_item_1">Главная</div>
                    <a class="nav-link" href="#"><i class="fa fa-fw fa-wrench"></i></a>
                    <a class="nav-link" href="#"><i class="fa fa-fw fa-user"></i></a>
                    <a class="nav-link" href="#"><i class="fa fa-fw fa-envelope"></i></a>
                </div>
            </div>
            <div class="col-11">
              <div class="MainContent">
                  Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
                </div>
            </div>
        </div>
    </div>

Большое спасибо за помощь

Answer 1

Добавляем блок с текстом, скрываем его за пределами экрана с помощью позиционирования(position: absolute;) и при hover показывем.

p.s. Код можно упростить, делал на скорую руку. Проверьте свой код, там есть ошибки. Не закрыт class="col-1, уберите точку class=".container-fluid"

.c-nav { 
  width: 75px; 
  background-color: #333; 
} 
 
.c-nav__list { 
  display: flex; 
  flex-flow: column nowrap; 
  list-style: none; 
  margin: 0; 
  padding: 0; 
} 
 
.c-nav__item { 
  position: relative; 
} 
 
.c-nav__link { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  padding: 1rem 0; 
  color: #fff; 
} 
 
.c-nav__icon { 
  position: relative; 
  z-index: 1; 
} 
 
.c-nav__text { 
  position: absolute; 
  top: 0; 
  left: -300px; 
  width: 200px; 
  height: 100%; 
  padding-left: 75px; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: blue; 
  transition: left 250ms ease-in-out; 
} 
 
.c-nav__item:hover .c-nav__text { 
  left: 0; 
  transition: left 250ms ease-in-out; 
}

<nav class="c-nav"> 
  <ul class="c-nav__list"> 
    <li class="c-nav__item"> 
      <a href="#" class="c-nav__link"> 
        <span class="c-nav__icon">icon</span> 
        <span class="c-nav__text">Link</span></a> 
    </li> 
  </ul> 
</nav>