Hôm nay namkna giới thiệu thêm cho các bạn mẫu menu sổ dọc nhiều cấp với phong cách của faceebook. Với mẫu này menu con sẽ sổ 2 cấp hoặc 3 cấp. Thích hợp cho các blog có nhiều chuyên mục
» Đặc điểm của menu này:
¤ hoàn toàn từ CSS (không sử dụng Javascripts nhằm tăng tốc độ lòa blog của bạn.
¤ Hoạt dộng tốt trên các trình duyệt phổ biến như: moliza firefox, google chroome, sarafi, opera,...
¤ Có nhiều cấp để các bạn lựa chọn. Bài viết này namkna sẽ hướng dẫn 2 dạng một dạng xổ dọc 2 cấp, và một dạng xổ dọc 3 cấp cho các bạn lựa chọn.
¤ Giao diện bắt mắt, dế tùy biến
¤ Các bạn có thể xem Demo
XEM DEMO
Ảnh minh hoạ:
» Cách tiến hành:
1. Đăng nhập vào blog
2. Chọn Bố cục
3. Chọn Thêm Tiện ích => Tạo HTML/Javarscip và chọn một trong 2 đoạn code bên dưới và dán vào.
¤ Style 1: Menu Facebook dropdown 2 cấp!
¤ Style 1: Menu Facebook dropdown 2 cấp!
<style> #namkna-navbar{ background: #3B5998; width: 100%; color: #FFF; margin: 10px 0; padding: 0; position: relative; border-top:0px solid #960100; height:35px; } #Namkna-nav{ margin: 0; padding: 0; } #Namkna-nav ul { float: left; list-style: none; margin: 0; padding: 0; } #Namkna-nav li { list-style: none; margin: 0; padding: 0; } #Namkna-nav li a, #Namkna-nav li a:link, #Namkna-nav li a:visited { color: #FFF; display: block; font:bold 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 11px 12px; text-decoration: none; border-right:0px solid #627AAD; } #Namkna-nav li a:hover, #Namkna-nav li a:active { background: #627AAD; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 11px 12px; } #Namkna-nav li { float: left; padding: 0; } #Namkna-nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #Namkna-nav li ul a { width: 140px; } #Namkna-nav li ul ul { margin: -35px 0 0 161px; } #Namkna-nav li:hover ul ul, #Namkna-nav li:hover ul ul ul, #Namkna-nav li.sfhover ul ul, #Namkna-nav li.sfhover ul ul ul { left: -999em; } #Namkna-nav li:hover ul, #Namkna-nav li li:hover ul, #Namkna-nav li li li:hover ul, #Namkna-nav li.sfhover ul, #Namkna-nav li li.sfhover ul, #Namkna-nav li li li.sfhover ul { left: auto; } #Namkna-nav li:hover, #Namkna-nav li.sfhover { position: static; } #Namkna-nav li li a, #Namkna-nav li li a:link, #Namkna-nav li li a:visited { background: #EDEFF4; width: 120px; color: #3B5998; display: block; font:normal 12px Helvetica, sans-serif; margin: 1px 0 0 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border:1px solid #ddd; -moz-border-radius:4px; -webkit-border-radius:4px; } #Namkna-nav li li a:hover, #Namkna-nav li li a:active { background: #627AAD; color: #FFF; display: block; } #Namkna-nav li li li a, #Namkna-nav li li li a:link, #Namkna-nav li li li a:visited { background: #EDEFF4; width: 120px; color: #3B5998; display: block; font:normal 12px Helvetica, sans-serif; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border:1px solid #ddd; margin: 1px 0 0 -14px; } #Namkna-nav li li li a:hover, #Namkna-nav li li li a:active { background: #627AAD; color: #FFF; display: block; } </style> <div id='namkna-navbar'> <ul id='Namkna-nav'> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Contact</a></li> <li><a href='#'>Sitemap ▼</a> <ul> <li><a href='#'>Sub Page #1</a></li> <li><a href='#'>Sub Page #2</a></li> <li><a href='#'>Sub Page #3</a> <ul> <li><a href='#'>Sub Sub Page #1</a></li> <li><a href='#'>Sub Sub Page #2</a></li> <li><a href='#'>Sub Sub Page #3</a></li> </ul> </li> </ul></li> </ul> </div>¤ Style 2: Menu Facebook dropdown 3 cấp!
<style> #namkna-navbar{ background: #3B5998; width: 100%; color: #FFF; margin: 10px 0; padding: 0; position: relative; border-top:0px solid #960100; height:35px; } #Namkna-nav{ margin: 0; padding: 0; } #Namkna-nav ul { float: left; list-style: none; margin: 0; padding: 0; } #Namkna-nav li { list-style: none; margin: 0; padding: 0; } #Namkna-nav li a, #Namkna-nav li a:link, #Namkna-nav li a:visited { color: #FFF; display: block; font:bold 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 11px 12px; text-decoration: none; border-right:0px solid #627AAD; } #Namkna-nav li a:hover, #Namkna-nav li a:active { background: #627AAD; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 11px 12px; } #Namkna-nav li { float: left; padding: 0; } #Namkna-nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #Namkna-nav li ul a { width: 140px; } #Namkna-nav li ul ul { margin: -35px 0 0 161px; } #Namkna-nav li ul ul ul { margin: -35px 0 0 147px; } #Namkna-nav li:hover ul ul, #Namkna-nav li:hover ul ul ul, #Namkna-nav li.sfhover ul ul, #Namkna-nav li.sfhover ul ul ul { left: -999em; } #Namkna-nav li:hover ul, #Namkna-nav li li:hover ul, #Namkna-nav li li li:hover ul, #Namkna-nav li.sfhover ul, #Namkna-nav li li.sfhover ul, #Namkna-nav li li li.sfhover ul { left: auto; } #Namkna-nav li:hover, #Namkna-nav li.sfhover { position: static; } #Namkna-nav li li a, #Namkna-nav li li a:link, #Namkna-nav li li a:visited { background: #EDEFF4; width: 120px; color: #3B5998; display: block; font:normal 12px Helvetica, sans-serif; margin: 1px 0 0 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border:1px solid #ddd; -moz-border-radius:4px; -webkit-border-radius:4px; } #Namkna-nav li li a:hover, #Namkna-nav li li a:active { background: #627AAD; color: #FFF; display: block; } #Namkna-nav li li li a, #Namkna-nav li li li a:link, #Namkna-nav li li li a:visited { background: #EDEFF4; width: 120px; color: #3B5998; display: block; font:normal 12px Helvetica, sans-serif; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border:1px solid #ddd; margin: 1px 0 0 -14px; } #Namkna-nav li li li a:hover, #Namkna-nav li li li a:active { background: #627AAD; color: #FFF; display: block; } </style> <div id='namkna-navbar'> <ul id='Namkna-nav'> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Contact</a></li> <li><a href='#'>Sitemap ▼</a> <ul> <li><a href='#'>Sub Page #1</a></li> <li><a href='#'>Sub Page #2</a></li> <li><a href='#'>Sub Page #3</a> <ul> <li><a href='#'>Sub Sub Page #1</a></li> <li><a href='#'>Sub Sub Page #2</a></li> <li><a href='#'>Sub Sub Page #3</a> <ul> <li><a href='#'>Sub Sub Sub Page #1</a></li> <li><a href='#'>Sub Sub Sub Page #2</a></li> <li><a href='#'>Sub Sub Sub Page #3</a></li> </ul> </li> </ul> </li> </ul></li> </ul> </div>
Trong đó:
- Thay dấu thăng màu đỏ (#) thành liên kết tới bài viết.
- Thay các phàn màu xanh thành tiêu đề của trang ứng với mỗi link màu đỏ.
Nhận xét
bạn oy sao mình làm dc menu 2 cấp thui nhưng nó hk hiện lên 3 cấp dc bạn kiểm tra dùm mình nhé
Trả lờiXóahttp://thegioingansao.blogspot.com/
Cái menu facebook bạn đang áp dụng thừa thẻ </ul> bạn xóa phần </ul> trước thẻ <li><a href='#'>Sitemap </a>
Xóaanh xem hộ cái menu http://doannguyenit.blogspot.com/ nó bị lỗi
Xóaem copy nguyên cái code trên roài mà hk dc, em làm mẫu blog khác thì dc, hk bjt cái mẫu này nó không hỗ trợ cho menu face không anh nếu em thử mẫu Menu ngang xổ dọc xuống nhiều cấp (kiểu 1) - Update 15/03/2012 cũng bị lỗi tương tự như thế. hjc
Em thay:
Xóa#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
}
Thành:
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
z-index:4000;
}
#mbtnav li {
z-index:4000;
list-style: none;
margin: 0;
padding: 0;
}
hjx đã sửa nhưng vẫn hk dc anh ak. thui anh cho em cái yahoo em gửi pass blogger em,để vào anh vào chỉnh dùm em vs dc hk?
XóaLâu lắm rồi a không dùng Yahoo.
XóaEm gửi vào mail: tavannam01@gmail.com anh sẽ chỉnh giúp.
em gửi rồi đó nhờ anh sửa dùm cho em nha. thank
XóaAnh sủa rùi đó do thuộc tính overflow: hidden; ở đoạn code dưới,
Xóa.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}
a nam ơi e muốn thêm các menu chính và menu con thì phải làm như thế nào hả a
Trả lờiXóaThêm đoạn mã dạng:
Xóa<li><a href='#'>Sitemap ▼</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
</ul></li>
vào trước:
</ul>
</div>
mình đã thêm đoạn này vào nhưng chỉ được thêm 2 mục, bạn có thể sửa hộ mình được không
Xóaanh oy sao anh chjnh menu của chỉ dc 2 cấp z, em thấy nó có 3 cấp mà, anh có thể sửa giúp e dc hk ?
Trả lờiXóaTất nhiên rồi em!
Xóaanh Nam ơi của em cũng bị menu chỉ hiện ra đến cấp 2 thôi còn cấp 3 không hiện được em đã thử các cách trên rồi. còn nếu sử dụng menu dùng transition: visible trong css thì nó chỉ hiện bên trong khung một khoản nhỏ xíu à phải sửa làm sao vây anh hic.
Trả lờiXóaThank for great blog!
Của em hiện 2 cấp đó chứ em.
XóaĐể thu nhỏ khảng trống em tìm đoạn:
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
Và chỉnh sửa thành
#mbtnav ul {
float: left;
list-style: none;
margin: 5px;
padding: 10px;
}
- chỉnh lại phần in đậm cho thích hợp nha. có thẻ dùng số âm, ví dụ
margin: -5px;
padding: 10px;
Chào bạn,
Trả lờiXóaMenu bên blog của mình cũng không hiện được cấp thứ 3. Mình đã thử nhiều cách như bạn hướng dẫn phía trên nhưng vẫn không được. Mình có gời thông tin của blog vào mail của bạn (tavannam01@gmail.com), rất mong bạn giúp cho.
Oke mình sẽ chek mail và giúp bạn.
XóaCám ơn bạn trước nha :-)
Trả lờiXóaBạn xem lại gùm mình nha. Mình check cả hộp thư Spam cyngx không thấy.
XóaBạn gửi lại vào
tavannam01@gmail.com
nha.
Mình vừa gởi mail lại cho bạn, bạn kiểm tra hộp thư giúp mình nha
XóaCám ơn bạn rất nhiều.
Oke mình sẽ check ngay :))
XóaBạn đã vào được blog mình chưa?
XóaXin lỗi bạn do mail của mình đang bị tấn công nên google tạm chặn nên không gửi trả lời cho bạn được./
XóaHiện tại mình đã cập nhật mẫu xổ dọc đến cấp 3 trong bài viết này cho bạn.
Cuối cùng: Thành thật xin lỗi vì đã để bạn phải chờ lâu. Hy vọng bạn không càm thấy phiền vì mình đã lỡ hẹn,
Mình cám ơn bạn không hết, lấy gì mà thấy phiền :-)
XóaMình sẽ làm lại với menu cấp 3. Xem thế nào, nếu không ổn sẽ lại í ới nhờ bạn giúp nha.
Cám ơn bạn nhiều lắm.
Mình đã thử nhưng vẫn không được. Ngay cả khi mình thử copy nguyên xi của bạn đưa vào cũng không hiện ra được cấp 3 luôn !!?? :-(
XóaBạn có thể gửi use và pass vào mail: tavannam01@gmail.com không mình sẽ check coi sao.
XóaHiện mình đã chỉnh lại cho bạn rùi. Hiển thị 3 cấp luôn ở mục thông tin đó.
Xóa- Lỗi bạn gặp phải là do bạn chưa chuyển menu xuống ngay dưới header,
Bạn thật là giỏi. Cám ơn bạn rất nhiều :-) :-) :-)
XóaKhông có gì :)))))))
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaMenu 3 cấp bị lỗi:
Trả lờiXóa- Chữ menu mất trắng
- Rê chuột vào mới hiện chữ ra
- Chỉ sổ được 2 cấp Khi kéo tiện ích HTML/Scrip xuống phần body thì hoàn hảo ko mắc lỗi gì.
Bạn chỉ mình cách khắc phục với. Thanks nhìu
Bạn nên tạo một tiện ích HTML/Javarscip dưới phần tiêu đề như bài này: XEM NGAY
Xóa- Sau đó dán code của menu vào sẽ khắc phục được lỗi trên, (đây là demo mình làm tới cấp 3 XEM NGAY)
Mình thử làm như bạn nói thì rất ổn mà có điều cái tiện ích HTML/Script phải đặt trên header mới được. Thường mình thấy người ta vẫn đặt ở dưới header. mình xem cái ví dụ demo 3 cấp của bạn vẫn làm dưới header được mà. ^^! giúp mình nhé
XóaMình sửa đc rồi. Bạn vào blog mình xem thử có cách nào chỉnh cho nó đều lại ko? ^^!
Trả lờiXóaCó thể đặt dưới header mà bạn. Nhưng bạn phải tạo một khung thêm tiện ích cho phàn header thì khi đặt dưới header mới được nha.
Xóa- Mình vào thấy ổn rồi đó bạn. Nó bị uống dòng ở cấp 3 là do tiêu đề bạn quá dài.
Để menu căn đều ra đường viền 2 bên bạn sửa:
#namkna-navbar{
background: #3B5998;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
Thành:
#namkna-navbar{
background: #3B5998;
width: 900px;
margin-left: -15px;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
width: 900px; độ rộng menu
margin-left: -15px; căn lề trái. Hãy chỉnh lại sao cho lề menu nằm trên lề phần body blog.
bạn cũng cho mình hỏi thêm - tại các mục mình muốn để như trang của bạnTên
Xóacó các ảnh và tóm tắt bài viết, chứ của mình nó cứ đăng cả mấy chục bài ra
Bạn chọn một kiểu hiển thị bạn muốn tại đây và áp dụng nha.
Xóabạn ơi làm như thế xong khi lưu mẫu nó báo "More than one widget was found with id: HTML5. Widget IDs should be unique" bạn giúp mình với
XóaLỗi này xuất hiện khi blog của bạn có 2 ID trùng nhau.
XóaTrong trường hợp này là có 2 tiện ích HTML5. Hãy xóa 1 đoạn đi nha.
Mà bạn đang nói về thủ thuật nào thế tất cae thủ thuạt mình giới thiệu không có thủ thuật nào sử dụng đến HTML5. Lỗi này chắc do bạn copy nhầm rồi đó. bạn hãy xem lại đi nha :????
Xóamình đã làm tất cả những gì bạn nói thật chính xác nhưng mà vẫn không ăn thua gì bạn ơi. >.<
Trả lờiXóa- margin-left: -15px; (mình thay -15 thành -30, -60, 30, 60 thì lề trái vẫn không thay đổi, không hiểu tại sao nữa).
- width: 900px; ( thay 900 thành số lớn hơn thì lề bên phải dài ra, nhỏ hơn thì lề bên phải ngắn lại, lề trái vẫn vậy).
- Còn 1 đường màu đó nằm giữa menu và hình tiêu đề nữa, không biết làm sao để mất nó ^^!
khi nào bạn rãnh hãy nghiên cứu dùm mình nha, làm phiền bạn quá =.=!
Với template đó bạn có thể chèn trực tiếp vào trong template trước hoặc sau thẻ </header>
XóaThêm đoạn mã dạng:
Trả lờiXóavào trước:
Reply
mình đã thêm đoạn này vào nhưng chỉ được thêm 2 mục, bạn có thể sửa hộ mình được không
Bạn nói rõ câu hỏi dduwwocj không. nếu có code cần chèn vào comment hãy dùng công cụ sau: http://namkna.blogspot.com/p/code-convert-for-blogspot-chuyen-doi.html
Xóamình cop đoạn code của bạn vào đã được, thêm menu chính và con tiếp theo đã được, nhưng khi thêm menu chính và con thứ 3 thì không được nữa
XóaHãy để lại địa chỉ blog đã áp dụng thủ thuật này để dược hỗ tợ nha bạn.
XóaMình làm được rồi. Thanks Nam
Trả lờiXóaChúc mừng bạn!!!
XóaNam ơi sao cái blog mình lại có 2 khoảng nhỏ trên + dưới Thanh Điều Hướng vậy.
XóaCó cánh nào cho nó sát lại như những blog khác ko bạn?
Bạn vào chỉnh sửa HTML và chỉnh ssoanj code sau:
Xóa.content-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-goog-ms-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
margin: 30px auto;
}
thành:
.content-outer {
background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-goog-ms-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
margin: 0px auto;
}
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaThanks. Bạn ơi cho mình chép 1 số bài viết của bạn lên blog mình nhé. Bài nào của bạn ở cuối mình đều ghi rõ nguồn và địa chỉ blog bạn. ^^! thanks
Trả lờiXóaOke. CHỉ cần ghi nguồn là được :))
XóaChào bạn! Mình tạo 1 page là Cẩm nang việc làm trong blog Việc làm Đà Nẵng. Tuy nhiên khi click vào thì nó hiện ra thêm 1 dòng là Search result cho "Cẩm nang việc làm". Mình muốn làm các mục FILM ONLINE | XEM TV | DOWNLOAD như bạn thì làm như nào vậy?
Trả lờiXóaTrang của mình: http://vieclam-danang.blogspot.com/
ĐÓ là dòng: Status Message Bar. Bạn có thể xóa như bài hướng dẫn này:
XóaCách Ẩn Status Message Bar
Các mục FILM ONLINE | XEM TV | DOWNLOAD là thanh menu. bạn có thẻ chọn một loại bạn thích tại đây:
Tạo menu cho blog
Mình đặt link của bạn vào góc dưới bên phải rồi. Bạn đặt link mình với nhé:
Xóahttp://vieclam-danang.blogspot.com/
Mô tả: Việc làm tại Đà Nẵng
Thanks!
Em tải đoạn code bên dưới về mở ra và dán nó vào tiện ích HTML/Javarscrip ngay dưới header nha:
Trả lờiXóaTải ngay
Em xem bài nayf: Dropmenu xổ dọc theo cột cho blogspot
Trả lờiXóaanh nam cho e hỏi...làm sao để đưa lên trên vạy.e thêm tiện ích nó toàn nằm ở dưới cùng trang ạ
Trả lờiXóaMình thay amin trả lời vậy. Em vào BỐ cục => Sau đó kéo tiện ích HTAML đó lên trên đầu trang là oke.
XóaNamKna cho hỏi mình làm cái menu dọc 3 cấp giống vật giá thì tới cấp 2 thì men bị che bởi phần right. Blog mình là http://3webbanhang.blogspot.com/ bạn có thể chỉ cho mình lổi sai được ko
Trả lờiXóaTemplate đó chỉ có 2 cấp bạn ak.
XóaA ơi ! a có thể demo cho e cái menu giống như thế này dc hk ? http://itshare247.blogspot.com/ E muốn thay thế mấy cái : Giới thiệu-liên hệ-Other-Policy
Trả lờiXóaA thay thế cho hợp với blog của e với ! blog của em đây : http://itc24h.blogspot.com/
CSS:
Xóa/*MENU*/
#cssmenu{ height:37px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px 5px 0px 0px}
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
#cssmenu ul li > ul{width:200px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }
#cssmenu, #cssmenu > ul > li > ul > li a:hover {
background: #006666;
}
#cssmenu{border: 1px solid rgb(48, 48, 48);margin: 5px 0px 5px 0px}
#cssmenu > ul > li > a{border-right:1px solid rgba(0, 0, 0, 0.26); color:#fff;}
#cssmenu > ul > li > a:after{border-color: rgba(92, 84, 84, 0.39)}
#cssmenu > ul > li > a:hover{background:#111;}
.menufooter{background:url(http://4.bp.blogspot.com/-bkVX-Kp_DyI/TvB0ghTvx5I/AAAAAAAAAV4/xx_GyTXMyFU/s1600/menubgfooter.gif) no-repeat bottom;height:14px;margin-top:-1px}
.submenu{width:950px;float:left;color:#bcbcbc;z-index:100;margin-top:4px}
.submenu .hot{width:550px;float:left}
.submenu h4{float:left;width:90px;font:700 12px/18px Arial;color:#fff;text-transform:uppercase}
.submenu a{color:#BCBCBC}
.submenu .hotcnt{width:460px;float:left}
.submenu .hotcnt{}
.colorheader{color:#fff;font-weight:bold}
.submenu p{float:left}
.menucontent{width:960px;background:url(https://lh5.googleusercontent.com/-oSssHlGj628/UgRNIC6ENRI/AAAAAAAABEc/jWeJx7MPq7A/w1-h64-no/menurepeat.png) repeat-x;height:64px;position:relative;margin-top:10px}
.search{width:280px;float:right}
.search p{float:left;margin-right:5px;margin-top:3px}
.boxsearch{background:url(http://1.bp.blogspot.com/-3NewhchdXKE/TvB0wImYEzI/AAAAAAAAAWQ/m0PkCMsevLM/s1600/searchboxx.gif) no-repeat;width:197px;height:20px;font-size:11px;border:none;float:left;line-height:20px;padding-left:10px}
.buttonsearch{border-radius: 5px;width:55px;height:20px;border:1px solid #B4AEAF;background:#214A6B;font-weight:bold;color:#fff;float:left;cursor:pointer}
.rss{position:absolute;top:13px;right:7px}
và đây là xml:
Xóa<div class='menucontent'>
<div id='cssmenu'>
<ul>
<li class='active'><a href='/'><span>TRANG CHỦ</span></a></li>
<li class='has-sub'><a href='/search/label/THÔNG TIN CÔNG NGHỆ?&max-results=15'><span>THÔNG TIN CÔNG NGHỆ</span></a>
<ul>
<li><a href='#'><span>Bảo mật</span></a></li>
<li class='last'><a href='#'><span>Internet</span></a></li>
<li class='last'><a href='#'><span>Sản phẩm</span></a></li>
<li class='last'><a href='#'><span>Thiết bị</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>THỦ THUẬT-IT</span></a>
<ul>
<li><a href='#'><span>Thủ thuật-Tiện ích</span></a></li>
<li><a href='#'><span>Windows</span></a></li>
<li class='last'><a href='#'><span>Photoshop</span></a></li>
</ul>
</li>
<li class='has-sub'><a class='has-sub' href='#'><span>PHẦN MỀM</span></a>
<ul>
<li><a href='#'><span>Hệ điều hành</span></a></li>
<li><a href='#'><span>Tiện ích</span></a></li>
<li class='last'><a href='#'><span>Ứng dụng văn phòng</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>DOWNLOAD</span></a>
<ul>
<li><a href='#'><span>PSD</span></a></li>
<li class='last'><a href='#'><span>Vector-Brush</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>GIẢI TRÍ</span></a>
<ul>
<li><a href='#'><span>Ảnh đẹp</span></a></li>
<li><a href='#'><span>Funny</span></a></li>
<li class='last'><a href='#'><span>Nhạc hay</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>HỎI ĐÁP</span></a>
<ul>
<li><a href='#'><span>Góp ý</span></a></li>
<li class='last'><a href='#'><span>Yêu cầu</span></a></li>
</ul>
</li>
</ul>
<div class='submenu'>
<div class='search'>
<form action='/search' id='searchThis' method='get' style='display: inline;'><input class='boxsearch' id='searchBox' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Tìm kiếm' vinput=''/>
<input class='buttonsearch' id='searchButton' type='submit' value='Tìm'/></form>
</div>
<div class='rss'>
<a href='/feeds/posts/default' style='font:500 10px/18px Arial; color:#d1d1d1;'>RSS <img border='0' src='http://1.bp.blogspot.com/-3VL3i4xw_rM/TvB26h6oZ3I/AAAAAAAAAWw/nITz02BXomk/s1600/rss.png'/>
</a>
</div>
</div>
</div>
</div>
A ơi! A hướng dẫn cho e là ép code vào đâu được k z anh?
Trả lờiXóahình như code này ko ap dung dc cho blog của e a ơi! e mún thay mấy cái mục giới thiệu, liên hệ, .... thành những mục như trên ý ! e làm mãi mà không dc
Trả lờiXóaÝ em là thay hẳn menu đó hay chỉ thêm mấy cái sub menu xổ dọc vào menu hiện tại của em thế ????
Xóavậy nếu mình làm menu cấp 4 thì phải làm thế nào ạ?
Trả lờiXóaBạn có thể xem hướng dẫn chi tiết từng bước ở đây: XEM NGAY
Xóaad oi cho em hoi với : sao trang cua nguoi ta tren thanh tiêu đề thì đuôi của dòng link đều là HTML vidu http://namkna.blogspot.com/2013/02/dropmenu-style-facebook-for.html, còn trên trang của em đuôi toàn là label vidu :http://www.cachmangnhadat.com/search/label/QU%E1%BA%ACN%201 , em mới chơi blog còn gà lắm nên mong ad chỉ giúp em với , em cam on ad nhìu ,
Trả lờiXóaRead more: KHÔI PHỤC DỮ LIỆU BỊ ẨN TRÊN USB | dungheineken
Under Creative Commons License: Attribution Share Alike
Em xem bài viết này nha"
XóaTối ưu thẻ Title trong Blogspot cho Search Engine
Thêm đoạn code như bài viết đó sẽ được đó.
em là CACH MANG NHA DAT ne ad oi,tại trình độ ltạo blog của em còn có hạn nen e dien ta dieu muon hoi chua dung , xin ad huong dan giup em lam cach nao de em tao noi dung cho 1 menu con mà khi sang phan xem blog click vao menu con do thi duong link tren thanh tieu de la html dc ko , mong ad chi giup em voi , em doi on ad nhiu lam
XóaCảm ơn ad nha. Mình đã ứng dụng và thành công. Cũng đã click quảng cáo ủng hộ nha <3
Trả lờiXóacho mình hỏi mí cái # namkna là gì vậy ad, có phải mã độc hok, mình thay = chữ khác có tác dụng hok
Trả lờiXóachỉnh độ rộng của menu con đoạn nào vậy bạn ?
Trả lờiXóa