Представляю вашему вниманию очередное горизонтальное меню тёмного цвета, с поиском, выполненное на стилях ксс. Отлично подойдёт практически под любой дизайн.
Установка:
1. Открываем:
Панель управления ---> Управление дизайном ---> Таблица стилей (CSS), вставляем код в самый вверх:
Code
/* === Горизонтальное меню от fotki.ucoz.ua === */
.darkbg { background: #222a30 url("http://fotki.ucoz.ua/script/primery/slide_menu/darkbg.png"); }
#menubar { padding: 0 12px; height: 50px; border-top: 1px solid #646c74; background: url("http://fotki.ucoz.ua/script/primery/slide_menu/topshd.png") no-repeat 50% 0; }
#menubar .lcol, #menubar .lcol ul, #menubar .lcol ul li, #menubar .lcol ul a { float: left; }
#menubar .lcol { overflow: hidden; height: 50px; }
#menubar .lcol ul { font-size: 1.15em; line-height: 49px; margin-left: -2px; }
#menubar .lcol ul li { background: url("http://fotki.ucoz.ua/script/primery/slide_menu/mbar.png") no-repeat; }
#menubar .lcol ul a { padding: 0 11px 0 12px; color: #fff; height: 50px; text-decoration: none; }
#menubar .lcol ul a:hover { color: #669900; background: url("http://fotki.ucoz.ua/script/primery/slide_menu/mbar.png") no-repeat 50% 100%; }
.reset, .reset li { list-style: none; padding: 0; margin: 0; }
.searchbar { margin-top: 12px; border: 1px solid #3f464c; border-width: 0 1px 1px 0; float: right; width: 217px; height: 26px; background: #191f24 url("http://fotki.ucoz.ua/script/primery/slide_menu/search.png") no-repeat; }
.searchbar li { float: left; height: 26px; }
.searchbar .lfield { width: 180px; padding-left: 7px; overflow: hidden; }
.searchbar .lfield input { font-style: italic; color: #8b99a8; float: left; height: 15px; width: 180px; border: 0 none; background: none; margin-top: 6px; }
.searchbar .lbtn input { width: 30px; height: 26px; background: #db143d url("http://fotki.ucoz.ua/script/primery/slide_menu/search.png") no-repeat 0 -26px; }
.searchbar .lbtn input:hover { background-position: -30px -26px; }
/* =============== */
2. Этот код вставляется туда, где должно быть наше меню, обычно это:
Панель управления ---> Управление дизайном ---> Глобальные блоки ---> Верхняя часть сайта, в самый низ:
Quote
<div class="darkbg">
<div id="menubar">
<div class="lcol">
<ul class="reset">
<li><a href="Адрес страницы 1">Страница 1</a></li>
<li><a href="Адрес страницы 2">Страница 2</a></li>
<li><a href="Адрес страницы 3">Страница 3</a></li>
<li><a href="Адрес страницы 4">Страница 4</a></li>
<li><a href="Адрес страницы 5">Страница 5</a></li>
</ul>
</div>
<form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/">
<ul class="searchbar reset">
<li class="lfield"><input type="text" name="q" onBlur="if(this.value=='') this.value='Что ищем?....';" onFocus="if(this.value=='Что ищем?....') this.value='';" value="Что ищем?...."/></li>
<li class="lbtn"><input title="Найти" alt="Найти" name="sfSbm" type="image" src="http://fotki.ucoz.ua/script/primery/slide_menu/spacer.gif" /></li></ul>
</form>
</div></div>
Не забываем заменить адреса и имена ссылок пунктов меню на свои.