Phong Điền School

Phong Điền School
 
Trang ChínhTrang Chính  ShopShop  CalendarCalendar  GalleryGallery  Trợ giúpTrợ giúp  Tìm kiếmTìm kiếm  Thành viênThành viên  NhómNhóm  Đăng kýĐăng ký  Đăng Nhập  
Latest topics
» Share Skin Teen Click
Sat Mar 14, 2015 2:09 pm by lilkhangvn

» Tối Hậu Thư
Sun Sep 09, 2012 12:38 am by bad_boy

»  [Skin]Share skin 8xStudio v3
Tue Jul 10, 2012 2:26 am by kenbi05

» 9.Skin Hihihehe
Tue Jul 10, 2012 2:25 am by kenbi05

»  Share Skin Win Vista
Wed Feb 29, 2012 7:35 pm by than_chet09

» [ĐH] BĐT trong tam giác
Mon Nov 14, 2011 1:19 pm by dinhcu_vip

» Khai Trương Shop Online Cho Forumotion
Sun Nov 06, 2011 1:52 pm by Admin

»  [Share] nhtera_noel_ipskin
Thu Oct 13, 2011 8:04 am by thanthongquandai

»  [share] Skin Hiphop rất đẹp(có banner trống)
Sun Oct 02, 2011 1:10 pm by pkbn

» share skin skin4u.co.cc
Sun Oct 02, 2011 1:09 pm by pkbn

» Stop Stop stop
Fri Sep 30, 2011 3:26 pm by Admin

» Anh Hải ơi! cho em hỏi?
Wed Sep 14, 2011 9:27 pm by cingau

» [ New ] 11A2 THPT Tam Giang
Tue Aug 30, 2011 2:26 pm by vintra_1101

» Chao các bạn rất vui đc lam quen
Tue Aug 30, 2011 2:20 pm by vintra_1101

»  [Share] Skin Teen 888
Mon May 16, 2011 2:44 pm by k2teen

» Xe tay ga BMW Concept C xuất hiện ở Mỹ
Tue May 03, 2011 5:35 pm by Admin

» 'Chim ưng' Suzuki Hayabusa 2011 đầu tiên tại Việt Nam
Tue May 03, 2011 5:34 pm by Admin

» Mai Phương Thúy từng khiến C.Ronaldo 'tròn mắt'
Fri Apr 29, 2011 6:56 pm by Admin

» SIêu Phẩm Xuân Này Con Không Về
Fri Apr 29, 2011 11:25 am by Admin

» Yamaha Exciter 2011 trình làng
Tue Apr 26, 2011 6:50 pm by Admin

» Thăm mộ cha sau thảm họa sóng thần
Sun Apr 24, 2011 7:36 pm by Admin


Share | 

 

 Cách làm menu đẹp cho 4rum

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down 
Tue Nov 30, 2010 11:24 am

avatar

Admin

Admin

Admin

Xem lý lịch thành viên http://phongdienit.co.cc
Giới tính : Nam
Tổng Số Bài Viết Tổng Số Bài Viết : 302
Tiền Tiền : 812
Số Lần Cảm Ơn Số Lần Cảm Ơn : 15
Birthday Birthday : 05/07/1995
Ngày Tham Gia Ngày Tham Gia : 12/04/2010
Tuổi Tuổi : 22
Đến từ Đến từ : Khánh Mỹ-Phong Điền-Thừa Thiên Huế

Bài gửiTiêu đề: Cách làm menu đẹp cho 4rum

 
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>

Tài Sản Admin

:


Tue Nov 30, 2010 9:06 pm

avatar

Mod

Six_Alex

Mod

Xem lý lịch thành viên
Giới tính : Nữ
Tổng Số Bài Viết Tổng Số Bài Viết : 34
Tiền Tiền : 80
Số Lần Cảm Ơn Số Lần Cảm Ơn : 1
Birthday Birthday : 19/02/1994
Ngày Tham Gia Ngày Tham Gia : 29/09/2010
Tuổi Tuổi : 23

Bài gửiTiêu đề: Re: Cách làm menu đẹp cho 4rum

 
cảm ơn admin nhìu

Tài Sản Six_Alex

:


Tue Nov 30, 2010 9:50 pm

avatar

Thành Viên Mới

Gin

Thành Viên Mới

Xem lý lịch thành viên
Giới tính : Nam
Tổng Số Bài Viết Tổng Số Bài Viết : 1
Tiền Tiền : 1
Số Lần Cảm Ơn Số Lần Cảm Ơn : 0
Birthday Birthday : 25/12/1993
Ngày Tham Gia Ngày Tham Gia : 30/11/2010
Tuổi Tuổi : 23

Bài gửiTiêu đề: Re: Cách làm menu đẹp cho 4rum

 
^^. Cm phát nè :D

Tài Sản Gin





Sponsored content

Bài gửiTiêu đề: Re: Cách làm menu đẹp cho 4rum

 

Tài Sản Sponsored content

 

Cách làm menu đẹp cho 4rum

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang 
Trang 1 trong tổng số 1 trang

Permissions in this forum:Bạn không có quyền trả lời bài viết
Phong Điền School :: Chuyện Bên Lề :: Code, Javascript, HTML, CSS-

Powered by PhPbB® Version 2.0
Copyright ©2000 - 2011, Forumotion.
AdamZone 2011 SKIN - A1Rip by Ligerv
Cơ quan chủ quản: Trung tâm sáng kiến sức khỏe và dân số (CCIHP)
Trang xem tốt trên trình duyệt FF,Chrome, IE7 trở lên
Free forum | © phpBB | Free forum support | Liên hệ | Report an abuse | Create a blog