Hướng dẫn tạo Menu dọc cho blogspot dạng responsive đẹp và chuyên nghiệp

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.

Thiết kế blogger - Zip Blogger - Mẫu blog đẹp,Template blogspot Free

Hướng dẫn tạo Menu dọc cho blogspot dạng responsive đẹp và chuyên nghiệp

Không có nhận xét nào:

Tag liên kết

Xem nhiều

Bài mới nhất

Blog

Hướng dẫn quản trị

Mẫu blog mới

Thiết kế blogger - Zip Blogger - Mẫu blog đẹp,Template blogspot Free

Hướng dẫn tạo Menu dọc cho blogspot dạng responsive đẹp và chuyên nghiệp

Bài viết liên quan:

Không có nhận xét nào:

Tag liên kết

Xem nhiều

Bài mới nhất

Blog

Hướng dẫn quản trị

Mẫu blog mới