Tạo Thanh Menu ngang DropDown ( menu con sổ thẳng xuống) cho Blog

Thứ Bảy, 2 tháng 3, 2013

Số lượt xem bài này:

Tạo Thanh Menu ngang DropDown ( menu con sổ thẳng xuống) cho Blog

Lần trước tôi đã chia sẽ cho các bạn làm thanh Menu ngang đơn, Menu ngang hai cấp (có các menu phụ sổ xuống nằm trên một hàng ngang).
Hôm nay tôi chia sẽ với các bạn làm Thanh Menu ngang DropDown ( menu con sổ thẳng xuống).

Đầu tiên các bạn copy code dưới đây (tôi làm cho Blog của mình) về và dán vào Notepad để tùy chỉnh theo ý mình (thay link của các menu, chỉnh sữa code CSS). Các bại phải chỉnh sữa chuẩn code CSS thì nó mới điều khiển được Code HTML (đoạn code nằm sau thẻ Style). Nếu không thì các bạn cứ đừng động vào code CSS (cứ dùng cái tôi đã chỉnh sửa) chỉ sửa ở phần code HTML thôi !

Lưu ý:

Menu chính nằm giữa thẻ li mở và thẻ li đóng : <li> Menu chính</li>

Menu phụ nằm giữa thẻ ul mở và đóng : <ul> Menu phụ</ul>

Các bạn cũng căn cứ vào đấy mà chỉnh các thông số như: màu nền, màu chữ, độ lớn chữ, nút menu... ở phần Code CSS.

Code CSS nằm trong thẻ style (<style> Code CSS </style>)

bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjamPOqMq8Eh69zmxYdjnjY-OpYMuAHxJz8sfBNDGtn_Qqo_bC5Qww_F3gPGcXtFkMYS3jIT870nphK3I8hxy4Snyp79PLESrHO74qAJDkJroNtV8XU5G0kMbC3yupli56-2YQ3AqvJ2kLZ/s1600/hover.gif") bottom

center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:160px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNUUyUTVi3niLdOjly9Vf8m-j5yuATjYcQODyZgXcRij7Sce09w3MlUT3NoV08hCkGg1N5pIuMoIIRMDVWJzW83HW7CHeFnO-IzW-86Xz5xToAhqJC25rZ8Iw6qTN52o4N4cIyz4Er1nFb/s1600/sub_sep.gif') bottom left

no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:14px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDwtR3g6lQYMes6vudLLgfuRjMzYB1lNAE3R_F1pK97VOvB69-VMVmnHvaLpdNVWVOMADfudNAIi_W6UT1B69LOsNPvDhP_mDjsp79jUyC6cAlUyu3EOW9UQsx__s2Li3MwHdhuFOlE8hi/s1600/hover_sub.gif') center

left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
</style>
<div class="menu">
<ul>
<li><a

href="https://accounts.google.com/ServiceLogin?service=blogger&passive=1209600&continue=http://www.blogger.com/blogger.g?blogID%3D1330

346395357688913&followup=http://www.blogger.com/blogger.g?blogID%3D1330346395357688913<mpl=start#pageelements" >ĐĂNG

NHẬP</a></li>
<li><a href="#" id="current">QUÀ TẶNG ĐỘC GIẢ</a>
<ul>
<li><a href="http://minhluong129.blogspot.com/2012/02/trang-nhac.html"target="_blank">Nhạc</a></li>
<li><a href="http://minhluong129.blogspot.com/2012/02/trang-anh_16.html" target="_blank">Ảnh</a></li>
<li><a href="http://luong1950.blogspot.com/2012/02/tao-chu-ky-dong-voi-adobe-flash_5597.html"target="_blank">Tạo chữ ký động</a></li>
<li><a href="http://www.mediafire.com/?1xmcdp6styss4" target="_blank" >Phần mềm tôi share</a></li>
</ul>
</li>
<li><a href="">CÁC BẢNG THỬ</a>
<ul>
<li><a href="http://luong1950.blogspot.com/2012/02/bang-thu-code-cua-minh-luong_9.html" target="_blank">Bảng thử Code</a></li>
<li><a href="http://luong1950.blogspot.com/2012/02/bang-thu-code-mau_9.html" target="_blank">Bảng thử Code-Màu</a></li>
<li><a href="http://minhluong129.blogspot.com/2013/02/bang-ma-hoa-code.html"target="_blank">Bảng Mã hóa Code</a></li>
</ul>
</li>
<li><a href="http://minhluong129.blogspot.com/">TRANG CHỦ</a></li>
</ul>
</div>

Sau khi chỉnh sữa xong, các bạn đăng nhập vào Blog vào Thiết kế>Bố Cục rồi tạo một tiện ích HTML trên phần Main hay Header và dán code đã chỉnh sữa vào. Xong các bạn lưu lại và thoát ra khỏi blog.
Vào lại Blog các bạn sẽ thấy thanh menu ngang DropDown đã xuất hiện trên Blpg của mình rồi !

2 nhận xét

Ngô Minh Lương

lúc 15:30 3 tháng 3, 2013 Reply

http://www.youtube.com/watch?v=GTNg6VM-QeY

Hồng Quế

lúc 12:20 8 tháng 12, 2015 Reply

Rất cảm ơn anh với bài viết này. Đây là hướng dẫn duy nhất tôi làm theo mà thành công trong các bài hướng dẫn tôi tìm trên mạng.

Đăng nhận xét

1- Nhận xét chỉ nên liên quan đến bài đăng, phải có tính chất xây dựng và có văn hóa !
2- Để chèn biểu tượng cảm xúc vào nhận xét, các bạn nhập các ký hiệu bên dưới của hình vào phần viết nhận xét.
3- Việc nhập tài khoản Google của bạn và nhập 2 từ xác minh trước lúc gửi nhận xét là bắt buộc !
4- Các bạn có thể chèn Video trên Youtube hay ảnh bằng cách dán link của video (trên thanh địa chỉ) hay link ảnh trực tiếp ở khung soạn thảo nhận xét !
5-Các bạn có thể post code trong nhận xét nhưng phải mã hóa code trước ! Để mã hóa code các bạn vào đây

Thứ Bảy, 2 tháng 3, 2013