Tạo Dropdown Menu đơn giản

/
css3 dropdown menu
Lần trước có một bạn nào đó đã giới thiệu một Menu xổ dọc khá đẹp nhưng lại chưa biết cách áp dụng trên Blogger. Sau khi tìm hiểu thì mình thấy loại menu này bố cục khá phức tạp, hơi khó để viết hướng dẫn nên đã loại bớt một số thành phần và điều chỉnh lại CSS, được kết quả như thế này:




     Đầu tiên, bạn chèn đoạn sau ngay bên dưới thẻ <body> hoặc phía trên <div id='outer-wrapper'>
<link href='http://dl.dropbox.com/u/11103024/menu.css' media='screen' rel='stylesheet' type='text/css'/>
<b:section id='menu' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML91' locked='false' title='Menu' type='HTML'/>
</b:section>

Đoạn mã trên sẽ tạo một tiện ích Javascript/HTML mới trên blog của bạn, hãy quay lại Phần tử trang rồi tiếp tục chèn vào tiện ích này:
<ul class="menu">
<li class="no_drop"><a href="#">Home</a></li>
<li><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column">
<div class="col_1">
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
<li><a href="#">NetTuts</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div></div></li>

<li><a href="#" class="drop">2 columns</a>
<div class="dropdown_2columns">

<div class="col_1">
<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
</ul>
</div>

<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
</ul>
</div>

<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
</ul>
</div>

<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
</ul>
</div></div></li></ul>

Lưu lại và kiểm tra kết quả. Do mã CSS của menu khá dài nên Noct đã chuyển chúng vào trong file menu.css để tiện đăng bài, bạn có thể chuyển ngược lại vào phía trên thẻ </b:skin> trong template để chỉnh sửa, và đừng quên xóa dòng màu xanh.
Add a Comment

54 comments

Cảm ơn bài viết của bạn nhé, thủ thuật nào nhìn cũng đẹp mắt :)

6/11/2011 comment-delete

Kiểu menu này đang được khá nhiều site sử dụng, trông rất chuyên nghiệp và ấn tượng.
Hi vọng bác sẽ có thêm nhiều theme ấn tượng, em rất thích mấy cái bác làm nhưng không hơp với blog em lắm, blog em không chơi được mấy cái auto readmore, chỉ chơi hiện tiêu đề bài viết thôi.

6/11/2011 comment-delete

Tùy mục đích của mỗi người thôi, blog này cũng đâu dùng auto-readmore, hy vọng một ngày nào đó sẽ viết được một thủ thuật phù hợp với blog của bạn.

6/11/2011 comment-delete

Hix,sao mình chỉnh cái menu thành
background: -moz-linear-gradient(top, #cfddff, #97b5fc);
thì nó lại ra 2 màu nhỉ?
Trên ff thì ra đúng màu. Còn trên chrome thì nó ra màu mặc định(màu đỏ). Sao kì vậy nhỉ? :(

6/11/2011 comment-delete

Còn ie 8 thì nó màu đỏ luôn. Nhưng không có bo góc :(. Phiền cái ông ie ghê :-SS

6/11/2011 comment-delete

Phải chỉnh cả -webkit-gradient nữa :P, và cs rất nhiều dòng như vậy nên phải cẩn thận nhé =d>

6/11/2011 comment-delete

Theo bạn,mình nên copy code vào trước thẻ skin hay là mình để bên host ngoài. Cái nào tối ưu tốc độ nhất?

6/11/2011 comment-delete

Dĩ nhiên là chèn thẳng vào xml thì nhanh hơn là để bên ngoài b-)

6/11/2011 comment-delete

background gradient của 2 thằng webkit với moz chả thống nhất gì cả, chơi khó anh em, nhất là cái radial gradient

Pig
6/11/2011 comment-delete

Đây chỉ là 1 phần trong gói CSS3 Menu Pack, đầy đủ thì nó có các màu như thế này. Ai thích thì liên hệ để nhận Pack đầy đủ nhé vì cái này không thể share trực tiếp được.

6/11/2011 comment-delete

Thủ thuật của Noct cái nào nhìn cũng pro cả, noct qua blog của mình vào comments bài mở hàng cho theme mới của mình

Nặc danh
6/11/2011 comment-delete

e làm được rồi! :D! cảm ơn a Noct nhiều!

6/11/2011 comment-delete

một menu rất hay và còn nhẹ nữa, mình phải bookmraks mới dc=d>

Điều chỉnh độ rộng widget có công thức liên hệ giữa các thành phần không ? Mặc định là 900 thì phải,em thử thay đổi nhưng chưa khớp .

6/13/2011 comment-delete

Bạn chỉnh đúng chỗ rồi đó, sao lại không khớp nhỉ ?

6/13/2011 comment-delete

hi. tuyệt quá. cho mình hỏi muốn đổi màu ( Chuyển đổi màu ) trong Blog bạn như thế nào vậy?

6/13/2011 comment-delete

menu này tuyệt thật, thấy bên bác DuyPham đã lâu, hơi bị thèm. Bi giờ mới có xài.Hi, cảm ơn Noct-land nhiều lắm.

6/13/2011 comment-delete

Nhận xét này đã bị quản trị viên blog xóa.

Nặc danh
6/14/2011 comment-delete

các bạn có thể tham khảo thêm từ :
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

6/15/2011 comment-delete

thanks you very much, i will try it later.., where do you from, this language really uniq..??

6/17/2011 comment-delete

Click on my profile and you will know where I am from.

6/17/2011 comment-delete

Bác Nóc ơi, mình ko xài cái menu này của bác, nhưng cho mình hỏi về CSS của cái menu bên blog mình cái :
Tại sao lướt chuột ngang qua các menu chính nó lại có hiệu ứng hover rất trễ , dù tất cả đều là CSS chứ ko phải java :-o

6/23/2011 comment-delete

Đã xem qua blog truyện trên 3 trình duyệt IE9, FF5, Chrome 11 và thấy ... hover bình thường @-)
Có thể cảm giác của mình nó không nhạy bằng Ngân, mà cái đó dùng CSS3 text-shadow nên hơi nặng đối với PC cấu hình yếu. Còn một nguyên nhân nữa là do tính năng Hardware Acceleration của trình duyệt, thử tắt nó đi (trong FF thì vào Option -> Advanced -> General -> bỏ chọn Use Hardware Acceleration. Chỉ biết nhiu đó, hy vọng giúp được Ngân :D

6/23/2011 comment-delete

Ồ, textshadow nặng à :-o
Thế mà cứ tưởng css chả có thứ gì làm nặng máy đc :-o

Trên FF bị trễ, nếu rê thật nhanh thì các menu ở giữa gần như ko có hiệu ứng gì.
Trễ cũng ít không đáng kể, nhưng nếu dùng một lúc thì cảm thấy rất bức bối

Trên Chrome thì ko bị thế, đáng lẽ là kết luận : tại FF
Nhưng mà mình đoán là thuộc tính hover này mình đặt cho thẻ li chứ không phải thẻ a nên nó bớt nhạy, có khi nào thế không bác ?

6/23/2011 comment-delete

Cứ thử vào các blog lạm dụng nhiều Shadow là rê chuột thấy nặng nặng mặc dù PC mình không hề yếu :-ss
Hay bác thử gán thẻ a thành display block + width height rồi cho nó hover xem có nhẹ hơn hay không :D

6/23/2011 comment-delete

Dùng firebug làm thử + disable tex-shadow vẫn thế
Vậy là do firefox của mình rồi b-(
Code bằng firefox nhưng chỉ xem tốt trên chrome :-o

6/23/2011 comment-delete

Em dùng theme Newscast anh share nhưng em muốn dùng Dropdown menu, thì bị thế này, em muốn chuyển nó lên phía trên thì có cách nào ko nhỉ =d> https://lh4.googleusercontent.com/-BSEIMbuFJZY/TgVeQ1LrI4I/AAAAAAAAABE/uAy7XGT0kEY/s640/no-im.JPG

6/25/2011 comment-delete

Bác Noct ợ, đúng là cái hiệu ứng shadow làm lagg thật
Mình vừa ra tiệm nét về, máy yếu nên mới thấy rõ khác biệt lúc enable/disable cái dòng css text-shadow và box-shadow

Ở đây : http://stackoverflow.com/questions/1249619/scroll-lag-with-css3-box-shadow-property

Cái dòng giải đáp đầu tiên ấy của mercator có nói về cách làm shadow bằng ảnh, bác đọc rồi chỉ mình đc ko :D

6/27/2011 comment-delete

Cách đó dùng image thay thế cho box-shadow, còn text-shadow thì :(

6/27/2011 comment-delete

Có 1 khoảng cách nhỏ như thế này View Chỉnh ở thuộc tính nào zậy pak ? =))

7/05/2011 comment-delete

Cái Dropdown Menu có thay được cái Menu thứ 2 trong Newcast không anh Noct ơi?

7/12/2011 comment-delete

Được, cái menu đó vốn đã có sẵn dropdown nhưng bị lỗi xung đột với Slider, đợi bản 1.1 sẽ sửa :D

7/12/2011 comment-delete

mình làm thì nó ra đến 2 menu, bạn xem giúp nhé
http://www.vnsky.tk/

7/12/2011 comment-delete

ah mình xin lỗi, mình làm đc rùi.

7/12/2011 comment-delete

Tôi đã tạo 1 blog và có menu thả, nhưng khi mở đến trang chủ thì không thả nữa, còn mở đến trang 1 bài viết cụ thể thì nó lại thả xuống bình thường, nhờ admin chỉ dùm cách khắc phục lỗi này, Cám ơn!
Link: http://dangquocthu.blogspot.com/

@Đặng Quốc Thư Ủa, tui thấy bên blog bạn đăng rất nhiều bài của Noct nhưng sao không thấy ghi nguồn gì hết trơn vậy?

7/13/2011 comment-delete

Đúng như bạn Trúc nói, không thấy ghi nguồn gì cả, cho cậu Thư này vào blacklist.

7/13/2011 comment-delete

Cho em hỏi để chỉnh màu cho font của chữ 1 columns, 2 columns thì chỉnh ở dòng nào trong css zậy

zed
7/15/2011 comment-delete

sao mình up file css này lên google code thì nó ko chạy nhỉ, dropbox thì chạy bình thường

zed
7/21/2011 comment-delete

vì google code không phải để up css

7/21/2011 comment-delete

Menu dạng này nhìn chuyên nghiệp quá, mình làm web bằng joomla thôi , thích menu kiểu này lắm, mà css mình còn non, áp dụng qua joomla chắc hết giờ :((

8/14/2011 comment-delete

Bạn cho mình hỏi,làm sao để xóa dc mũi tên màu đen trước mỗi tab của menu vậy?Mình tìm trong file CSS chỉ xóa dc mỗi mũi tên xuống thôi.

8/16/2011 comment-delete

Bạn tìm và xóa cái này : class="drop"

8/17/2011 comment-delete

anh ơi thế nếu muốn đăng bài vào từng mục trong menu thì làm thế nào ạ, em tìm mãi trên google mà chẳng ai nói rõ cái này cả . Anh chỉ giúp em với nhé !

8/17/2011 comment-delete

Noct càng lúc càng hay nha ! tên tuổi cũng được khắc lên rồi , chúc bạn thành công hơn

8/23/2011 comment-delete

Cái menu này của bạn cũng khá hay,nhưng 1 loại menu giông Mp3.zing.vn ấy.bạn viết chia sẻ mọi người na.thanks

Chào Noct! Mình áp dụng cái Menu này cho Blog, nhưng sau khi thực hiện nó và chỉnh sửa nó có một số vấn đề sau:
1. Nó bị lấp các nội dung cột 1 và cột 2 vào bên trong bài viết khi mình rê chuột vào, nên không dùng được.
2. Khi mở bái viết lên cái Menu này trốn mất.

Thạt sự mình không chuyên về những cái này, nhưng thích táy máy nên bị như thế. Mong nhận được sự giúp đỡ của Noct. Cảm ơn nhiều.

@24h-CafeÀ quên: Địa chỉ Blog của mình: http://vnsupercar.blogspot.com/

Công nhận bạn Chuồn Chuồn hay quá một trang như vậy mà cũng tìm thấy được, mình đang download về nghiên cứu. Nếu thành công thì mình sẽ upload lên cho mọi người xài chơi cho vui.

4/01/2012 comment-delete

chẳng được. mình chèn vào nó hiện ra menu nhưng không drop menu nhỏ hơn xuống nản ghê

6/06/2012 comment-delete

Cái này bác kêu đơn giản nên nó bị lỗi. Bác sửa đi!!

7/03/2012 comment-delete

Hi Noct,các bạn: nếu muốn thanh menu này hiển thị ở vị trí thông thường (ngay dưới header) thì đặt đoạn code thế nào nhỉ?

Hi, xử lý được rồi :D

http://thaitui.blogspot.com/
Làm theo hướng dẫn của bạn Không tìm thấy thẻ body nên phần Tạo tiện ích mới, tui đặt trên < head> thì có Menu nhưng Menu Cha thì OK. Còn Menu con thì không nhấp được (dù thấy được). Nhờ các bạn chỉ giùm.

10/19/2012 comment-delete

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License