Tạo Menu Responsive Chuẩn HTML5 đẹp cho Blogger

Tạo một thanh menu đẹp giúp cho blog của bạn tạo ấn tượng với độc giả, đảm bảo tính khoa học, bắt mắt và thu hút người truy cập,...Hôm nay Blog iChiaSe sẽ hướng dẫn các bạn tạo cho mình Tạo Menu Responsive Chuẩn HTML đẹp cho Blogger đơn giản nhưng rất chuyên nghiệp.
Để Tạo CSS Menu (Responsive) chuẩn HTML5 đẹp cho Blogspot, các bạn thực hiện các bước sau:




Bước 1: Dán đoạn code sau trước thẻ ]]></b:skin>

/*Menu iChiaSe.Biz*/
#menu{background:#098047;color:#eee;height:35px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc;box-shadow: inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#06703D;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}
/*Responsive menu*/
@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}

Bước 2: Đặt đoạn code sau tại vị trí mà bạn muốn hiển thị thanh Menu. Đơn giản bạn hãy đặt tại vị trí code menu cũ của bạn!

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Menu</span></label>
<ul>
<li><a href='/' rel='nofollow' title="RSS">RSS</a></li>
<li><a class='prett' href='/' title="/">Blogger</a>
<ul class='menus'>
<li><a href='/' title="Templates">Templates</a></li>
<li><a href='/' title="HTML5">HTML5</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=vi_VN%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>

Demo PC  Menu Responsive

Demo mobile  Menu Responsive

Code được chia sẻ từ blog's TuấnPhan

Nguồn : VănViệt Blog's

Tag : Thủ Thuật Blogger