Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Размытое меню на CSS3
Размытое меню на CSS3
AndreyДата: Воскресенье, 22.12.2013, 16:15:41 | Сообщение # 1
Технарь
Offline
3

Простое горизонтальное меню с эффектом размытия и с элементом адаптивности. Используется CSS3 и HTML5.

Смотрим мой тест на Федле

Сначала пропишем CSS стиль нашего меню:
Код
* {
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
}
html, body {
     margin: 0;
     padding: 0;
}
nav {
     background: none repeat scroll 0 0 #202033;
     box-shadow: 0 3px 5px #555555;
     position: relative;
     text-align: center;
}
nav:hover a {
     color: transparent;
     text-shadow: 0 0 3px #CC5C00;
}
nav a {
     color: #CC5C00;
     display: inline-block;
     font-family: tahoma;
     font-size: 1.25em;
     height: 66px;
     line-height: 66px;
     text-decoration: none;
     transition: all 0.3s ease 0s;
     width: 150px;
}
nav a:hover {
     border-bottom: 5px solid #FF7300;
     color: #FF7300;
     text-shadow: none;
}
@media screen and (max-width: 620px) {
     nav a {
         width: 49%;
     }
}
@media screen and (max-width: 300px) {
     nav a {
         width: 100%;
     }
}


Теперь там где хотим видеть само меню прописываем:
Код
<nav>
     <a href='#'>Главная</a>
     <a href='#'>Портфолио</a>
     <a href='#'>Отзывы</a>
     <a href='#'>Контакты</a>
</nav>


Вот и всё, меню установлено!

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