0

Всем привет. Начал изучать вёрстку, как-то сложно переключить сознание с разработки .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>

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

1
  • Другими словами: объёсните концепцию такой вот задачки и желательно попроще=)
    – Hash
    Commented 10 дек. 2018 в 20:51

1 ответ 1

0

Добавляем блок с текстом, скрываем его за пределами экрана с помощью позиционирования(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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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