4842 fans
1036 reader
122 followers

Tạo menu 3 trạng thái

Publish by: Demon Warlock
In category: CSS/HTML
24 comments

Tutorial Details
Độ khó: Căn bản
Thời gian: 19:53 phút
File size: 40 Mb
Yêu cầu: Phù hợp cho tất cả các đối tượng lập trình viên

Menu ba trạng thái là dạng menu khi không có ai click nó một màu, khi người dùng dùng di chuột lên nó, no biến sang trạng thái khác và khi người dùng đang ở một trang, trạng thái liên quan đến trang đó sẽ được hiển thị. Có 2 cách bạn có thể dùng để tạo ra hiệu ứng này. Song với cách được chỉ ra trong video dưới đây sẽ tiết kiệm được tài nguyên máy chủ hơn và cũng nhanh hơn.

Demon Warlock

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

kishin douji zenki

anh dw oi cho em hoi la em co tao mot the div va dinh dang cho the div het roi nhung den luc chen the list vao thì các van ban trong the list no khong nam trong the div ma no cứ chụt xuống phía dưới thì là bị làm sao và khắc phục như thế nào ạ… em cảm ơn anh… Demon Warlock…..
trần thế anh

anh DW cho em hỏi, tại sao em code css xong, cái drop-down menu nhưng mỗi khi hover thì kích thước nó thay đổi chứ ko cố định như anh anh làm.
/*MAIN STRUCTURE*/
#page-waper{
margin: 0 auto;
width: 100%;
}
#main-menu{
background: url(images/menu_bg.png) no-repeat top;
width: 100%;
height:150px;
}
#menu-page-menu{
width: 960px;
margin: 0 auto;
padding: 30px 0px 0px 0px;
}
#menu-page-menu li{
float: left;
position: relative;
}
#menu-page-menu li a{
display:block;
color:#4b4b4b;
font-size: 16px;
padding: 5px 10px;
float: left;
}
#menu-page-menu li a:hover{
color: white;
background-color: #ab1088;
border: 3px white double ;
}
#menu-page-menu li ul{
display:none;
position:absolute;
top: 100%;
z-index:1000;
}
#menu-page-menu li:hover ul{
display:block;
width:100%;
}
#menu-page-menu li ul li{
background-color:#ab1088 ;
color: #cfcfcf;
width:100%
}
#menu-page-meu li ul a{
float: none;
font-size: 12px;
border-bottom: 1px solid white;
border-top: 1px solid white;
}
#menu-page-menu li ul a:hover{
background-color:#ab1088;
color: white;
font-weight: bolder;
font-size:12px;
}
// nếu anh có chút thời gian có thể nói rõ hơn về margin và padding đc ko? thật sự em bị bấn loạn vấn đề này, nhất là khi ứng dụng vào những đoạn ko có text @@

thân DW!
- phạm thị hòa
  
  hi. Cần xem lại Video. Đưa *{margin:0px; padding:0px;} về mặc định
Shikamaru

anh DW cho em hỏi nếu button có nhiều hơn 3 trạng thái thì làm sao ạ. Khi đó có cần phải xác định rõ vùng nào của background hiển thị lên bằng giá trị px ở vị trí x, y không. Chứ trong trường hợp này làm sao mà dùng top, center gì đó được ạ?
Em cảm ơn anh nhiêu!
- Bùi Mạnh Cường
  
  Bạn tham khảo đường link này để hiểu về background-position nhé: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position
  
  Theo mình hiểu sẽ có tối đa 9 trạng thái mình có thể thêm vào được đấy (nếu chỉ dùng top, center, left). Còn dùng px thì tất nhiên không giới hạn trạng thái rồi.
  
  Anh DW confirm giúp xem e hiểu thế có đúng không với, thanks anh!
Quang

Anh DW ơi cho em hỏi. Em muốn làm một menu như ở trang web này phải làm thế nào?
http://phutin.com.vn/vn/trang-chu/
Em đã cố gắng sử dụng three state menu nhưng không được.hx
- xuykaa
  
  ban su dung unltra menu lam dc het nho tai unltra menu+crack nha.ko co pm mình
NgaTuyết

Mình xài cái text e-editor nhưng ko biết cách làm hiện ra các Folder ở cột bên trái . các bạn chỉ cách m với , tks nhieu nhieu
pham duy

anh oi cho em hoi .neu ma dung bang php thi no chi co 1file la menu.php chang han. nhung khi trong menu cua anh la dung 3 trang HTML va o the body no co mot cai id=”home”.nhung neu la php thi chi can 1 file .the cai trang thai khi nguoi ta dang o trang day , lam sao no hien thi duoc dau tich o day .
Hà sa trường

anh à, hướng dẫn em cách cài CSS với, hix, Em ko biết phải cài thế nào nữa
- Phạm Tuấn Thanh
  
  CSS không phải phần mềm, không cần cài nha bạn. Bạn chỉ việc gõ code vào notepad chẳng hạn, lưu lại dưới dạng đuôi .css.
  Còn code thế nào thì bạn có thể học hỏi qua các video hướng dẫn của anh DW.
  Chúc bạn thành công nha
http://bokute.com bokute

Oh Thanks anh về cái nỳ, đang cần
Tự nhiên lại có hứng làm 1 website tĩnh )
Võ Tường Thọ

Anh DW ơi, cho em hỏi chút, em thấy trong tut của anh các thẻ lồng nhau như thế này , lúc em học ở trường, thầy khuyến cáo không nên làm như thế, như vậy có vấn đề gì không hả anh, cá nhân em nghĩ thì không nên để lồng nhau như vậy ạ?>”<
- Võ Tường Thọ
  
  ôi trời, mấy cái thẻ em để vào bị trình duyệt làm cho mất tiêu rồi, ý em là thẻ list và thẻ a trong tut nha a ^^
http://mientay.tk Hyson Thúc Thúc

Anh DW ơi!, anh giúp mọi người làm menu 4 trạng thái được không? nghĩa là cái menu 3 trạng thái của anh sẽ thêm 1 trạng thái nữa là menu nào xem qua rồi thì nó đỗi màu khác (tối hơn) giống như trang google vậy đó, trang nào end user vào rồi thì sau này gặp lại thì họ biết là vào rồi. (link có màu tối hơn)
- http://www.izwebz.com Demon Warlock
  
  Cái đó là trạng thái visited, e co thể khai báo trong CSS với a:visited. Khi khai báo link phải theo trình tự link, over, hover và visited.
http://bearsharks.com Clackken Smith

Quá trình này thì tôi nhớ DW đã có một bài viết về các bước để hình thành một website rồi. Còn các bước đưa lên thì không có gì nhiều, bạn có hosting, domain code . Chỉ vậy là đủ thôi.
http://Chưacó Thắng

Anh DW ơi anh có thể làm 1 video tutorial hướng dẫn cách đưa 1 trang wed lên mạng được không.
- http://bearsharks.com Clackken Smith
  
  Đưa lên mạng là sao em ?
  - Nguyễn bình Tú
    
    Tôi cũng đang mong video tutorial hướng dẫn đua 1 trang web lên net , rất cám ơn các bạn về những nhiệt tình và tạo ra trang web này
nhtera

Đọc trong này : http://www.izwebz.com/faqs/ có hết cái bác cần hỏi rồi
http://hienvic.tk phan van Hiến

anh admin ơi(anh viết bài này) cho hỏi phần mềm dùng để làm CSS tên là gì vậy? có thể gửi link cho em dowload được ko ah? thanks
http://www.izwebz.com Demon Warlock

Nếu nằm ngang thì thay vì xếp cạnh nhau em xếp chồng lên nhau. Nút sẽ hover qua nằm dưới, trạng thái thường nằm trên. Rồi set bachground top center cho nút thường, và bottom center cho hover.
Binhdtx

Đối với 5 tấm hình nằm ngang khi tạo hiệu ứng hover thì mình sẽ làm như thế nào anh DW nhỉ ? chưa hình dung lắm

Izwebz store

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.