Hôm nay tôi giới thiệu với các bạn một số mẫu menu nhỏ đặt trong thêm tiện ích góc bên trái của trang blog , tuỳ theo nhu cầu mà các bạn cứ thoải mái chỉnh sữa cho đến khi nào vừa ý các bạn thì thôi , nếu thích thì xài , không thích thì xoá bỏ , nó sẽ không ảnh hưởng gì đến mẫu blog của các bạn đang xài.
tuy nhiên tôi cũng nhắc các bạn rằng đôi khi mẫu trang blog cũng ảnh hưởng đến các kiểu menu mà bạn định dùng cho blog của mình. nếu một menu nào đó chạy tốt trên trang của người khác mà không chạy tốt trên trang của bạn thì bạn phải nghĩ đến do mẫu blog của mình không thích hợp hoặc vị trí dặt menu đó chưa đúng . Nếu do mẫu blog thì các bạn phải chọn lại mẫu khác , menu ngan thường đặt dưới tiêu đề nếu nó không chạy tốt thì phải đặt nó nằm trên tiêu đề là xong.
Để thêm tiện ích phía trên đầu trang blog các ban làm như sau :
Đầu tiên, đăng nhập vào Blog > chọn Thiết kế > chọn Chỉnh sửa HTML, tiếp theo bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào nó dòng chữ 'header' id rồi nhấn Enter, sẽ thấy trên khung lớn có dòng <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>,
tuy nhiên tôi cũng nhắc các bạn rằng đôi khi mẫu trang blog cũng ảnh hưởng đến các kiểu menu mà bạn định dùng cho blog của mình. nếu một menu nào đó chạy tốt trên trang của người khác mà không chạy tốt trên trang của bạn thì bạn phải nghĩ đến do mẫu blog của mình không thích hợp hoặc vị trí dặt menu đó chưa đúng . Nếu do mẫu blog thì các bạn phải chọn lại mẫu khác , menu ngan thường đặt dưới tiêu đề nếu nó không chạy tốt thì phải đặt nó nằm trên tiêu đề là xong.
Để thêm tiện ích phía trên đầu trang blog các ban làm như sau :
Đầu tiên, đăng nhập vào Blog > chọn Thiết kế > chọn Chỉnh sửa HTML, tiếp theo bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào nó dòng chữ 'header' id rồi nhấn Enter, sẽ thấy trên khung lớn có dòng <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>,
Thay chữ "no" thành chữ "yes" và xoá bỏ maxwidgets='1', cuối cùng bấm Lưu mẫu và trở vào Thiết kế sẽ thấy khung "Thêm tiện ích" nằm phía trên thanh tiêu đề.
Sau đây là một số mẫu menu để các bạn tham khảo :
Các bước thực hiện:
1- Vào thiết kế chọn bố cục.
2- chọn thêm tiện ích.
3- chọn thêm HTML/JAVARSCRIP dán code cần thiết vào , lưu mẫu và xem kết quả .
Code menu ngan 01.
<style>
dd_menu{
mar
ul.
lgin:0px;
padding:0;
ight:50px;
bac
display:block;
h
ekground-color:#0b0b0b;
font-family:"Trebuc
list-style:none;
het MS", sans-serif;
id #0b0b0b;
border-bottom:1px
border-top:1px so
l solid #0b0b0b;
border-left:10px solid #0b0b0b;
box-shadow:0px 3px 4px #0b0b0b;
-box
-moz-box-shadow:0px 3px 4px #0b0b0b;
-webkit
--shadow:0px 3px 4px #0b0b0b;
}
ul.ldd_menu a{
text-decoration:none;
}
ul.ldd_menu > li{
fff;
backgr
float:left;
position:relative;
}
ul.ldd_menu > li > span{
float:left;
color:
#ound-color:#0b0b0b;
height:50px;
line-height:50px;
cursor:default;
padding:0px 20px;
b;
}
ul.ldd_menu .ldd_submenu{
text-shadow:0px 0px 1px #fff;
border-right:1px solid #0b0b0b;
border-left:1px solid #0b0b
0 position:absolute;
top:50px;
width:550px;
display:none;
opacity:0.95;
left:0px;
font-size:14px;
hadow:0px 3px 4px #1af20
background: #0b0b0b;
border-top:1px solid #1af209;
-moz-box-shadow:0px 3px 4px #1af209 inset;
-webkit-box-
s9 inset;
-box-shadow:0px 3px 4px #1af209 inset;
z-index:30; /* thuộc tính hiện menu con đối với các blog để nổi bracgrou */
}
rm:uppercase;
a.ldd_subfoot{
background-color:#f0f0f0;
color:#444;
display:block;
clear:both;
padding:15px 20px;
text-transf
o font-family: Arial, serif;
font-size:12px;
text-shadow:0px 0px 1px #fff;
-moz-box-shadow:0px 0px 2px #777 inset;
float:left;
border-left:1px solid #cf0ac8;
-webkit-box-shadow:0px 0px 2px #777 inset;
-box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
list-style:none;
margin:20px 0px 10px 30px;
padding:10px;
}
li.ldd_heading{
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
color:#fed803;
color:#fff;
padding:1px 3px;
}
text-shadow:0px 0px 1px #cb03f6;
padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
font-family: Arial, serif;
font-size:12px;
line-height:20px;
ul.ldd_menu ul li a:hover{
-moz-box-shadow:0px 0px 2px #333;
-webkit-box-shadow:0px 0px 2px #333;
box-shadow:0px 0px 2px #333;
background:#b803fb;
}
</style>
"ldd_heading">MENU PHỤ .</li>
<li><a href='#'
<ul id="ldd_menu" class="ldd_menu">
<li>
<span>MENU CHÍNH 01.</span><!-- Increases to 510px in width-->
<div class="ldd_submenu">
<ul>
<li class
=title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
Email</a></li>
<li><a href='#' title='#'
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'
>>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
</ul>
<ul>
<li class="ldd_heading">-MENU PHỤ.</li>
<li><a href="X"title='#'>01- X.</a></li>
<li><a href="X"title='#'>02- X .</a>
<li><a href="X"title='#'>03- X .</a>
ass="ldd_heading">MENU PHỤ.</li>
<
<li><a href="X"title='#'>04- X .</a>
<li><a href="X"title='#'>05- X .</a>
<li><a href="X"title='#'>06- X .</a>
<li><a href="X"title='#'>07- X.</a>
<li><a href="X"title='#'>08-X.</a>
<li><a href="#"title='#'>09</a>
<ul>
<li c
lli><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
</ul>
<a class="ldd_subfoot" href="#"> +
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
New Deals</a>
' title='#'>Email</a></li>
<li><a href='#' title='#
</li></li></li></li></li></li></li></li></ul></div>
</li>
<li>
<span>MENU CHÍNH 02.</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">MENU PHỤ.</li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='
#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
><a href='#' title='#'>Email</a></li>
</
<li><a href='#' title='#'>Email</a></li>
</ul>
<ul>
<li class="ldd_heading">MENU PHỤ.</li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<l
iul>
<ul>
<li class="ldd_heading">MENU PHỤ.</li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
</ul>
='#' title='#'>Email</a></li>
<li><a href='#' ti
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>MENU CHÍNH 03.</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">MENU PHỤ.</li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a hre
ftle='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
</ul>
<ul>
<li class="ldd_heading">MENU PHỤ</li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
'>Email</a></li>
</ul>
<a class="ldd_sub
<li><a href='#' title='#'>Email</a></li>
</ul>
<ul>
<li class="ldd_heading">MENU PHỤ</li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='#'>Email</a></li>
<li><a href='#' title='
#foot" href="#"> + New Deals</a>
</div>
</li>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
/**
* the menu
*/
var $menu = $('#ldd_menu');
an');
/**
* for each list element,
* we show the submenu when hovering and
* expand the span element (title) to 510px
*/
$menu.children('li').each(function(){
var $this = $(this);
var $span = $this.children('s
p $span.data('width',$span.width());
$this.bind('mouseenter',function(){
$menu.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':'510px'},300,function(){
$this.find('.ldd_submenu').slideDown(300);
});
}).bind('mouseleave',function(){
$this.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':$span.data('width')+'px'},300);
});
});
});
</script></ul>
code menu ngan 02.
<style>
#mbt-menu, #mbt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#mbt-menu {
width: 913px; /* Độ rộng của toàn bộ thanh menu */
margin: 0px auto ;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#mbt-menu:before,
#mbt-menu:after {
content: "";
display: table;
}
#mbt-menu:after {
clear: both;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#mbt-menu a {
float: left;
padding: 12px 28px;
color: #999;
text-transform: uppercase;
font: bold 12,5px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#mbt-menu li:hover > a {
color: #fafafa;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
padding: 10px;
width: 170px; /* Độ rộng của menu con */
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id="mbt-menu">
<li><a href="http://anhcuatoianh968.blogspot.com/">TRANG CHỦ.</a><ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul>
<li>
<a href="#">Tên MENU.</a>
<ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#">● Tên menu con</a></li>
<li><a href="#">● Tên menu con</a></li>
<li><a href="#">● Tên menu con</a></li>
<li><a href="#">● Tên menu con</a></li>
<li><a href="#">● Tên menu con</a></li>
<li><a href="#">● Tên menu con</a></li>
</ul>
</li></li></li></ul>
<li>
<a href="#">Tên MENU.</a>
<ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul>
</li></li></li></ul>
<li>
<a href="#">Tên MENU.</a>
<ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul>
</li></li></li></ul>
<li>
<a href="#">Tên MENU.</a>
<ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul>
</li></li></li></ul>
<li>
<a href="#">Tên MENU.</a>
<ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul>
<li>
<a href="#">MENU 01 </a>
<ul>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
<li><a href="#"title='#'>Email</a></li>
</ul></li></li></li></ul></li></li></li></li></li></li></ul>
Code menu ngan 03.
<style>
#mbt-menu, #mbt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#mbt-menu {
width: 913px; /* Độ rộng của toàn bộ thanh menu */
margin: 0px auto ;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#mbt-menu:before,
#mbt-menu:after {
content: "";
display: table;
}
#mbt-menu:after {
clear: both;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#mbt-menu a {
float: left;
padding: 12px 28px;
color: #999;
text-transform: uppercase;
font: bold 12,5px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#mbt-menu li:hover > a {
color: #fafafa;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
padding: 10px;
width: 170px; /* Độ rộng của menu con */
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id="mbt-menu">
<li><a href="XX"><font size=4 color=white> TRANG CHỦ.</font></a></li>
<li><a href="XX"><font size=2 color=blue> XX</font></a><li>
<li><a href="XX"><font size=2 color=blue>XX.</font></a><li>
<li><a href="XX"><font size=2 color=blue>XX.</font></a><li>
<li><a href="XX"><font size=2 color=blue> XX.</font></a><li>
<li><a href="XX"><font size=2 color=blue> XX.</font></a><li>
</li></li></li></li></li></li></li></li></li></li></ul>
Các bạn thay màu đỏ là địa chỉ liên kết , màu xanh là nôi dung chú thích , màu vàng là tên hiển thị
cho tất cả các mẫu menu.
Sau đây là các mẫu menu mini đặt bên trái của trang blog , các bạn xem trước ở cột bên trái phía dưới cùng của blog nầy.
Sau đây là một số mẫu menu để các bạn tham khảo :
cho tất cả các mẫu menu.
Sau đây là các mẫu menu mini đặt bên trái của trang blog , các bạn xem trước ở cột bên trái phía dưới cùng của blog nầy.
Sau đây là một số mẫu menu để các bạn tham khảo :
Các bước thực hiện:
1- Vào thiết kế chọn bố cục.
2- chọn thêm tiện ích.
3- chọn thêm HTML/JAVARSCRIP dán code cần thiết vào , lưu mẫu và xem kết quả .
code menu mini 01.
<style>
#mbt-menu, #mbt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#mbt-menu {
width: 200px; /* Độ rộng của toàn bộ thanh menu */
margin: 0px auto ;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#mbt-menu:before,
#mbt-menu:after {
content: "";
display: table;
}
#mbt-menu:after {
clear: both;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#mbt-menu a {
float: left;
padding: 12px 28px;
color: #999;
text-transform: uppercase;
font: bold 12,5px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#mbt-menu li:hover > a {
color: #fafafa;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
padding: 10px;
width: 170px; /* Độ rộng của menu con */
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<img src="http://thuthuataccess.com/forum/images/newpoints/55.gif" border="0" /><img src="http://thuthuataccess.com/forum/images/newpoints/55.gif" border="0" /><img src="http://thuthuataccess.com/forum/images/newpoints/55.gif" border="0" /><img src="http://thuthuataccess.com/forum/images/newpoints/55.gif" border="0" />
<ul id="mbt-menu">
<li><a href="xxx"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" /> - TRANG CHỦ.</a><ul>
<li>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />MENU 01 </a>
<ul>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
</ul>
<li>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />MENU 01 </a>
<ul>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
</ul>
<li>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />MENU 01 </a>
<ul>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
</ul>
<li>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />MENU 01 </a>
<ul>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a></li>
</ul></li></li></li></li></ul></li></ul>
code menu mini 02.
<style>
#mbt-menu, #mbt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#mbt-menu {
width: 200px; /* Độ rộng của toàn bộ thanh menu */
margin: 0px auto ;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#mbt-menu:before,
#mbt-menu:after {
content: "";
display: table;
}
#mbt-menu:after {
clear: both;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#mbt-menu a {
float: left;
padding: 12px 28px;
color: #999;
text-transform: uppercase;
font: bold 12,5px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#mbt-menu li:hover > a {
color: #fafafa;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
padding: 10px;
width: 170px; /* Độ rộng của menu con */
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id="mbt-menu">
<li><a href="xxx"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" /> - TRANG CHỦ.</a><ul>
<li>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Tên MENU.</a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
<ul>
<li>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />MENU 01 </a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
<ul>
<li>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />MENU 02 </a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
<ul>
<li>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />MENU 03
</a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
<ul>
<li>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />MENU 04 </a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
<ul>
<li>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />MENU 05 </a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
</li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul>
code menu mini 03.
<style>
#mbt-menu, #mbt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#mbt-menu {
width: 200px; /* Độ rộng của toàn bộ thanh menu */
margin: 0px auto ;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#mbt-menu:before,
#mbt-menu:after {
content: "";
display: table;
}
#mbt-menu:after {
clear: both;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#mbt-menu a {
float: left;
padding: 12px 28px;
color: #999;
text-transform: uppercase;
font: bold 12,5px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#mbt-menu li:hover > a {
color: #fafafa;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
padding: 10px;
width: 170px; /* Độ rộng của menu con */
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id="mbt-menu">
<li><a href="xxx"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" /> - TRANG CHỦ.</a><ul>
<li><a href="#">D menu cấp 1</a>
<ul>
<li><a href="#">D menu cấp 2</a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
<ul>
<li><a href="#">D menu cấp 3</a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
</li></ul>
</li></ul>
<li><a href="#">C menu cấp 1</a>
<ul>
<li><a href="#">C menu cấp 2</a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
<ul>
<li><a href="#">C menu cấp 3</a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
</li></ul>
</li></ul>
<li><a href="#">B menu cấp 1</a>
<ul>
<li><a href="#">B menu cấp 2</a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
<ul>
<li><a href="#">B menu cấp 3</a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
</li></ul>
</li></ul>
<li><a href="#">A menu cấp 1</a>
<ul>
<li><a href="#">A menu cấp 2</a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
<ul>
<li><a href="#">A menu cấp 3</a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
<ul>
<li><a href="#">A menu cấp 4</a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
<ul>
<li><a href="#">A menu cấp 5</a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
<ul>
<li><a href="#">A menu cấp 6</a>
<a href="#"title='#'>Email</a>
<a href="#"title='#'>Email</a>
<ul></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></li></li></li></ul></li></ul>
Code menu mini 04.
<style>
-menu, #mbt-menu ul {
ma
#mb
trgin: 0;
padding: 0;
#mbt-menu {
list-style: none;
} width: 200px; /* Độ rộng của toàn bộ thanh menu */
margin: 0px auto ;
border: 1px solid #222;
z-linear-gradient(#444, #11
background-color: #111;
background-image: -m
o1);
ckground-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
b
abackground-image: -webkit-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
1px #777;
-webkit-box-sha
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1p
xdow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#mbt-menu:before,
#mbt-menu:after {
zoom:1;
content: "";
display: table;
}
#mbt-menu:after {
clear: both;
}
#mbt-menu
{ }
#mbt-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
a {
float: left;
padding: 1
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#mbt-menu
2px 28px;
color: #999;
text-transform: uppercase;
font: bold 12,5px Arial, Helvetica;
text-decoration: none;
* IE6 only */
color: #faf
text-shadow: 0 1px 0 #000;
}
#mbt-menu li:hover > a {
color: #fafafa;
}
*html #mbt-menu li a:hover {
/afa;
}
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
(linear,left b
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradien
tottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
-shadow: 0 -1px 0 rgba(255,255,255,.3);
box
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-bo
x-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
mbt-menu li:hover > ul {
opacity: 1;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*I
E666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
background-im
padding: 10px;
width: 170px; /* Độ rộng của menu con */
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu ul a:hover {
background-color: #0186ba;
cec, #0186ba);
background-image: -ms-li
age: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04
anear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px
;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mbt-menu ul ul li:first-child a:hover:after {
mages/newpoints/55.gif" border
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<img src="http://thuthuataccess.com/forum/
i="0" /><img src="http://thuthuataccess.com/forum/images/newpoints/55.gif" border="0" /><img src="http://thuthuataccess.com/forum/images/newpoints/55.gif" border="0" /><img src="http://thuthuataccess.com/forum/images/newpoints/55.gif" border="0" />
<ul id="mbt-menu">
a>
<ul>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />MENU 01</a>
<a
<li><a href="xxx"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" /> - TRANG CHỦ.</a><ul>
<li>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Tên MENU.<
/href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a>
<ul>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />MENU 02</a>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a>
<ul>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />MENU 03</a>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a>
<ul>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />MENU 04</a>
<ul>
<li><a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />MENU 05</a>
<a href="#"title='#'><img src="http://img.skitch.com/20120214-8crgt86ak1fqbp9sskb67t3n3m.gif" border="0" />Email</a>
<ul>
</ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul>
No comments:
Post a Comment