» »

Горизонтальное меню с поиском для системы uCoz


Не плохое горизонтальное меню с поиском для uCoz. Меню это подойдет ко многим сайтам. Так как оно коричневого цвета. То думаю лучше оно будит смотреться на светлых сайтах. Так же в меню располагается поиск по сайту.
Приступаем к установке:
Этот стиль прописываем в Таблица стилей (CSS)
Код
/* === Горизонтальное меню от fotki.ucoz.ua === */  
#top_menu{background: #fef9dd url(http://zornet.ru/ZORNET/top_menu_bg.jpg) top center no-repeat; height:42px; margin:0 auto; padding:0 0 10px 0; text-align:center; width:960px;}  
#mainlevel-nav{margin:0 auto; height:52px; padding:0;}  
#top_menu ul#mainlevel-nav {margin: 0 auto; padding: 0; list-style: none; height:52px; background: transparent url(http://zornet.ru/ZORNET/menu_separator.jpg) top left no-repeat;}  
#top_menu ul#mainlevel-nav li{float: left; padding: 0 1px; margin:0; height:52px; background: transparent url(http://zornet.ru/ZORNET/menu_separator.jpg) top right no-repeat;}  
#top_menu ul#mainlevel-nav li a, #top_menu ul#mainlevel-nav li a:visited{float:left; color:#eee9ca; display:block; font-family:Tahoma,Arial,sans-serif; font-size:14px; font-weight:bold; text-decoration:none; height:52px; line-height:43px; padding:0 25px;}  
#top_menu ul#mainlevel-nav li a:hover{background: transparent url(http://zornet.ru/ZORNET/but_hover.jpg) bottom center repeat-x; color: #b27b49; text-decoration: none; height: 52px;}  
.clr {clear: both; font-size:0; line-height:0;}  
.reset, .reset li { list-style: none; padding: 0; margin: 0; }  
.searchbar {margin-top: 8px; border: 1px solid #3f464c; border-width: 0 1px 1px 0; float: right; width: 150px; height: 26px; background: #191f24 url("http://zornet.ru/ZORNET/search.jpg") no-repeat;}  
.searchbar li {float: left; height: 26px;}  
.searchbar .lfield {width: 150px; padding-left: 2px; padding-right: 2px; overflow: hidden;}  
.searchbar .lfield input {text-align: right; font-style: italic; color: #8b99a8; height: 15px; width: 140px; border: 0 none; background: none; margin-top: 6px;}  
   
/* =============== */

Этот код как обычно все горизонтальные меню ставят. Копируем и прописываеи вверх сайта в самом низу.
Код
<div id="top_menu">  
<div style="margin:0 auto;float:left;">  
<tr><td><ul id="mainlevel-nav">  
<li><a href="Адрес страницы 1" class="mainlevel-nav">Страница 1</a></li>  
<li><a href="Адрес страницы 2" class="mainlevel-nav">Страница 2</a></li>  
<li><a href="Адрес страницы 3" class="mainlevel-nav">Страница 3</a></li>  
<li><a href="Адрес страницы 4" class="mainlevel-nav">Страница 4</a></li>  
<li><a href="Адрес страницы 5" class="mainlevel-nav">Страница 5</a></li>  
</ul>  
</div>  
<form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0; padding-right: 17px;" 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>  
</form>  
<div class="clr"></div></div>
14.02.2013 Просмотров: 2006 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar