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

Ваш ответ

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

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