12:13
Установка:
Заливаем содержимое архива в корень сайта
На странице, где хотим видеть меню между:
Code
<head> и </head>
Вставляем:
Code
<style type="text/css">
/* --------------------------
AUTHOR : ST1M
Copyrights by ST1M
----------------------------*/
*{
margin:0;
padding:0;
}
body{
background:#fff;
color:#666;
font:12px/18px Tahoma, Arial, Helvetica, sans-serif;
}
#menu{
width:700px;
}
#menu ul{
list-style:none;
}
#menu li{
list-style:none;
display:block;
float:left;
margin:0 1px;
}
#menu li a{
display:block;
float:left;
height:52px;
color:#0e7b93;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
background:url(/images/menu_027_l.jpg) no-repeat left;
line-height:39px;
padding:0 0 0 18px;
text-decoration:none;
}
#menu li a span{
display:block;
float:left;
background:url(/images/menu_027_r.jpg) no-repeat right;
height:52px;
color:#0e7b93;
line-height:39px;
padding:0 36px 0 17px;
}
#menu li a:hover{
display:block;
float:left;
background:url(/images/menu_027_h_l.jpg) no-repeat left;
height:52px;
}
#menu li a:hover span{
display:block;
float:left;
background:url(/images/menu_027_h_r.jpg) no-repeat right;
color:#7c832d;
height:52px;
}
#menu li a.current{
display:block;
float:left;
height:52px;
color:#7c832d;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
background:url(/images/menu_027_h_l.jpg) no-repeat left;
line-height:39px;
padding:0 0 0 18px;
text-decoration:none;
}
#menu li a.current span{
display:block;
float:left;
background:url(/images/menu_027_h_r.jpg) no-repeat right;
height:52px;
color:#7c832d;
line-height:39px;
padding:0 36px 0 17px;
}</style>
Далее код вставляем туда, где хотим видеть само меню:
Code
<div id="menu">
<ul>
<li><a href="Ссылка" class="current"><span>Имя</span></a></li>
<li><a href="Ссылка"><span>Имя</span></a></li>
<li><a href="Ссылка"><span>Имя</span></a></li>
<li><a href="Ссылка"><span>Имя</span></a></li>
<li><a href="Ссылка"><span>Имя</span></a></li>
</ul>
</div>
