Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Боковое меню для сайта на CSS3
Дата добавления: 12.08.2014 - 19:02
Категория: Переключатели / Навигация
Добавил: Buger
Количество просмотров: 3605
Количество комментариев: 0
Рейтинг материала: 4.5 / 2
БЕСПЛАТНО
рейтинг
4.5
/
голосов
2
Поделись с друзьями:
Боковое меню для сайта на CSS3 достаточно интересное решение для
оформление навигации, которая будет оживать при наведении курсора мыши
на блоки, это позволит разнообразить Ваш сайт. Данное меню написано на чистом CSS3, и не использует JavaScript и jQuery.
По умолчанию у нас будет вертикальный блок, стилизованный иконками и логотипом, при наведении курсора будет происходить полный разворот блоков с подписями, смотрится достаточно красиво.
Шаг 1. HTML
Мы присваиваем ID нашей навигации, это будет общий блок в котором заключена вся навигация, затем у нас будет класс с логотипом для шапки навигации:
Затем по очередности мы добавляем блоки навигации, кроме этого для каждого отдельного блока у нас будет свой класс, в каждом из которых будет вшит своя иконка.
Шаг 2. CSS
Стили не такие уж и тяжелые, нам необходимо, для начала определить общий класс контейнера и блока навигации, затем стилизовать блок с логотипом, а далее мы добавляем стили для трансформации при наведении курсора мыши:
Кроме этого мы импортируем со стороннего репозитория несколько стилей, которые нам облегчат работу с навигацией и придадут красочный вид.
Готово!
По умолчанию у нас будет вертикальный блок, стилизованный иконками и логотипом, при наведении курсора будет происходить полный разворот блоков с подписями, смотрится достаточно красиво.
Шаг 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>
<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); }
}
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); }
}
Кроме этого мы импортируем со стороннего репозитория несколько стилей, которые нам облегчат работу с навигацией и придадут красочный вид.
Готово!
