Loading post navigation ...
 
 

Pro page

51
Nhận xét

Mega Dropdown Menu CSS

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Có 1 số bạn yêu cầu muốn mình share cái menu hiện tại mình đang dùng (mang phong cách của trang Zing), nhưng bây giờ mình mới chia sẻ được. Nói thật, nếu chia sẻ thì mình chỉ cần đưa ngay đoạn code cho các bạn là xong, chứ không phải đợi tới bây giờ mình mới chia sẻ, nhưng có 1 điều là khi chia sẻ rồi thì hướng dẫn các bạn sao đây, thực sự menu mình đang dùng là lấy source gần như từ của trang news.zing.vn, vì thế mà nó hơi rắc rối, ngay chính mình khi lấy về dùng cũng phải nhọc nhằn chỉnh sửa lại để dùng.

Để đơn giản cho các bạn sử dụng cũng như cho mình viết bài hướng dẫn, nên mình đã quyết định ngồi code lại cái menu này. Vẫn lấy phong cách của Zing, nhưng code thì mình viết lại hoàn toàn.

Ưu điểm của Mega Dropdown này là nó chỉ dùng CSS, nên khá nhẹ, và 1 cái nữa là phần dropdown các bạn có thể tùy biến nhiều thứ trong đó, chứ không đơn thuần chỉ hiện các liên kết con. Bởi thế nó mới được gọi là Mega Menu. Và nhược điểm của menu này là không hiển thị được submenu trên IE6. Thật ra nhược điểm này không phải là nhược điểm của thủ thuật mà là của chính blogger, hình như blogger nó không hỗ trợ file htc. Ngay cả host demo của mình cũng không chạy được, nhưng mình test offline trên máy tính thì rất ok.

Vì thế nếu bạn nào muốn dùng cái menu này thì sẽ phải chấp nhận việc nó không sổ submenu trên IE6. Còn từ IE7 trở nên thì vẫn chạy bình thường.

Các bạn có thể xem DEMO ở đây.

Hình ảnh minh họa

A. Sau đây là code của thủ thuật:
- Có 2 cách để thêm vào blog, 1 là các bạn chèn tất cả code của nó vào 1 widget HTML/javascript, 2 là các bạn chỉ chèn code HTML vào widget HTML/javascript, còn code CSS thì các bạn có thể add vào template, ngay trước dòng code </head>
- và đây là code của thủ thuật:

Code CSS:
<style type="text/css">
#fdmega-menu ul {list-style: none;}

ul#topnav {
float: left;
width: 650px;
position: relative;
height: 39px;
background: #0082ff;
}

ul#topnav li {
float: left;
height: 39px;
padding: 0px;
background: url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/right-li-nobg.png) no-repeat top right;
}

ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}

ul#topnav li:hover {
background: #ff7d00 url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/top-li-hv.png) repeat-x top left;
}

ul#topnav li.mg-home {
background:url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/home-ico-bg.png) no-repeat top right!important;
width:45px;
}

ul#topnav li.mg-home a {height:19px;}

ul#topnav li div.sub {
position: absolute;
top: 39px;
background: #ff7d00;
padding:5px;
display: none;
border-right:4px solid #0082ff;
border-left:4px solid #0082ff;
border-bottom:4px solid #0082ff;
color:#fff;
}
ul#topnav li:hover div.sub {display: block;}
ul#topnav li div.sub p {margin-bottom:5px;text-align:justify;}

ul#topnav li div.sub div.cont {float: left;padding:5px;}
ul#topnav li div.sub div.cont h3 {}
ul#topnav li div.sub div.cont a{display:block; margin:0;padding:0;padding:0 0 5px;color:#ddd;}
ul#topnav li div.sub div.cont a:hover{color:#fff;}

ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}

ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}

</style>
- Lưu ý: các file hình ảnh có trong code CSS các bạn nên download về và up lên host lưu trữ ảnh nào đó để sử dụng, tránh trường hợp host của mình gặp sự cố.

Code HTML:
<div id="fdmega-menu">
<ul id="topnav">
<li class="mg-home"><a href="#"></a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
<li><a href="#">Menu 3</a>
<div class="sub ms3">
<div class="cont cs31">
<a href="#">Sub 3.1 (120px)</a>
<a href="#">Sub 3.2 (120px)</a>
<a href="#">Sub 3.3 (120px)</a>
</div>
<div class="cont cs31">
<a href="#">Sub 3.1 (120px)</a>
<a href="#">Sub 3.2 (120px)</a>
<a href="#">Sub 3.3 (120px)</a>
</div>
</div>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a>
<div class="sub ms5">
<b>James Gallagher</b><br/>
<span style="font-size:90%"><i>Health reporter, BBC News</i></span>
<p>Are bean sprouts in the clear? The simple answer is no, even though the early test results have come back negative.</p>
<p>The most compelling evidence so far has not come from the microbiology lab, but traditional detective work. Officials were able to link the main outbreaks with bean sprouts from one farm in northern Germany.</p>
<p>They will wait for test results from the remaining 17 samples for final confirmation. However, the prospect remains that no trace of E. coli will ever be found, since any contaminated produce would have been farmed and on the shelves weeks ago.</p>
<span style="font-size:90%"><i>Trich BBC</i></span>
</div>
</li>
</ul>
</div>

B. Sau đây là 1 vài hướng dẫn chỉnh sửa code HTML cũng như CSS
- Sau khi chèn code vào, các bạn sẽ gặp trường hợp như thế này:
- Việc bị lệch này là do vị trí của menu chính và menu phụ không khớp với nhau. Không khớp với nhau có nhiều lý do, ví dụ bạn thay đổi tên menu, độ rộng của menu chính sẽ thay đổi, dẫn tới menu phụ bị lệch.
- Để chỉnh vị trí của menu phụ với menu chính các bạn xem code CSS bên dưới:
...
...
ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}
...
...
- ở code trên ta có 5 class là ms1, ms2,... ms5 tương ứng với các chính menu1, menu2,... menu5 (như trong demo)
- Các class này để tùy chỉnh vị trí, độ rộng , màu nền ... của các vùng hiển thị của submenu.
- Lệnh left:118px; (của class ms2) chính là lệnh để tùy chỉnh vị trí của submenu so với biên ngang bên trái của menu chính. Ví dụ như hình bên dưới :

- Sau khi điều chỉnh vị trí các submenu xong, ta sẽ đi vào phần tùy chỉnh nội dung bên trong của các submenu. Ở đây ta sẽ lấy ví dụ submenu 2.
- Đây là code HTML của nó :
...
...
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
...
...
- Ta thấy thẻ <div class="sub ms2"> chính là khu vực hiển thị của submenu, trong thẻ div này sẽ có tiếp 3 thẻ <div class="cont cs21"> , 3 thẻ div này chính là 3 cột nhỏ trong submenu2. Như hình bên dưới:
- ta thấy trong code CSS có đoạn như thế này :
...
...
ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}
...
...
- ul#topnav li div.sub div.cs21 chính là class để tùy chỉnh độ rộng của các cột trong submenu2. Ở trên mình chỉ thêm class cho 2 submenu2submenu3, nếu muốn các bạn có thể thêm tương tự như :
...
...
ul#topnav li div.sub div.cs11 {width:135px;}
ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}
ul#topnav li div.sub div.cs41 {width:80px;}
ul#topnav li div.sub div.cs51 {width:190px;}
...
...
- Ở trong demo, mình cho các cột trong submenu2submenu3 bằng nhau, nêu chỉ có class là cs21cs31, nếu muốn các cột có độ rộng khác nhau thì các bạn có thể tùy chỉnh lại code code. Ví dụ như mình sẽ tùy chỉnh lại của submenu2, mỗi cột có độ rộng khác nhau, như bên dưới:
...
...
ul#topnav li div.sub div.cs21 {width:135px;}
ul#topnav li div.sub div.cs22 {width:90px;}
ul#topnav li div.sub div.cs23 {width:120px;}
...
...
- tức là từ việc chỉ sử dụng chung 1 class cs21 cho tất cả các cột thì mình sẽ tùy chỉnh lại, mỗi cột có 1 class riêng (cs21, cs22, cs23). Và code HTML của nó sẽ là như thế này :
...
...
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs22">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs23">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
...
...

- Ngoài ra nếu các bạn muốn thêm hình nền riêng cho mỗi sub thì cũng có thể thêm vào, ví dụ như trong demo ta có hình nền của submenu5, và bên dưới là code CSS mà các bạn có thể tùy chỉnh để thêm hình nền vào:
...
...
ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}
...
...

- các bạn thêm hình nền tương tự như class ms5 (của submenu5).
- Ở trên các class ms1ms4 mình để trống do các menu4menu1 trong demo không có submenu, khi có submenu thì các bạn thêm vào giá trị độ rộng và vị trí cách biên ngang cho các submenu này.

Hy vọng các bạn có thể thực hiện nó với các hướng dẫn cơ bản trên.
Menu mega dropdown này trước khi còn test offline, mình cảm thấy rất tâm đắc với nó, nhưng khi add vô rồi thì lại gặp sự cố là blogger không support file htc, nên cũng hơi nản. Thậm chí mình còn có ý định sẽ không post bài này. Nhưng rồi nghĩ lại cũng sẽ có 1 số người cần nó, và rồi cũng cố ngồi trước máy tính để soạn bài hướng dẫn này.

Chúc các bạn thành công.


Enter your mail address:

51

May Thy

Menu dropdown rất tiện ích nhưng áp dụng thì hơi phức tạp nhỉ. Với lại dropdown chèn vào blog của mình nhìn không được vừa vặn cho lắm, huhu!

Pig

thích hợp với các blog đa dạng category như của anh Dũng, nhìn rất hợp lí

Yolks

Cái này hơi ngoài lề 1 tí : Anh dũng nhận dc email chưa, em gửi nó vào email YH của anh rồi
P/s:Cái mega này nhìn thấy cổ điển quá nhỉ?

Hiếu bò

Loại menu này chỉ hợp với Blog có nhiều category hoặc nội dung được phân thành nhiều thể loại, blog mình mà áp dụng cái này chắc điên mất ^^!

Lê Trương Vĩnh Trung

Mấy cái menu dạng này đẹp thật nhưng tùy blog mà dùng

Hạnh Beauty

bài viết rất công phu, thanks bác!

Khách (ẩn danh)

wow ! Tuyệt quá D ơi. ! chờ mãi mới được share bài này đó, phải test thử mới được. !ồ ze.

A ma Dũng ơi, D co biết làm một form liên hệ không zi, mình c tìm trên mạng rùi mà cái form nào cũng bằng lập trình PHP hít, mà m thì bó tay với PHP. Dũng có thể viết một bài về Contact mail không dùng mả capcha không ?

Khách (ẩn danh)

Ah, theo b tao menu guiong trang vnexpress thi dung co the doi mau cho menu duoc khong ? minh rat thich mau xanh giong trang http://www.phuongkhuongmai.gov.vn, lam hoai ma khong dc, chan.

Blog Thông Tin

rất hay, cám ơn FD nhiều

Khách (ẩn danh)

Cảm bác FD rất nhiều - bài viết rất hay và công phu - em luôn ủng hộ bác :D

Nguyen Duc

Em ăn cắp cái Note của bác có sao ko bác Dũng ;))

Unknown

Đợi một hai bữa nữa hết lười rồi thử luôn :D
Mình thích menu này lâu roài :D

Nhân tiện Dzũng ghé bên mình dòm phát :( sao mà cái propage load lâu gấp 5 lần bên Dzũng, trong khi lượng bài hiển thị trên mỗi page chỉ hơn blog của Dzũng có gấp đôi

Unknown

Mà công nhận bài viết rất công phu :D Thank Dzũng :D
Nội chụp hình và điền ghi chú cho đẹp và vừa ý như mớ ảnh minh họa của bài viết này cũng ngốn hết 3-4 tiếng đồng hồ ấy nhỉ ^^

Phan Dũng

mấy bữa nay đi làm về mệt quá, hôm qua chỉ kịp sửa lại cái feature post.

@Nguyễn Đức : cứ tự nhiên bạn, có điều nên chỉnh sửa lại code CSS để cho cái note nó tông/ tông với blog của bạn :D, cái này mình cũng lấy từ Blogger mà :D

@Ngân: cái propage hiện tại đúng là load hơi lâu, ko biết có phải do feed của blogger dạo này có vấn đề gì ko. bên mình cũng cảm thấy hơi lâu, đang cố gắng dẹp cho gọn lại.
- còn cái bài viết này thì đúng là cũng hơi lâu thiệt, nhưng phần làm ảnh chú thích cũng ko tới 3 hay 4 tiếng gì đâu Ngân :D, mình viết đến đâu chụp ảnh rồi chú thích đến đó, tính ra viết bài này cũng mất mấy tiếng đồng hồ :D

Khách (ẩn danh)

Nói thật Pro Blogspot hiện đang xuất hiện rất nhiều nhưng sao mình vẫn cứ thấy FD là cảm tình nhất.

Khách (ẩn danh)

Đúng đó - theo dự đoán Blogger năm 2011 và sắp các năm sắp tới ở việt nam sẽ dần dần nóng lên. và Fandung.com là 1 địa chỉ tin cậy cho chúng ta học về blogger. :)

Bao An Angel

Bài viết hay lắm bạn à :) thanks nhé :D

Phan Dũng

thấy mọi người ủng hộ như vậy, mình cảm thấy rất vui. Thanks tất cả.

Khách (ẩn danh)

Đã Test - Tình hình là trên Firefox thì không bị lệch. nhưng trên google chorm lại bị lệch. Mong bác sớm fix lỗi này.

SttSEO

Mình thấy dạng MENU này cũng hay, nhưng site của mình tương đối đơn giản nên không áp dụng.

Mình mới tạo blog http://www.truyenjava.co.cc/, Blog đang cần sự góp ý chân thành của bạn, rất vui được làm quen với bạn, nếu được chúng ta trao đổi links nhé:
http://www.truyenjava.co.cc/2011/06/tiep-nhan-add-link-va-lam-quen.html

Unknown

Ủa, vậy xem trên IE6 thì trang mp3.zing cũng không chịu xổ xuống hả Dzũng ?

Unknown

Cho em thắc mắc cái ?

Sao em làm menu sổ xuống mà nó bị che núp đằng sau của một widget ở phía dưới?

Đáng ra nó phải nổi lên trên như blog FD chứ anh?

Cứu Với ?!!!

Fiat Trịnh Xuân Thọ

Hay quá trời lun pác Dũng ui.Pác pro thật.:)

Tiêu Đỉnh

Nguyễn Văn Hậu@ Mình cũng bị vậy luôn..Help với

Mr.Dung

hj anh Dũng e mới lập blog toàn làm theo thủ thuật của anh. phải nói anh rất pro em làm cái nào hầu như cũng thành công. nhưng cái mennu nào xổ xuống là blog em ko nhìn thấy dc( giống với nỗi của nhiều nguwoif ) chỉ thành công cái menu của vnexprees thôi. anh có thể kiểm tra xem em mắc nỗi j ko
có thể add YH em: neuemdaquenroi_hp1991

hinhnendienthoai

em lam duoc roi, cam on anh nhieu nha

Điện Tử ChipKool

Anh Dũng ơi.Em thấy cách anh làm hơi dài.em làm chỉ cần 1 đoan code dán vào javar/script là ok.;;)

Unknown

hix em làm đc nhưng mà nó bị chìm dưới các cái khác anh ạ chả hiểu sao nữa

Vu Huong

blog của anh Dũng rất hay.rất vui khi mọi người ghé thăm http://www.vuhuong.com/

Quốc Việt

LÀm thì làm đc nhưng khi sổ xuống là bị chìm trong Bài viết hoặc Widget khác anh ak! Fix sao đây anh! :((

Hoang Nguyen

mình cũng bị tương tự giống bạn, xổ xuống thì lại nằm dưới 1 cái gì đó, giờ muốn cho nằm trên thì sao, chỉ mình với ^^!

Khách (ẩn danh)

Đúng oy,A Fan Dũng ơi,nó bị widget che mất phần sub :(( a test giùm và fix giúp mọi người với:((

Admin

Chuẩn lắm :)

Nguyễn Việt Phương

Ang Dũng ơi sao em chèn vào Blog rồi mà lúc di chuột vào chả thấy nó sổ xuống là sao?

Ths.BS Pham Thi Van Thanh

Thanks FD sẽ áp dụng vào Blog của mình.

Unknown

@All: Ai bị widget che mất phần sub, thì kiếm đoạn
ul#topnav li div.sub {
trong CSS, rồi thêm dòng
z-index:10;
nhé ^^!

Nguyên Luật

làm thì được đó anh Dũng ak
Chỉ có tội là nó bị mấy widget phía dưới che đi mất
Làm sao giờ anh

Nguyên Luật

[quote=AUTHOR name=fdquote]Cam on anh nhieu
Nhung anh co the chi cach lam sao de thuc hien thu thuat khac cua anh khi ma file js k duoc cung cap nua anh
chi chi tiet luon nha[/quote]

DL

ban oi, neu nhu code HTML cua minh ko co DocType thi no khong co chay. co cach nao khong dung doctype ma van chay khong

Học Tiếng Anh Chuẩn

Menu rất đẹp, load nhanh. Thủ thuật này rất hữu ích. Mình vừa add vào template của blog mình www.doimoigiaoduc.com

tvonline
Sla242

hay thế. đúng là pro

Khách (ẩn danh)

a oi e lam theo cach cua anh nhung no cu bi co menu... chinh hoai ko duoc a giup e moi
http://vnforumgame.blogspot.com/

Nguyễn Văn Phúc

A nào cho e hỏi , sau nó hg sổ menu xuống được . A nào chỉ dùm e http://zoroblogger.blogspot.com/
E lấy cái menu trang này cũng không sổ xuống được a nào giúp với
http://nguyenhaicntt.blogspot.com/ . E đang làm tiểu luận nên a nào biết chỉ cho e gấp với . thank nhiều

Unknown

Mình muốn tăng cỡ chữ lên thì làm như thế nào ạ! thnks. http://www.chodoanluanvan.com/

Unknown

menu này hạn chế người truy cập , ở những tiệm nét bình thường chưa chắc có fire fox hay explor 7. trở lên đâu. google chrome sợ còn không có nữa là.

Dr.House

anh Dũng cho em hỏi có cách nào khi rê chuột vô một menu thì tất cả các menu con cùng xổ xuống luôn không anh giống thế này http://fifaonline.go.vn/default.aspx

Khách (ẩn danh)

Chào Bạn Dũng bạn có thể update lại các link background bi die của data.fan....hay không..? Thanks...!

vuatranmac

Admin Fix lại các link ảnh này với nha.

[quote]http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/right-li-nobg.png

http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/top-li-hv.png

http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/home-ico-bg.png [/quote]

hoặc có thể add vào 1 thư mục và cho đường link download duoc không admin ơi !

Unknown

quá hay, mà hình như bạn mới đổi tên miền nhỉ ?

Phạm Văn Thủy

mình làm thì ok mỗi tội xong thì cái menu lại ở phía sau cái main. không biết làm thế nào để ra trước



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home