Серое горизонтальное меню для ucoz

6379 просмотров Alan_Writer 26.05.2013

Демо ▶️

Серое горизонтальное меню для ucoz. Меню для ucoz в тёмных тонах (серое). Отлично будет гармонировать с любой шапкой сайта. Горизонтальное меню для ucoz легко и просто устанавливается - просто установите стили, и поставьте код самого меню в нужное место на сайте.

Установка меню

Скопируйте это себе в CSS:
Код
td.menu_left {background:url('http://wallaby.ucoz.ru/menu/menu_left.png') no-repeat;width:9px;height:57px;}  
td.menu_center {background:url('http://wallaby.ucoz.ru/menu/menu_center.png') repeat-x;height:57px;}  
td.menu_right {background:url('http://wallaby.ucoz.ru/menu/menu_right.png') no-repeat;width:283px;height:57px;}  

ul.topmenu {padding:0px 0 0 10px;margin:0;list-style:none;background:transparent;}  
ul.topmenu li {float:left;font-weight:bold;background: #2E9ACC;}  
ul.topmenu li a {background:url('http://wallaby.ucoz.ru/menu/menuli_a.png') no-repeat;height:41px;float:left;padding:0 15px;color:#fff;line-height: 41px;}  
ul.topmenu li a:link {background:url('http://wallaby.ucoz.ru/menu/menuli_a.png') no-repeat;text-decoration:none;color:#fff;}  
ul.topmenu li a:visited {background:url('http://wallaby.ucoz.ru/menu/menuli_a.png') no-repeat;text-decoration:none;color:#fff;}  
ul.topmenu li a:hover {background:url('http://wallaby.ucoz.ru/menu/menuli_a.png') no-repeat; opacity: 0.8; text-decoration:none; color:#fff;}  
ul.topmenu li a:active {background:url('http://wallaby.ucoz.ru/menu/menuli_a.png') no-repeat;text-decoration:none;color:#fff;}  
ul.topmenu li a.last_item {background:url('http://wallaby.ucoz.ru/menu/menuli_a.png') no-repeat;height:30px;float:left;padding:11px 1px 0 1px;}  

.searchbg {padding:12px 0 0 0;float:left;padding:16px 0 0 0;}  
input.search_input {background:url('http://wallaby.ucoz.ru/menu/sinput.png') no-repeat;width:188px;height:23px;float:left;border:0;padding:0 0 0 10px;font-size:12px;color:#bebebe;*padding:6px 0 0 10px;}  
input.search_but {background:url('http://wallaby.ucoz.ru/menu/search.png') no-repeat;display:block;width:69px;height:23px;line-height:23px;margin:0 10px 10px 0;background-position:0 0;float: right;}  
input.search_but:hover {background-position:0 -23px;}

Вставляем это туда, где вам нужно меню, обычно это Верхняя часть сайта:
Код
<table width="100%" cellpadding="0" cellspacing="0">
<a style="display:none;" href="http://fullweb.ucoz.ru/"></a>
<tr>
<td class="menu_left" align="left"></td>
<td class="menu_center" align="left">
<ul class="topmenu">
<li><a href="ссылка" title="Главная">Главная</a></li>
<li><a href="ссылка" title="Форум Веб-майстрів">Форум</a></li>
<li><a href="ссылка" title="Програм/Soft">Програмы</a></li>
<li><a href="ссылка" title="Скачать безплатно">Фильмы</a></li>
<li><a href="ссылка" title="Все для Веб-мастера">Все для Веб</a></li>
<li><a href="ссылка" title="Будь в курсе">RSS</a></li>
<li><a class="last_item"></a></li>
</ul>
</td>
<td class="menu_right" align="left">
<div class="searchbg">
<form action="/search/">
<input name="q" placeholder="Поиск по сайту..." type="text" class="search_input"/>  
<input class="search_but" type="image" src="http://wallaby.ucoz.ru/menu/spacer.gif"/>  
</form>
</div>
</td>
</tr>
</table>

Все готово!

Теги: меню для сайта, Серое, меню для ucoz, для uCoz, горизонтальное меню, серое меню
0 Комментариев