Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Стильное, плавающее меню на CSS3
Стильное, плавающее меню на CSS3
AndreyДата: Понедельник, 17.02.2014, 14:30:48 | Сообщение # 1
Технарь
Offline
3

Не перестаю удивляться... Всё таки прогресс не стоит на месте. И вот ещё одно тому доказательство. Стильное, плавающее меню на чистом CSS3, безо всяких там скриптов и прочей лабуды! Ну что давайте посмотрим меню, и приступим к установки

Мой тест на Фидле

Теперь приступим непосредственно к установки, идём в CSS и прописываем там:
Код
a, a:visited {
color: #444;
text-decoration: none;  
}
#content {
width: 180px;
margin: 0 auto;
}  
#menu {
margin: 1em auto 0 auto;
}  
#menu li {
list-style-type: none;
margin: 0 0 5px;
font-size: 15px;
background: #ccc;
padding: 10px;
-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
-moz-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
}
#menu li:hover {
margin-left: -1em;
margin-right: 1em;
background: #fff;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
box-shadow: 0px 0px 10px rgba(0,0,0, .3);
}


Теперь там где хотим видеть наше меню, нам нужно прописать:
Код
<ul id="menu">  
<li><a href="Ссылка">Название ссылки</a></li>  
<li><a href="Ссылка">Название ссылки</a></li>  

<li><a href="Ссылка">Название ссылки</a></li>  
<li><a href="Ссылка">Название ссылки</a></li>  
</ul>


Вот и всё, меню установлено!
Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Стильное, плавающее меню на CSS3
Страница 1 из 11
Поиск: