Боковое меню для сайта на
CSS3 достаточно интересное решение для оформление навигации, которая будет оживать при наведении курсора мыши на блоки, это позволит разнообразить Ваш сайт.
По умолчанию у нас будет вертикальный блок, стилизованный иконками и логотипом, при наведении курсора будет происходить полный разворот блоков с подписями, смотрится достаточно красиво.
HTML Мы присваиваем
ID нашей навигации, это будет общий блок в котором заключена вся навигация, затем у нас будет класс с логотипом для шапки навигации:
Код
<nav id='sidebar'>
<div class='logo'>R</div>
<ul>
<li>
<a href='#'><i class="fa fa-user"></i><span>Профиль</span></a>
</li>
<li>
<a href='#'><i class="fa fa-send"></i><span>Почта</span></a>
</li>
<li>
<a href='#'><i class="fa fa-cog"></i><span>Настройки</span></a>
</li>
<li>
<a href='#'><i class="fa fa-question-circle"></i><span>Помощь</span></a>
</li>
<li>
<a href='#'><i class="fa fa-power-off"></i><span>Выйти</span></a>
</li>
</ul>
</nav>
Затем по очередности мы добавляем блоки навигации, кроме этого для каждого отдельного блока у нас будет свой класс, в каждом из которых будет вшит своя иконка.
CSS Стили не такие уж и тяжелые, нам необходимо, для начала определить общий класс контейнера и блока навигации, затем стилизовать блок с логотипом, а далее мы добавляем стили для трансформации при наведении курсора мыши:
Код
#sidebar {
position: fixed;
top: 0; left: 0;
max-width: 50px; min-width: 50px;
margin: 25px;
background: $base;
transition: all $speed $ease;
&:hover { max-width: 100%; }
.logo {
cursor: default;
width: 100%; height: 50px;
background: $accent;
font-size: 22pt;
color: $base;
font-weight: 800;
line-height: 50px;
text-align: center;
}
ul li {
overflow: hidden;
transition: all .3s ease;
white-space: nowrap;
a {
height: 50px;
border-top: 1px solid darken($base,5%);
display: block;
color: $accent;
line-height: 50px;
text-decoration: none;
i {
width: 50px; height: 50px;
box-shadow: 1px 0 darken($base,5%);
font-size: 12pt;
text-align: center;
line-height: 50px;
}
span {
padding: 0 15px;
opacity: 0;
transform: translateX(15px);
transition: all $speed $ease;
}
}
&:hover { background: rgba(255,255,255,.15); }
}
&:hover ul li a span { opacity: 1; transform: translateX(0); }
}
Кроме этого мы импортируем со стороннего репозитория несколько стилей, которые нам облегчат работу с навигацией и придадут красочный вид.
Готово!
Не выводит сообщения в чат.
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
