Flyout Menu với CSS
- September 1, 2009
- 35 comments
Giống như Drop Down menu Flyout menu cũng được sử dụng rộng rãi trên nhiều trang web. Đặc biệt là những trang web có nhiều nội dung và cần nhiều tầng menu để trình bay hết nội dung. Trong tutorial này, tôi sẽ hướng dẫn bạn cách tạo ra flyout menu hoàn toàn bằng CSS.
Thời lượng:19:14
Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire
File Size: 62.2MB
Hack IE 6: Để menu có thể hiển thị tốt trên IE 6 bạn cần download file whateverhover.htc và trong phần CSS bạn thêm
div#mainNav ul {
behavior: url(whateverhover.htc);
}
Get the Flash Player to see this content.
Không hoạt động trên IE 6 :p
Đúng rồi, nhưng lỗi này có thể hack được bằng java hoặc sử dụng .htc file và link đến nó trong style sheet.
Chỉ có điều IE6 giờ cũng ít người xài :p cho nên tôi cũng lười
Hay quá. Cám ơn bạn đã chia sẻ
website nay bo ich qua ,cam on ban nhe
nè bác DW có thể cho em biết có thể làm menu 2 cấp bằng CSS ko tức là menu có dạng tree ấn vào cái cha thì xổ ra 1 loạt cái con bên dưới ko
giống như phần mềm AllyNova Tree Menu v2.4 có thể tạo ra bằng javascript ý
Cái này dùng Javascrip + CSS hoặc jquery + CSS. Anh Demon Warlock đang làm tutorial này mà bạn. Không biết nên dùng cách nào thì tốt hơn… Javascrip và jQuery có gì khác nhau không…
Vậy giờ muốn các menu con ko hiện ra bên phải, mà hiện bên dưới thì làm sao bạn? Thanks trước bạn hen!
Thì bạn xem bài dropdown menu ý.
ko. tạo menu giống như thế này nè: http://it.dlu.edu.vn/Default.aspx
À! cái đó là một hiệu ứng khác của jQuery. Anh sẽ có tut về cái đó trong một ngày gần đây.
-moz-border-ratius:5px 5px 0px 0px;
-webkit-border-radius:5px 5px 0px 0px;
Anh xem giúp em,2 cái này hình như ko có tác dụng anh à.
À anh cho em hỏi Anh dùng soft gì mà chỉnh CSS nó thay đổi luôn vậy a.
-moz-border-ratius:5px 5px 0px 0px;
-webkit-border-radius:5px 5px 0px 0px;
Anh xem giúp em,2 cái này hình như ko có tác dụng anh à.
À anh cho em hỏi Anh dùng soft gì mà chỉnh CSS nó thay đổi luôn vậy a.
Hai thuộc tính đó chỉ làm việc với trình duyệt firefox, chrome và safari thôi.
Bác DW sử dụng addon của FF là web developer toolbar.
Một trang web bổ ích. cám ơn bạn
Bài viết rất hay….
E muốn hỏi anh về cách làm Menu như thế này :
Link1:http://i156.photobucket.com/albums/t6/dinhcoich/Menu-1.jpg
Link2:http://i156.photobucket.com/albums/t6/dinhcoich/MENUok.jpg
Thanks anh rất nhiều ! Hi vọng sẽ nhận dc trả lời sớm nhất từ anh ^^!
Menu dạng này Anh có video rồi mà. Em xem video tạo accordion menu với jQuery nhé.
khi dung IE sao menu con khong hien ra duoc vay? Con khi chay bang firefox thi lai hien duoc
(-_-) Thanks
hay dã man, làm thêm nhìu nhìu những video khác mà có ứng dụng css thêm nữa đi tác giả ơi
phần CSS:
/*css cua trang chinh*/
#container {
width: 750px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#header { height: 150px;
background: #DDDDDD;
padding: 0 0px;
}
/*cac thanh phan cua header*/
#logo{
float: left;
height: 150px;
width: 192px;
background: #345232;
}
#banner{
height: 110px;
width:550px;
background: #110022;
margin: 0 192px;
}
#navigation {
float: left;
height: 35px;
width: 550px;
padding: 0px;
margin: 0px 194px;
background: #abdcad;
}
ul li {
float: left;
list-style: none;
}
li a{
font-weight: bold;
text-decoration: none;
padding: 0em 6px;
}
li a:hover{
color:white;
background: #75A2B9;
}
#navigation{
float: left;
margin:
}
#header h1 {
margin: 0;
padding: 10px 0;
}
#sidebar1 {
float: left;
width: 192px;
background: #EBEBEB;
padding: 15px 0;
}
#sidebar1 h3,
#sidebar1 p {
margin-left: 10px;
margin-right: 10px;
}
#mainContent {
margin: 0 1.5em 0 13em;
}
#footer {
padding: 0 10px;
background:#DDDDDD;
}
#footer p {
margin: 0;
padding: 10px 0;
}
Phần index.html
New Document
<!– header –>
logo
banner
Trang chủ
Xem điểm
Chương trình đào tạo
Đăng kí
sidebar1 Content
Main Content
Footer
Anh xem giúp em vẫn chưa hoạtđộng chính xác!
@chung lần sau đừng post cả đống code css lên thế này . css thì phải gắn với html chứ
. Bạn up file của bạn làm rồi post link lên đây hoặc gửi mail cho anh DW .
Làm menu này thì phải dựa vào 2 cái chính: một là thuộc tính position trong css và hai là khi bình thường sẽ ẩn submenu đi và khi hover sẽ hiện nó lên .Đó là những ý chính bạn cần xoay quanh để làm nó
link file php và css day:http://www.mediafire.com/?sharekey=9c03a2ae4efdd2c3ab1eab3e9fa335caf4b1b9d6aec90e67
mọi người xem phần menu khi đưa chuột vào nó hiển thị hover không chuẩn, mình muốn nó chỉ hiện thị vừa khít phần navigation thôi ( cách làm là đưa text vè giữa, nhưng mình chưa làm dc)
Anh có thể hướng dẫn em làm cái hiệu ứng menu giống như website này không anh
http://vannyneo.com/
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
trang này có bạn nè
đây là 1 plugin của jquery gọi là lavalamp
http://www.gmarwaha.com/jquery/lavalamp/zip/lavalamp-0.2.0.zip
link trong trang đó luôn
bạn down về thử nha
Your comment is awaiting moderation.
bác DW ơi sao lại có dòng này nhỉ
Anh để chế độ theo dõi comment vì tránh spam, nên khi comment có nhiều hơn 2 đường liên kết thì phải approve mới hiển thị được.
Bài viết của bạn rất dễ hiểu, cho mình hỏi thêm là
Giờ mình muốn khi click vào Sub menu thì sub đó hiện luôn bên dưới và không ẩn đi nữa, còn các sub khác vẫn giữ nguyên(vẫn ẩn). Mình phải tạo thêm class cho của sub à? hay xóa phần “ul li ul”?.
Cám ơn bạn
Cảm ơn izwebz.com và chúc izwebz ngày càng lớn mạnh và phát huy được tiêu chí hành động của mình.Cảm ơn rất nhiều!
sao em chinh css trên firefox ma no ko thay đổi gì cả.cứu em voi anh DW
video nay su dung soft gi de viet code vay, va soft gi thay viet css no thay doi luon vay anh
Ko biết có bao nhiêu bác hỏi câu này rồi . Đọc FAQ đi bác sẽ có câu trả lời
http://www.izwebz.com/faqs/
chào bạn.Tôi mới biết được trang này và tôi đã xem,Nó rất hữu ích.Tôi kính phục bạn về mọi mặt cả về phong cách và hiểu biết của bạn về lập trình, nói như vậy có khen bạn quá không vì tôi đã xem thông tin tác giả của trang web nay.Tôi mới học lập trình web nên tôi có rất nhiều câu hỏi để hỏi bạn.
Trước hết tôi xin hỏi 2 câu như sau:
1, tôi làm 1 cái menu thả xuống như của bạn nhưng thực hiện trên Dreamweaver CS4.lưu lại file dưới đuôi .html khi làm song cho trình duyệt explorer7 thì nhiều cái nó không đúng như yêu cầu,nhưng khi cho chạy trên Mozilla firefox thì chạy đúng như yêu cầu.Tôi có ghép trang này vào trang php của tôi với dòng lệnh . khi làm song cho chạy trên mazilla fiefox thì cấu trúc trang web của tôi nó bị phá vỡ,trang web của tôi nó không hiển thị ra giữa mà hiển thị sát mép trái.nhìn vào đoạn code cũng bị phá vỡ tôi kẻ các ô bằng table rồi trèn code vào không dùng div.bây giờ tôi muốn tất cả trở về như vị trí cũ thì khắc phục chúng ra sao.
2, thay vì tạo menu như của bạn bằng html tôi tạo thanh công cụ bằng trang menu có sẵn trong Dream CS4 rồi sửa theo ý muốn của mình. rồi lưu dưới dạng .php nhưng không hiểu sao khi tôi tạo một cái menu mới với công cụ trên nhưng tôi chỉnh sửa theo dạng khác nhưng khi nhìn vào đoạn code mình làm thì tất cả cái gì mình sửa thì các trang menu khác mình đã làm trước kia cũng thay đổi theo(trong trang CSS). tôi không hiểu vì sao lại như vậy.
Bạn trả lời giúp tôi nha.tôi ngoại ngữ Anh rất kém nên có phần hạn chế tìm hiểu tài liệu bằng tiếng anh.Chúc bạn có nhiều bài hay để đăng lên chia sẻ cùng mọi người.
Về các lỗi của bạn tôi đã đọc qua và thấy rằng bạn còn phụ thuộc quá nhiều vào Editor. Bạn sử dụng DW sẽ giúp bạn thao tác tạo nhanh, nhưng theo đó lại tạo ra những class hoặc ID không cần thiết, sẽ làm cho code của bạn rối ren, dẫn đến khi chỉnh sửa sẽ gây lỗi cho toàn trang.
Với cấu trúc menu, bạn chỉ sử dụng 2 thẻ ul và vài li tùy theo yêu cầu của bạn, như thế bạn có thể code tay, nếu khi bạn code tay vẫn không được tôi sẽ sửa code đó cho bạn và hướng dẫn cụ thể. Bạn vui lòng code và nén lại gửi cho tôi.
Thật tình cờ hôm nay em mới biết đến trang này qua một từ khóa trên google là: “tự học làm flash”. Cảm ơn 2 anh DW và CS ( Counter-stricker
) nhé. Đọc mục giới thiệu của hai anh có rất nhiều điểm giống em, đơn cử như học một lĩnh vực chả liên quan ji đến thiết kế web nhưng lại cứ đam mê, thành ra cứ phải mày mò tỉ mẩn, may có trang của 2 anh chia sẻ rất tận tình nên có lẽ từ hôm nay em sẽ nhiệt tình học từ những bài viết của các anh. Cảm ơn các anh rất nhiều, chúc các anh sức khỏe, viết nhiều,viết khỏe, nhiều donate 
để duy trì và luôn cống hiến cho những con gà như em được học hỏi nhiều.