[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » О uCoz » Скрипты » Стильное, плавающее меню на CSS3
Стильное, плавающее меню на CSS3
Дата: Понедельник, 17.02.2014, 14:30:48 | Сообщение # 1
Группа: Проверенные Титул: Технарь Сообщений: 283
Награды: 1
Репутация: 3
Статус:
Сайт пользователя:
Skype пользователя:

Не перестаю удивляться... Всё таки прогресс не стоит на месте. И вот ещё одно тому доказательство. Стильное, плавающее меню на чистом 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
Прикрепления: 5151832.png(4.2 Kb)
Форум » О uCoz » Скрипты » Стильное, плавающее меню на CSS3
  • Страница 1 из 1
  • 1
Поиск: