Современное меню для сайта на HTML + CSS
 | |
| При создании сайта нужно изначально учитывать, какая навигация по дизайн будет присутствовать, что об одном горизонтальном меню кратко узнаете. Не секрет, что интернет ресурс должен иметь навигацию по сайту, а вот какой она будет здесь полностью вы решаете. Но за основу берем горизонтальное меню, так как оно распространенное и всегда можно в нем прописать под категорий, все для того чтоб как можно больше запросов выставить на ссылки перехода. Это делается так, как по умолчанию в этой навигации идет на несколько разделах. Пишется основная тема, к примеру возьмем CSS, и вот что со стилистикой связано прописываем ключевые фразы под категорий. Так как здесь они работают отлично, всего лишь требуется навести курсор на нужное слово и окно раскрывается, что вам будет предоставлено на DEMO странице. Но и сам эффект появление, что также отличается от стандартного, если стандарт просто в низ выкидывает панель с ключевыми фразами, а здесь выезжает. За частую бывает такое, что веб разработчики не сильно уделяют внимание, в тот момент когда создают навигацию или по простому меню для сайта, что со временем понимают эту оплошность. Безусловно каждый интернет ресурс должен быть по своему дизайну оригинальным, где зайдя на сайт он вам запоминается, как своим материалом, так и своей изюминкой, что идет под уникальный стиль на каждом ресурсе. Проверено на тестовой площадке, где все корректно показывает и отлично работает.  Приступаем к установке: HTML Код <div id="kepurpose-kodevin-gusales"> <ul id="dsapugeose-pletoveco-gnisegesan"> <li><a href="#">Главная</a> <ul> <li><a href="#">Zorne.Ru</a></li> <li><a href="#">Скрипты</a></li> <li><a href="#">Стили</a></li> </ul> </li> <li><a href="#">Шаблоны</a> <ul> <li><a href="#">Признавая цель</a></li> <li><a href="#">Зачем планировать</a></li> <li><a href="#">Что происходит</a></li> <li><a href="#">Компании и организации</a></li> <li><a href="#">Разработчик или дизайнер</a></li> <li><a href="#">Все это приведет к созданию</a></li> </ul> </li> <li><a href="#">Веб разработка</a> <ul> <li><a href="#">Основы планирования</a></li> <li><a href="#">Электронной коммерции</a></li> <li><a href="#">Успешных веб-сайтов.</a></li> </ul> </li> <li><a href="#">Скрипты</a> <ul> <li><a href="#">предприятий и дизайнеров</a></li> <li><a href="#">планировании и запуске </a></li> <li><a href="#">превратить их в клиентов</a></li> </ul> </li> <li><a href="#">Новостные блоги</a> <ul> <li><a href="#">Все показывать онлайн</a></li> <li><a href="#">продукты или услуги</a></li> <li><a href="#">бизнесом и в конечном </a></li> </ul> </li> <li><a href="#">Контакты</a></li> </ul> </div> CSS Код #dsapugeose-pletoveco-gnisegesan { position: relative; float: left; width: 100%; padding: 0 18px; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(206, 203, 203, 0.5), inset 0 -1px 0 rgba(29, 28, 28, 0.26), 0 1px 3px rgba(19, 17, 17, 0.18); background: #e0d8d8; } #dsapugeose-pletoveco-gnisegesan, #dsapugeose-pletoveco-gnisegesan ul { list-style: none; } #dsapugeose-pletoveco-gnisegesan > li { float: left; position: relative; border-right: 1px solid rgba(0,0,0,.1); box-shadow: 1px 0 0 rgba(255,255,255,.25); perspective: 1000px; } #dsapugeose-pletoveco-gnisegesan > li:first-child { border-left: 1px solid rgba(255,255,255,.25); box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25); } #dsapugeose-pletoveco-gnisegesan a { display: block; position: relative; z-index: 10; padding: 15px 18px 16px 18px; text-decoration: none; color: rgb(64, 63, 63); line-height: 1; font-weight: 600; font-size: 13.5px; letter-spacing: -.05em; background: rgba(14, 14, 14, 0); text-shadow: 0 1px 1px rgba(234, 227, 227, 0.9); transition: all .25s ease-in-out; } #dsapugeose-pletoveco-gnisegesan > li:hover > a { background: #2d2b2b; color: rgb(77, 183, 247); text-shadow: none; } #dsapugeose-pletoveco-gnisegesan li ul { position: absolute; left: 0; z-index: 1; width: 200px; padding: 0; opacity: 0; visibility: hidden; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: transparent; overflow: hidden; transform-origin: 50% 0%; } #dsapugeose-pletoveco-gnisegesan li:hover ul { padding: 15px 0; background: #333; opacity: 1; visibility: visible; box-shadow: 1px 1px 7px rgba(0,0,0,.5); animation-name: swingdown; animation-duration: 1s; animation-timing-function: ease; } @keyframes swingdown { 0% { opacity: .99999; transform: rotateX(90deg); } 30% { transform: rotateX(-20deg) rotateY(5deg); animation-timing-function: ease-in-out; } 65% { transform: rotateX(20deg) rotateY(-3deg); animation-timing-function: ease-in-out; } 100% { transform: rotateX(0); animation-timing-function: ease-in-out; } } #dsapugeose-pletoveco-gnisegesan li li a { padding-left: 15px; font-weight: 400; color: #ddd; text-shadow: none; border-top: dotted 1px transparent; border-bottom: dotted 1px transparent; transition: all .15s linear; } #dsapugeose-pletoveco-gnisegesan li li a:hover { color: rgba(0,223,252,1); border-top: dotted 1px rgba(255,255,255,.15); border-bottom: dotted 1px rgba(255,255,255,.15); background: rgba(0,223,252,.02); } Так почему бы вам сразу не включить по полной фантазию и создать что-то красивое и запоминающее, но главное, чтоб обязательно привлекала пользователя. Вот это меню отлично смотрится на любом формате, а если доработать по оформлению, то вы создадите свой неотразимый образ, который станет тот изюминкой, что что говорили ранее в описание. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
