Горизонтальное CSS меню для сайта (удобно резактировать!!!) Горизонтальное CSS меню для сайта By WinSkin
Вот решил зделать простое и лёгкое горизонтальное меню.
ПРИМЕР:
Это в CSS:
Code
/* Menus by winskin.ru */
#menu li {
display: inline-block;
list-style:none;
width: 98px;
height: 22px;
text-align: center;
padding-top: 3px;
background-repeat:no-repeat;
color: #ffffff;
background-position:center;
}
.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #363636;
background: #FFA500;
width: 944px;
border-left: 1px solid #363636;
border-right: 1px solid #363636;
border-top: 1px solid #363636
}
.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 0;
font: 12px Arial, Helvetica, sans-serif;
list-style-type: none;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 3px 8px;
border-right: 1px solid #363636;
color: #857040;
background: #FFA500;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: #E8E8E8; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}
/* --------- */
Это туда, где хотите видеть меню:
Code
<!-- МЕНЮ by winskin.ru -->
<DIV class="mattblacktabs">
<UL>
<LI><A href="/">Главная</A></LI>
<LI><A href="/index/0-2">Гостевая</A></LI>
<LI><A href="/load">каталог файлов</A></LI>
<LI><A href="/news">Новости сайта</A></LI>
<LI><A href="/dir">каталог сайтов</A></LI>
<LI><A href="ссылка">Видеотека</A></LI>
<LI><A href="ссылка">обоины</A></LI>
<LI><A href="http://winskin.ru">winskin.ru</A></LI>
<LI><A href="ссылка">Разное</A></LI>
<LI><A href="ссылка">Партнёрам</A></LI>
<LI><A href="/forum">форум сайта</A></LI>
<LI><A style="border-right:none; width: 33px;" href="ссылка">ссылка</A></LI></UL></DIV>
<!--/МЕНЮ-->
Источник: http://winskin.ru/
