Еще один код, который поможет вам быстро создать на сайте меню без особых трудностей.
Вам только нужно будет заменить ссылки в меню и названия.
Меню горизонтальное, но не адаптивное, написано на 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
просмотров: 303287 -
Размеры форматов листов А0 – А7
Дата: 23 Январь 2013
Прокомментировано:2
просмотров: 251268 -
Установка windows 7 на ноутбук
Дата: 18 Декабрь 2012
Прокомментировано:167
просмотров: 178402 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 Ноябрь 2014
Прокомментировано:5
просмотров: 176621 -
Как включить или отключить Aero в Windows 7
Дата: 1 Июнь 2013
Прокомментировано:4
просмотров: 144785
Добавить комментарий
Метки: Вебмастеру, для сайта
Здравствуйте, Александр!!! Огромное спасибо, приятно. И Вам всего хорошего!!!…
⇒ Открыть статью ⇐