12 авг 2014
Боковое меню для сайта на CSS3
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Боковое меню для сайта на CSS3 .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Боковое меню для сайта на CSS3


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


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

Шаг 1. 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>


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

Шаг 2. 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); }
}


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

Готово!



Скачивание файлов доступно только зарегистрированным пользователям










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.