Nếu blog của bạn có quá nhiều trang riêng rẽ, các nhãn, các đề tài thì các thực đơn đơn giản hoặc thực đơn drop 1 cấp không thể giải quyết được do vậy vấn đề đặt ra là ta phải có một thực đơn chứa được toàn bộ các đề tài đó nhưng vẫn đảm bảo blog gọn gàng đẹp mắt.
Mẫu Thực đơn ngang xổ dọc hôm nay mình giới thiệu sẽ giúp bạn làm cho blog của bạn trở nên khoa học hơn. với việc từ một thực đơn chính sẽ xổ ra rất nhiều Sub thực đơn con làm cho blog của bạn đẹp hơn và dễ nhìn hơn.
Bạn có thể xem Dùng thử
Hoặc xem hình minh hoạ sau:
☼ Cách tiến hành:
1- Trước nhất, bạn đăng nhập vào Blog
2- Chọn Mẫu (Template)
3- Chọn chỉnh sửa HTML (Edit HTML)
4- Dán đọn code sau vào trước thẻ:
]]></b:skinvàgt;
(Mẹo: bấm Ctrl+F để mở hộp tìm kiếm và gõ vào)
/* Drop thực đơn by http://namkna.blogspot.com/ */
/* ddsmoothmenu */
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*Màu nền của thanh thực đơn phần khi chưa có Thực đơn con*/
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level thực đơn link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*Màu nền của thanh thực đơn khi chứa thực đơn con*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;/*Màu chữ */
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub thực đơn links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active thực đơn items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*background of thực đơn items during onmouseover (hover state)*/
color: white;
}
/*1st sub level thực đơn*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level thực đơn list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub thực đơn levels vertical offset after 1st level sub thực đơn */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level thực đơn links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* Holly Hack for IE */
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}
/* ddsmoothmenu-v */
.ddsmoothmenu-v ul{
margin: 0;
padding: 0;
width: 170px; /* Main Thực đơn Item widths */
list-style-type: none;
font: bold 12px Verdana;
border-bottom: 1px solid #ccc;
}
.ddsmoothmenu-v ul li{
position: relative;
}
/* Top level thực đơn links style */
.ddsmoothmenu-v ul li a{
display: block;
overflow: tự động; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active{
background: #414141; /*background of thực đơn items (default state)*/
color: white;
}
.ddsmoothmenu-v ul li a.selected{ /*CSS class that's dynamically added to the currently active thực đơn items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu-v ul li a:hover{
background: black; /*background of thực đơn items during onmouseover (hover state)*/
color: white;
}
/*Sub level thực đơn items */
.ddsmoothmenu-v ul li ul{
position: absolute;
width: 170px; /*Sub Thực đơn Items width */
top: 0;
font-weight: normal;
visibility: hidden;
}
/* Holly Hack for IE */
* html .ddsmoothmenu-v ul li { float: left; height: 1%; }
* html .ddsmoothmenu-v ul li a { height: 1%; }
/* End */
#414141
) ở bên trên nha. bạn có thể lấy các mã màu
– Để đổi màu Thực đơn bạn đổi mã màu mà mình đã tô màu đỏ () ở bên trên nha. bạn có thể lấy các mã màu Tại đây
</headvàgt;
:
5. Bạn dán đoạn code bên dưới vào trước thẻ
<script
src
='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'type
='text/javascript'
></script
> <script
src
='http://namkna-tratt.googlecode.com/files/ddsmoothmenu-namkna.js'type
='text/javascript'
></script
> <script
type
='text/javascript'
> ddsmoothmenu.init({ mainmenuid: "smoothmenu1", //thực đơn DIV id orientation: 'h', //Horizontal or vertical thực đơn: Set to "h" or "v" classname: 'ddsmoothmenu', //class added to thực đơn's outer DIV //customtheme: ["#1c5a80", "#18374a"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] }) ddsmoothmenu.init({ mainmenuid: "smoothmenu2", //Thực đơn DIV id orientation: 'v', //Horizontal or vertical thực đơn: Set to "h" or "v" classname: 'ddsmoothmenu-v', //class added to thực đơn's outer DIV //customtheme: ["#804000", "#482400"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] }) </script
>
6- Tiếp theo tìm thẻ
</headervàgt;
rồi sao chép toàn bộ các code bên dưới dán vào trên dòng lệnh đó như hình này:
HTML/Javarscipt dưới header và pate code bên dưới vào (Nếu bạn chưa biết tạo 1 tiện ích HTML/Javarscipt thì hãy xem
– Nếu blog của bạn không có thẻ thì bạn hãy tạo một widgetdưới header và pate code bên dưới vào (Nếu bạn chưa biết tạo 1 tiện íchthì hãy xem bài này
<div id="smoothmenu1" class="ddsmoothmenu"> <ulvàgt; <livàgt;<a href="http://namkna.blogspot.com
">Home
</avàgt;</livàgt; <livàgt;<a href="#
">Tên thực đơn
</avàgt; <ulvàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; </ulvàgt; </livàgt; <livàgt;<a href="#">Tên thực đơn
</avàgt; <ulvàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; </ulvàgt; </livàgt; <livàgt;<a href="địa chỉ trang
">Tên thực đơn
</avàgt;</livàgt; <livàgt;<a href="#">Tên thực đơn
</avàgt; <ulvàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="#">Tên trang
</avàgt; <ulvàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="#">Tên trang
</avàgt; <ulvàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; </ulvàgt; </livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; </ulvàgt; </livàgt; </ulvàgt; </livàgt; <livàgt;<a href="địa chỉ trang
">Tên trang
</avàgt;</livàgt; </ulvàgt; <br style="clear: left" /> </divvàgt;
Tùy chỉnh code Thực đơn:
- Thay
http://namkna.blogspot.com
thành địa chỉ trang chính của bạ.
- Dòng
Địa chỉ trang
thành link đến các trang, nội dung hoặc nhãn của bạn.
- Dòng
Tên trang
là tên hiển thị ở các Thực đơn con mà khi bạn Click chuột vào tên đó thì trang của bạn xẽ load đến trang bạn gắn cho link màu đoe ở trên.
7- bấm Lưu mẫu và trở lại Blog để “thưởng thức” thành tích.
– Ps: Các chúng ta nên Download 2 file JS và CSS về Tại đây sau đó Upload lên Hosting riêng để tránh bị die hosting.nếu chưa có hosting bạn hãy sử dụng hosting Tại đây
– Nếu muốn tạo Thực đơn ngang có màu sắc khác bạn có thẻ tham khảo thêm:
Nếu cần giúp đỡ về cách tạo thực đơn?
Hãy để lại comment nếu bạn gặp bất kì rắc rối gì trong quá trình thiết lập. Và nếu thấy nội dung có cíh hãy bấm like và + 1 để ủng hộ namkna tiếp tục post bài nha.
Bạn có thể xem DemoĐầu tiên, bạnvào BlogChọn(Template)Chọn(Edit HTML)Dán đọn code sau vào trước thẻ:(Mẹo: bấmđể mở hộp tìm kiếm và gõ vào)- Nếu muốn tạo Thực đơn ngang có màu sắc khác bạn có thẻ tham khảo thêm: Thực đơn ngang xổ dọc xuống nhiều cấp (kiểu 2)
