Установка горизонтального меню коричневого цвета
Вставляем в ваши таблицы стилей (CSS) (Дизайн - Управление дизайном (CSS)), (проще вставить в конец таблицы, хотя можете вставить между любыми двумя блоками, если понимаете где начало и конец блока), следующий код:
Код
{
margin:0;
padding:0;
}
body{
background:#fff;
color:#666;
font:12px/18px Tahoma, Arial, Helvetica, sans-serif;
}
#menu{
width:700px;
height:48px;
background:url(http://webanfarwol.ru/IMG3/menu_013_bg.jpg) no-repeat;
margin:15px;
}
#menu ul{
list-style:none;
padding:0 15px;
}
#menu li{
list-style:none;
display:block;
float:left;
margin:0 10px;
}
#menu li a{
display:block;
float:left;
color:#c39e8f;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
line-height:48px;
padding:0 0 0 12px;
text-decoration:none;
cursor:pointer;
}
#menu li a span{
display:block;
float:left;
color:#c39e8f;
line-height:48px;
padding:0 24px 0 10px;
}
#menu li a:hover{
display:block;
float:left;
background:url(http://webanfarwol.ru/IMG3/menu_013_h_l.jpg) no-repeat left center;
height:48px;
}
#menu li a:hover span{
display:block;
float:left;
background:url(http://webanfarwol.ru/IMG3/menu_013_h_r.jpg) no-repeat right center;
color:#fff;
height:48px;
}
#menu li a.current{
display:block;
float:left;
color:#fff;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
background:url(http://webanfarwol.ru/IMG3/menu_013_h_l.jpg) no-repeat left center;
line-height:28px;
padding:0 0 0 12px;
text-decoration:none;
}
#menu li a.current span{
display:block;
float:left;
background:url(http://webanfarwol.ru/IMG3/menu_013_h_r.jpg) no-repeat right center;
color:#fff;
line-height:48px;
padding:0 24px 0 10px;
}
Сохраняем.
Отлично, теперь в то место где должна помещаться у вас горизонтальная навигация вставляем следующий код (Можно например в (Дизайн - Управление дизайном (шаблоны) - Верхняя часть сайта)(Перед последними ключами
</table>
</td></tr>
</table>
Добавьте пустую строку и вставляйте в нее)):
<div id="menu">
<ul>
<li><a href="#" class="current"><span>home</span></a></li>
<li><a href="#"><span>about us</span></a></li>
<li><a href="#"><span>services</span></a></li>
<li><a href="#"><span>solutions</span></a></li>
<li><a href="#"><span>contact us</span></a></li>
</ul>
Сохраняем и смотрим сайт.
Если пунктов меню не хватает, добавьте нужное количество пустых строк между любыми строками модуля, содержащими "#" (например между строками содержащими (services) и (solutions)), затем в эти строки скопируйте содержимое, скажем, строки содержащей (solutions), получите соответствующее количество одинаковых строк, что на сайте отобразится в виде нескольких одинаковых пунктов меню. Если пункты лишние, просто удалите нужное количество строк, содержащих "#" (Верхняя из строк, содержащих этот символ, рассчитана под кнопку (Главная), если это у вас не основное меню и переход на главную страницу с него не нужен, можете удалить и верхнюю строку). Теперь можете менять названия (home, about us, services, solutions, contact us) на нужные вам, а вместо # ставьте ваши ссылки (ссылки на нужные вам страницы вашего сайта (Чтобы посмотреть какая ссылка соответствует какой странице сайта, просто зайдите на нужную страницу и в адресной строке браузера увидите ссылку на текущую страницу)).
Настройка меню закончена.
| 
