Flyout Menu với CSS
- September 1, 2009
- 22 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.
) với lại web bây giờ nghe nói khách...
Có gì mà gấp chứ , không có thì copy...
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)