Với giao diện web, blog hiện nay, menu tương thích các thiết bị di động đã trở nên phổ biến, hôm trước mình đã chia sẻ một dạng menu ngang responsive của sinhvienit chia sẻ khá đẹp, hôm nay mình chia sẻ một menu dọc cũng khá đẹp như vậy.
 |
| Menu dọc cho blogspot dạng responsive đẹp và chuyên nghiệp |
Hướng dẫn:
Đối với Blogspot bạn chèn đoạn code sau trong thẻ body là được:
<style type="text/css">
#cssmenu-doc,#cssmenu-doc ul,#cssmenu-doc ul li,#cssmenu-doc ul li a { margin:0; padding:0; border:0; list-style:none; line-height:1; display:block; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#cssmenu-doc { width:200px; font-family:Helvetica,Arial,sans-serif; color:#ffffff; }
#cssmenu-doc ul ul { display:none; }
.align-right { float:right; }
#cssmenu-doc > ul > li > a { padding:15px 20px; border-left:1px solid #1682ba; border-right:1px solid #1682ba; border-top:1px solid #1682ba; cursor:pointer; z-index:2; font-size:14px; font-weight:bold; text-decoration:none; color:#ffffff; text-shadow:0 1px 1px rgba(0,0,0,0.35); background:#36aae7; background:-webkit-linear-gradient(#36aae7,#1fa0e4); background:-moz-linear-gradient(#36aae7,#1fa0e4); background:-o-linear-gradient(#36aae7,#1fa0e4); background:-ms-linear-gradient(#36aae7,#1fa0e4); background:linear-gradient(#36aae7,#1fa0e4); box-shadow:inset 0 1px 0 rgba(255,255,255,0.15); }
#cssmenu-doc > ul > li > a:hover,#cssmenu-doc > ul > li.active > a,#cssmenu-doc > ul > li.open > a { color:#eeeeee; background:#1fa0e4; background:-webkit-linear-gradient(#1fa0e4,#1992d1); background:-moz-linear-gradient(#1fa0e4,#1992d1); background:-o-linear-gradient(#1fa0e4,#1992d1); background:-ms-linear-gradient(#1fa0e4,#1992d1); background:linear-gradient(#1fa0e4,#1992d1); }
#cssmenu-doc > ul > li.open > a { box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.15); border-bottom:1px solid #1682ba; }
#cssmenu-doc > ul > li:last-child > a,#cssmenu-doc > ul > li.last > a { border-bottom:1px solid #1682ba; }
.holder { width:0; height:0; position:absolute; top:0; right:0; }
.holder::after,.holder::before { display:block; position:absolute; content:""; width:6px; height:6px; right:20px; z-index:10; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -ms-transform:rotate(-135deg); -o-transform:rotate(-135deg); transform:rotate(-135deg); }
.holder::after { top:17px; border-top:2px solid #ffffff; border-left:2px solid #ffffff; }
#cssmenu-doc > ul > li > a:hover > span::after,#cssmenu-doc > ul > li.active > a > span::after,#cssmenu-doc > ul > li.open > a > span::after { border-color:#eeeeee; }
.holder::before { top:18px; border-top:2px solid; border-left:2px solid; border-top-color:inherit; border-left-color:inherit; }
#cssmenu-doc ul ul li a { cursor:pointer; border-bottom:1px solid #32373e; border-left:1px solid #32373e; border-right:1px solid #32373e; padding:10px 20px; z-index:1; text-decoration:none; font-size:13px; color:#eeeeee; background:#49505a; box-shadow:inset 0 1px 0 rgba(255,255,255,0.1); }
#cssmenu-doc ul ul li:hover > a,#cssmenu-doc ul ul li.open > a,#cssmenu-doc ul ul li.active > a { background:#424852; color:#ffffff; }
#cssmenu-doc ul ul li:first-child > a { box-shadow:none; }
#cssmenu-doc ul ul ul li:first-child > a { box-shadow:inset 0 1px 0 rgba(255,255,255,0.1); }
#cssmenu-doc ul ul ul li a { padding-left:30px; }
#cssmenu-doc > ul > li > ul > li:last-child > a,#cssmenu-doc > ul > li > ul > li.last > a { border-bottom:0; }
#cssmenu-doc > ul > li > ul > li.open:last-child > a,#cssmenu-doc > ul > li > ul > li.last.open > a { border-bottom:1px solid #32373e; }
#cssmenu-doc > ul > li > ul > li.open:last-child > ul > li:last-child > a { border-bottom:0; }
#cssmenu-doc ul ul li.has-sub > a::after { display:block; position:absolute; content:""; width:5px; height:5px; right:20px; z-index:10; top:11.5px; border-top:2px solid #eeeeee; border-left:2px solid #eeeeee; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -ms-transform:rotate(-135deg); -o-transform:rotate(-135deg); transform:rotate(-135deg); }
#cssmenu-doc ul ul li.active > a::after,#cssmenu-doc ul ul li.open > a::after,#cssmenu-doc ul ul li > a:hover::after { border-color:#ffffff; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
( function( $ ) {
$( document ).ready(function() {
$('#cssmenu-doc li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});
$('#cssmenu-doc>ul>li.has-sub>a').append('<span class="holder"></span>');
(function getColor() {
var r, g, b;
var textColor = $('#cssmenu-doc').css('color');
textColor = textColor.slice(4);
r = textColor.slice(0, textColor.indexOf(','));
textColor = textColor.slice(textColor.indexOf(' ') + 1);
g = textColor.slice(0, textColor.indexOf(','));
textColor = textColor.slice(textColor.indexOf(' ') + 1);
b = textColor.slice(0, textColor.indexOf(')'));
var l = rgbToHsl(r, g, b);
if (l > 0.7) {
$('#cssmenu-doc>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
$('#cssmenu-doc>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
}
else
{
$('#cssmenu-doc>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
$('#cssmenu-doc>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
}
})();
function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0;
}
else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return l;
}
});
} )( jQuery );
//]]>
</script>
<div id='cssmenu-doc'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>Chúc bạn thành công.
