Еще один код, который поможет вам быстро создать на сайте меню без особых трудностей.
Вам только нужно будет заменить ссылки в меню и названия.
Меню горизонтальное, но не адаптивное, написано на CSS.
Теперь сам код:
CSS:
*, *:before, *:after{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; font-family: 'Lato', sans-serif; } nav{ position: fixed; top: 0; left: 0; width: 100%; background: #fff; box-shadow: 0 3px 10px -2px rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.1); } nav ul{ list-style: none; position: relative; float: right; margin-right: 100px; display: inline-table; } nav ul li{ float: left; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } nav ul li:hover{background: rgba(0,0,0,.15);} nav ul li:hover > ul{display: block;} nav ul li{ float: left; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } nav ul li a{ display: block; padding: 30px 20px; color: #222; font-size: .9em; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; } nav ul ul{ display: none; background: #fff; position: absolute; top: 100%; box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.1); } nav ul ul li{float: none; position: relative;} nav ul ul li a { padding: 15px 30px; border-bottom: 1px solid rgba(0,0,0,.05); } nav ul ul ul { position: absolute; left: 100%; top:0; }
HTML:
<nav role='navigation'> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a> <ul> <li><a href="#">Кто мы такие</a></li> <li><a href="#">Наши работы</a></li> </ul> </li> <li><a href="#">Для клиента</a></li> <li><a href="#">Контакты</a></li> </ul> </nav>
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330346 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274701 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222534 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187741 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
Добавить комментарий
Метки: Вебмастеру, для сайта
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐