Trong bối cảnh việc thiết kế web , thiết kế blogspot luôn phải tương thích mọi thiết bị di động, ipad,... thì menu responsive cho web site, blog cũng rất quan trọng.
Tags:
Ở đây share123.vn trích 1 đoạn code menu có responsive khá đẹp mà mình hay sử dụng, code được chia sẻ trên sinhvienit:
Live Demo: http://www.share123.vn/
 |
| Demo menu responsive cho blogspot |
Cách làm:
Chèn trong thẻ body đoạn menu bạn muốn hiển thị như sau:
<script type='text/javascript'>
//<![CDATA[
!function(n){n.fn.menumaker=function(s){var e=n(this),i=n.extend({title:"Menu",format:"dropdown",sticky:!1},s);return this.each(function(){return e.prepend('<div id="menu-button">'+i.title+"</div>"),n(this).find("#menu-button").on("click",function(){n(this).toggleClass("menu-opened");var s=n(this).next("ul");s.hasClass("open")?s.hide().removeClass("open"):(s.show().addClass("open"),"dropdown"===i.format&&s.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){n(this).toggleClass("submenu-opened"),n(this).siblings("ul").hasClass("open")?n(this).siblings("ul").removeClass("open").hide():n(this).siblings("ul").addClass("open").show()})},"multitoggle"===i.format?multiTg():e.addClass("dropdown"),i.sticky===!0&&e.css("position","fixed"),resizeFix=function(){n(window).width()>768&&e.find("ul").show(),n(window).width()<=768&&e.find("ul").hide().removeClass("open")},resizeFix(),n(window).on("resize",resizeFix)})}}(jQuery),function(n){n(document).ready(function(){n("#cssmenu").menumaker({title:"Menu",format:"multitoggle"})})}(jQuery);
//]]>
</script>
<style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Arial:400,700); #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #menu-button { 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:after,#cssmenu > ul:after { content:" ." ; display:block; clear:both; visibility:hidden; line-height:0; height:0; }
#cssmenu #menu-button { display:none; }
#cssmenu { font-family:Arial,sans-serif; max-width:1024px; margin:auto; }
#cssmenu > ul > li { float:left; border-right:1px solid #02663D; border-left:1px solid #023D25; }
#cssmenu.align-center > ul { font-size:0; text-align:center; }
#cssmenu.align-center > ul > li { display:inline-block; float:none; }
#cssmenu.align-center ul ul { text-align:left; }
#cssmenu.align-right > ul > li { float:right; }
#cssmenu > ul > li > a { padding:13px 17px; font-size:12px; letter-spacing:1px; text-decoration:none; color:#dddddd; font-weight:700; text-transform:uppercase; }
#cssmenu > ul > li:hover > a { color:#ffffff; }
#cssmenu > ul > li.has-sub > a { padding-right:10px; }
#cssmenu > ul > li.has-sub > a:after { position:absolute; top:0; right:0; width:0; height:2px; display:block; background:#dddddd; content:' ' ; }
#cssmenu > ul > li.has-sub > a:before { position:absolute; top:0; right:0; display:block; width:2px; height:0; background:#dddddd; content:' ' ; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; }
#cssmenu > ul > li.has-sub:hover > a:before { top:23px; height:0; }
#cssmenu ul ul { position:absolute; left:-9999px; z-index:9999; }
#cssmenu.align-right ul ul { text-align:right; }
#cssmenu ul ul li { height:0; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; }
#cssmenu li:hover > ul { left:auto; }
#cssmenu.align-right li:hover > ul { left:auto; right:0; }
#cssmenu li:hover > ul > li { height:35px; }
#cssmenu ul ul ul { margin-left:100%; top:0; }
#cssmenu.align-right ul ul ul { margin-left:0; margin-right:100%; }
#cssmenu ul ul li a { border-bottom:1px solid rgba(150,150,150,0.15); padding:11px 15px; width:170px; font-size:12px; text-decoration:none; color:#dddddd; font-weight:400; background:#333333; }
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a { border-bottom:0; }
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover { color:#ffffff; }
#cssmenu ul ul li.has-sub > a:after { position:absolute; top:16px; right:11px; width:8px; height:2px; display:block; background:#dddddd; content:' ' ; }
#cssmenu.align-right ul ul li.has-sub > a:after { right:auto; left:11px; }
#cssmenu ul ul li.has-sub > a:before { position:absolute; top:13px; right:14px; display:block; width:2px; height:8px; background:#dddddd; content:' ' ; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease; }
#cssmenu.align-right ul ul li.has-sub > a:before { right:auto; left:14px; }
#cssmenu ul ul > li.has-sub:hover > a:before { top:17px; height:0; }
@media all and (max-width:768px),only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min--moz-device-pixel-ratio:2) and (max-width:1024px),only screen and (-o-min-device-pixel-ratio:2/1) and (max-width:1024px),only screen and (min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min-resolution:192dpi) and (max-width:1024px),only screen and (min-resolution:2dppx) and (max-width:1024px) {
#cssmenu { width:100%; } #cssmenu ul { width:100%; display:none; } #cssmenu.align-center > ul { text-align:left; } #cssmenu ul li { width:100%; border-top:1px solid rgba(120,120,120,0.2); } #cssmenu ul ul li,#cssmenu li:hover > ul > li { height:auto; } #cssmenu ul li a,#cssmenu ul ul li a { width:100%; border-bottom:0; } #cssmenu > ul > li { float:none; } #cssmenu ul ul li a { padding-left:25px; } #cssmenu ul ul ul li a { padding-left:35px; } #cssmenu ul ul li a { color:#dddddd; background:none; } #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a { color:#ffffff; } #cssmenu ul ul,#cssmenu ul ul ul,#cssmenu.align-right ul ul { position:relative; left:0; width:100%; margin:0; text-align:left; } #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before { display:none; } #cssmenu #menu-button { display:block; padding:17px; color:#dddddd; cursor:pointer; font-size:12px; text-transform:uppercase; font-weight:700; } #cssmenu #menu-button:after { position:absolute; top:22px; right:17px; display:block; height:4px; width:20px; border-top:2px solid #dddddd; border-bottom:2px solid #dddddd; content:' ' ; } #cssmenu #menu-button:before { position:absolute; top:16px; right:17px; display:block; height:2px; width:20px; background:#dddddd; content:' ' ; } #cssmenu #menu-button.menu-opened:after { top:23px; border:0; height:2px; width:15px; background:#ffffff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } #cssmenu #menu-button.menu-opened:before { top:23px; background:#ffffff; width:15px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } #cssmenu .submenu-button { position:absolute; z-index:99; right:0; top:0; display:block; border-left:1px solid rgba(120,120,120,0.2); height:46px; width:46px; cursor:pointer; } #cssmenu .submenu-button.submenu-opened { background:#262626; } #cssmenu ul ul .submenu-button { height:34px; width:34px; } #cssmenu .submenu-button:after { position:absolute; top:22px; right:19px; width:8px; height:2px; display:block; background:#dddddd; content:' ' ; } #cssmenu ul ul .submenu-button:after { top:15px; right:13px; } #cssmenu .submenu-button.submenu-opened:after { background:#ffffff; } #cssmenu .submenu-button:before { position:absolute; top:19px; right:22px; display:block; width:2px; height:8px; background:#dddddd; content:' ' ; } #cssmenu ul ul .submenu-button:before { top:12px; right:16px; } #cssmenu .submenu-button.submenu-opened:before { display:none; }
}
</style>
<div id='menu-desktop'>
<div id='cssmenu'>
<ul>
<li><a href='/'>Trang chủ</a></li>
<li><a href='#'>Giới thiệu</a></li>
<li class='active'><a href='#'>Sản phẩm</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
</ul>
</li>
<li><a href='#'>Tin tức</a> </li>
<li><a href='#'>Thanh toán</a></li>
</ul>
</div>
</div>
Lưu ý: bạn thay link và tên menu phù hợp với blog của bạn
Chúc bạn thành công.
Không có nhận xét nào: