web-touristМеню с табове.
Автор: roody
Слагате този код между <body></body>таговете на вашата страница:
<div id="tn">
<ul id="navtl">
<li id="tn_print"><a href="/print">Print</a>
<li id="tn_design"><a href="/design">Design</a>
<li id="tn_mail" class="active"><a href="/mail">Mail</a>
<li id="tn_support"><a href="/support">Support</a>
</ul>
</div>А това между <head></head>таговете:
<link rel="stylesheet" type="text/css" href="style.css" media="all">Правите 1 style.css и го слагате в директорията на страницата:
/* HC COMMON */
body {
margin: 0; padding: 0; text-align: center;
font-family: Arial, Helvetica, sans-serif; color: #333;
background: #a3a3a3 url(images/bg.gif) repeat-x top center;
}
#tn {
position: absolute;
left: -4px;
top: 94px;
width: 738px;
}
#tn ul {
font-family: Arial, Helvetica, sans-serif;
padding: 0;
list-style: none;
margin: 0 0 0 26px;
}
#tn ul li {
display: block;
float: left;
margin: 0;
padding: 0;
position: relative;
}
#tn ul li a {
display: block;
float: left;
padding: 0;
position: relative;
margin: 0 0 0 -28px;
height: 38px;
line-height: 38px;
text-transform: none;
color: #fff;
text-decoration: none;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 0px;
font-weight: bold;
text-indent: -15em;
overflow: hidden;
width: 108px;
}
#tn ul li:hover {
}
#tn ul li.over,
#tn ul li:hover {
z-index: 9099999 !important;
}
#tn ul li:hover a,
#tn ul li.over a,
#tn ul li a:hover {
background-position: 0 -41px !important;
z-index: 9099999 !important;
}
#tn ul li.active a{
background-position: 0 38px !important;
z-index: 9099999 !important;
}
#tn ul li#tn_print a {
background-image: url(images/tab-print.png);
z-index: 10;
}
#tn ul li#tn_design a {
background-image: url(images/tab-design.png);
z-index: 9;
}
#tn ul li#tn_mail a {
background-image: url(images/tab-mail.png);
z-index: 8;
width: 95px;
}
#tn ul li#tn_support a {
background-image: url(images/tab-support.png);
z-index: 7;
}Картинки /слагат се в папка images/.
