DataLife Engine > Версия для печати > Боковое меню на CSS3

Боковое меню для сайта на CSS3 достаточно интересное решение для оформление навигации, которая будет оживать при наведении курсора мыши на блоки, это позволит разнообразить Ваш сайт.По умолчанию у нас будет вертикальный блок, стилизованный иконками и логотипом, при наведении курсора будет происходить полный разворот блоков с подписями, смотрится достаточно красиво.

HTML

Мы присваиваем ID нашей навигации, это будет общий блок в котором заключена вся навигация, затем у нас будет класс с логотипом для шапки навигации:

Затем по очередности мы добавляем блоки навигации, кроме этого для каждого отдельного блока у нас будет свой класс, в каждом из которых будет вшит своя иконка.

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); }
}

Кроме этого мы импортируем со стороннего репозитория несколько стилей, которые нам облегчат работу с навигацией и придадут красочный вид.

Готово!

Вернуться назад

Техно-мир