БлоГ

Здравствуйте, сегодня мы будем устанавливать стильное горизонтальное css меню с выпадающими списками на сайт созданный в конструкторе okis.ru.

Смотреть ДЕМО версию

Данное навигационное меню прекрасно подойдет к большинству шаблонов без дополнительных правок и редактирования, но при желание или необходимости вы легко можете настроить любые параметры меню под свои нужды. Давайте же перейдем от слов к делу, и приступим непосредственно к внедрению меню на сайт.

Копируем html разметку меню расположенную ниже:

<div id="cssmenublock">
 <ul class="cssmenu">
 <li><a href="">Главная</a></li>
<li><a href="">Фотогалерея</a></li>
<li><a href="">Услуги</a></li>
<li><a href="">Отзывы</a></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></li>
 <li><a href="">Контакты</a></li>
 </ul>
</div>

Переходим в административной панели на вкладку Настройки - Статистика:

И вставляем скопированный код в поле "Другой счетчик посещаемости".

Пол дела сделано, и вам теперь требуется подключить стилевое оформление навигационного меню. Для этого скопируйте css код из формы:

.art-sheet {
 position:relative;
 top: 50px;
}

#cssmenublock {
 background: #ffffff;
 display: block;
 position: absolute;
 top:0;
 left:0;
 height:50px;
 width:100%;
 -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 text-transform: uppercase;
 z-index:999;
}

ul.cssmenu {
 border-left: 1px solid #f1f1f1;
 font: 12px/16px Arial;
 margin:0 auto;
 width: 960px;
 height: 50px;
}

ul.cssmenu>li {
 float: left;
 list-style: none;
 border-right: 1px solid #f1f1f1;
 position: relative;
 line-height:50px;
}

ul.cssmenu>li>a {
 color: #000;
 display: block;
 line-height:50px;
 text-decoration: none;
 padding:0 20px;
}

ul.cssmenu>li>a:hover {
 background-color: #34495e;
 -webkit-transition: all 0.2s ease-in-out;
 -moz-transition: all 0.2s ease-in-out;
 -o-transition: all 0.2s ease-in-out;
 -ms-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
 color: #c1deff;
}

ul.cssmenu>li>ul {
 display: none;
}

ul.cssmenu>li:hover>ul {
 display: block;
 position: absolute;
 top: 50px;
 background-color: #34495e;
 z-index: 999;
}

ul.cssmenu>li:hover>ul>li {
 border-top:1px solid #2b3a49;
 float: none;
 min-width: 200px;
 list-style: none;
 line-height: 30px;
 text-align:left;
 text-transform: none;
}

ul.cssmenu>li:hover>ul>li:hover {
 background-color: #2c3e50;
}

ul.cssmenu>li:hover>ul>li>a {
 display: block;
 color: white;
 font: 11px/16px Arial;
 text-decoration: none;
 line-height: 30px;
 padding:0 20px;
}

ul.cssmenu>li:hover>ul>li>a:hover {
 background-color: transparent;
 color: #c1deff;
}

И разместите его на вкладке Настройки - CSS:

Сохраните результат, и перейдите на сайт для того что бы убедиться в отличном результате проделанной работы. После этого вам остается отредактировать разметку html, вставить ссылки и прописать нужные названия пунктам меню. Спасибо за внимание, все возникшие вопросы вы можете задать в комментариях к уроку.

источник