demo
http://trekhuyettat.sos-forum.net/css
- Code:
-
/* CSS Document */
/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #21C921;
padding: 0px;
height: 32px;
background: url('http://i36.servimg.com/u/f36/14/26/60/46/thanhn12.jpg');
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}
/*^'^ Primary Items ^'^*/
#nav-container a{
padding:6px 17px 7px 32px;
margin: 1px 0px 0px 0px;
color: #FFFFFA;
font-family: Times New Roman, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url('');
background-repeat: no-repeat;
background-position: top;
}
#nav-container a:hover{
color: #33FF00;
background: url('');
background-repeat: no-repeat;
background-position: center;
}
/*^'^ Secondary Items Container ^'^*/
#nav-container div, #nav-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url('');
background-repeat: repeat-x;
background-color: #70B1FB;
border-bottom: 1px solid #CA6500;
}
/*^'^ Secondary Items ^'^*/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url('http://i36.servimg.com/u/f36/14/26/60/46/itemse10.jpg');
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:12px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 150px;
}
/*^'^ Secondary Items Hover State ^'^*/
#nav-container div a:hover, #nav-container ul a:hover{
background-color: #FFFFFF;
background: url('http://i36.servimg.com/u/f36/14/26/60/46/itemse11.jpg');
background-repeat: no-repeat;
color:#CC0000;
}
/*^'^ Secondary Item Titles ^'^*/
#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Times New Roman, Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url('http://i36.servimg.com/u/f36/14/26/60/46/itemse10.gif'); */
background-repeat: no-repeat;
font-weight:bold;
}
/*^'^ Horizontal Dividers ^'^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}
/*^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}
1. Trong phần CSS có rất nhiều thứ để sửa liên quan đến màu nền của thanh
menu, màu chữ , cỡ chữ, màu chữ khi rê chuột đến .v.v... cháu cứ từ từ nghiên cứu sửa sau. Trước mắt cháu chú ý con số 32 trong dòng này :
padding:6px 17px 7px 32px; đó là khoảng cách giữa các
menu trên thanh
menu. Chỉnh sao cho các
menu trải đều trên thanh. Nếu nhỏ quá nó dồn hết sang đầu bên trái xấu, nếu lớn quá thì phần bên phải sẽ tràn xuống dòng dưới. Của chú có 8
menu nên chú lấy 32, nếu cháu có ít hơn thì tăng số này lên, ngược lại thì giảm xuống.
2. Phần menu chèn trong overal header : Cái này phải nghiên cứu kỹ của bác và sửa thôi. chỉ nói cách để thêm các
menu con thôi.
Ví dụ đây là một
menu có tên là "
Menu mẹ" , Trong đó có 4
menu con:
- Code:
-
<li><a class="item-primary" href="#" target="_self">[b]Menu[/b] mẹ</a>
<ul style="width:150px;">
<li> <a href="link 1">[b]Menu[/b] con 1</a></li>
<li> <a href="link 2">[b]Menu[/b] con 2</a></li>
<li> <a href="link 3">[b]Menu[/b] con 3</a></li>
<li> <a href="link 4">[b]Menu[/b] con 4</a></li>
</ul>
</li>
Bây giờ cháu muốn thêm 3
menu cháu vào
menu con 3 thì thay
<li> <a href="link 3">
Menu con 3</a></li>
- Code:
-
<li><a class="item-primary" href="#" target="_self">[b]Menu[/b] con 3</a>
<ul style="width:150px;">
<li> <a href="link 3-1">[b]Menu[/b] cháu 3-1</a></li>
<li> <a href="link 3-2">[b]Menu[/b] cháu 3-2</a></li>
<li> <a href="link 3-3">[b]Menu[/b] cháu 3-3</a></li>
</ul>
</li>
Kết quả là thế này:
- Code:
-
<li><a class="item-primary" href="#" target="_self">[b]Menu[/b] mẹ</a>
<ul style="width:150px;">
<li> <a href="link 1">[b]Menu[/b] con 1</a></li>
<li> <a href="link 2">[b]Menu[/b] con 2</a></li>
<li><a class="item-primary" href="#" target="_self">[b]Menu[/b] con 3</a>
<ul style="width:150px;">
<li> <a href="link 3-1">[b]Menu[/b] cháu 3-1</a></li>
<li> <a href="link 3-2">[b]Menu[/b] cháu 3-2</a></li>
<li> <a href="link 3-3">[b]Menu[/b] cháu 3-3</a></li>
</ul>
</li>
<li> <a href="link 4">[b]Menu[/b] con 4</a></li>
</ul>
</li>
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
CHÚ CHÈN Ở ĐÂY </table>
Trang Chính 
Shop 
Tổng Số Bài Viết
Tiêu đề: Cách làm menu đẹp cho 4rum
