Ваша корзина пуста
Форма входа

Бесплатный раздел

Вы здесь: Главная страница » Файлы » Переключатели / Навигация
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Боковое меню для сайта на CSS3

Дата добавления: 12.08.2014 - 19:02
Добавил: Buger
Количество просмотров: 5.0k
Количество комментариев: 0
Рейтинг материала: 4.5 / 2
Боковое меню для сайта на CSS3
БЕСПЛАТНО
рейтинг 4.5
/
голосов 2
Боковое меню для сайта на CSS3 достаточно интересное решение для оформление навигации, которая будет оживать при наведении курсора мыши на блоки, это позволит разнообразить Ваш сайт. Данное меню написано на чистом CSS3, и не использует JavaScript и jQuery.

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

Шаг 1. HTML

Мы присваиваем ID нашей навигации, это будет общий блок в котором заключена вся навигация, затем у нас будет класс с логотипом для шапки навигации:
HTML
<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>
 
Затем по очередности мы добавляем блоки навигации, кроме этого для каждого отдельного блока у нас будет свой класс, в каждом из которых будет вшит своя иконка.

Шаг 2. CSS
Стили не такие уж и тяжелые, нам необходимо, для начала определить общий класс контейнера и блока навигации, затем стилизовать блок с логотипом, а далее мы добавляем стили для трансформации при наведении курсора мыши:
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); }
}
 
Кроме этого мы импортируем со стороннего репозитория несколько стилей, которые нам облегчат работу с навигацией и придадут красочный вид.

Готово!

Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: