Tạo Dropdown Menu đơn giản
/
Đầ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.
Related Posts
Sửa lỗi avatar của Blogger
Dropdown menu cho Newscast TemplateTiện ích Popular Posts với CSS3
Áp dụng PrettyPhoto Plugin cho tất cả image
Khung ghi chú cho blog
Về tác giả
Noct là một Blogger, anh ta có niềm đam mê đặc biệt với Blogspot và muốn chia sẻ những kinh nghiệm của mình với cộng đồng.
49 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
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.
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.
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ỉ?
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
Phải chỉnh cả -webkit-gradient nữa
, và cs rất nhiều dòng như vậy nên phải cẩn thận nhé 
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?
Dĩ nhiên là chèn thẳng vào xml thì nhanh hơn là để bên ngoài
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
Đây chỉ là 1 phần trong gói CSS3 Menu Pack, đầy đủ thì nó có các màu " rel="nofollow">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.
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
e làm được rồi!
! cảm ơn a Noct nhiều!
một menu rất hay và còn nhẹ nữa, mình phải bookmraks mới dc
Đ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 .
Bạn chỉnh đúng chỗ rồi đó, sao lại không khớp nhỉ ?
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?
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.
Nhận xét này đã bị quản trị viên blog xóa.
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/
thanks you very much, i will try it later.., where do you from, this language really uniq..??
Click on my profile and you will know where I am from.
Đã 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
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
s
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
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ỉ
Cách đó dùng image thay thế cho box-shadow, còn text-shadow thì
Có 1 khoảng cách nhỏ như thế này " rel="nofollow">View Chỉnh ở thuộc tính nào zậy pak ?
Cái Dropdown Menu có thay được cái Menu thứ 2 trong Newcast không anh Noct ơi?
Đượ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
mình làm thì nó ra đến 2 menu, bạn xem giúp nhé
http://www.vnsky.tk/
ah mình xin lỗi, mình làm đc rùi.
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/
Ủ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?
Đú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.
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
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
vì google code không phải để up css
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ờ
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.
Bạn tìm và xóa cái này : class="drop"
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
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.
À 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.
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ê
Cái này bác kêu đơn giản nên nó bị lỗi. Bác sửa đi!!
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
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.
Đă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
:))
:((
:D
:(
=))
b-(
:)
:P
:-o
:*
:-s
[-(
@-)
=d>
b-)
:-?
:->
X-(