Tạo menu responsive cho blogspot mới nhất
Hôm nay mình sẽ hướng dẫn làm một menu responsive đơn giản tùy chọn nó đáp ứng đủ trên blogspot.
Cách tạo menu responsive cho blogspot
Ở đây mình sẽ cung cấp cho bạn một số lượng lớn menu đã được trang bị các tính năng bao gồm tìm kiếm, sau đó chỉ cần điều chỉnh theo nhu cầu của các bạn.
Cần lưu ý, mã mà mình sẽ chia sẻ yêu cầu biểu tượng Fontwesome. Vì vậy, thêm Fontwesome trong mẫu nếu nó không tồn tại.Đầu tiên cac bạn mở trang Blogger -> Nhấp vào menu Chủ đề và nhấp vào nút Chỉnh sửa HTML-> thêm mã bên dưới trước thẻ đóng <body>
<div class='megamenu-container'>
<div class='megamenu'>
<ul>
<li><a href='/'>Home</a></li>
<li>
<a href='#'>About</a>
<ul>
<li>
<a href='#'>School</a>
<ul>
<li><a href='#'>Leadership</a></li>
<li><a href='#'>History</a></li>
<li><a href='#'>Locations</a></li>
<li><a href='#'>Careers</a></li>
</ul>
</li>
<li>
<a href='#'>Study</a>
<ul>
<li><a href='#'>Undergraduate</a></li>
<li><a href='#'>Masters</a></li>
<li><a href='#'>International</a></li>
<li><a href='#'>Online</a></li>
</ul>
</li>
<li>
<a href='#'>Research</a>
<ul>
<li><a href='#'>Undergraduate research</a></li>
<li><a href='#'>Masters research</a></li>
<li><a href='#'>Funding</a></li>
</ul>
</li>
<li>
<a href='#'>Something</a>
<ul>
<li><a href='#'>Sub something</a></li>
<li><a href='#'>Sub something</a></li>
<li><a href='#'>Sub something</a></li>
<li><a href='#'>Sub something</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>News</a>
<ul>
<li><a href='#'>Today</a></li>
<li><a href='#'>Calendar</a></li>
<li><a href='#'>Sport</a></li>
</ul>
</li>
<li>
<a href='#'>Contact</a>
<ul>
<li>
<a href='#'>School</a>
<ul>
<li><a href='#'>Lidership</a></li>
<li><a href='#'>History</a></li>
<li><a href='#'>Locations</a></li>
<li><a href='#'>Careers</a></li>
</ul>
</li>
<li>
<a href='#'>Study</a>
<ul>
<li><a href='#'>Undergraduate</a></li>
<li><a href='#'>Masters</a></li>
<li><a href='#'>International</a></li>
<li><a href='#'>Online</a></li>
</ul>
</li>
<li>
<a href='#'>Study</a>
<ul>
<li><a href='#'>Undergraduate</a></li>
<li><a href='#'>Masters</a></li>
<li><a href='#'>International</a></li>
<li><a href='#'>Online</a></li>
</ul>
</li>
<li>
<a href='#'>Another sub</a>
<ul>
<li><a href='#'>Undergraduate</a></li>
<li><a href='#'>Masters</a></li>
<li><a href='#'>International</a></li>
<li><a href='#'>Online</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<span class='containersearch'>
<form action='/search' id='search-form' method='get'>
<input class='inputnui' name='q' placeholder='Search here...' type='search' value=''/>
<i aria-hidden='true' class='fa fa-search'/>
</form>
</span>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
// JS Megamenu by ngocgn90
$(document).ready(function(){"use strict";$(".megamenu > ul > li:has( > ul)").addClass("megamenu-dropdown-icon"),$(".megamenu > ul > li > ul:not(:has(ul))").addClass("normal-sub"),$(".megamenu > ul").before('<a href="#" class="megamenu-mobile"></a>'),$(".megamenu > ul > li").hover(function(e){$(window).width()>943&&($(this).children("ul").stop(!0,!1).fadeToggle(150),e.preventDefault())}),$(".megamenu > ul > li").click(function(){$(window).width()<=943&&$(this).children("ul").fadeToggle(150)}),$(".megamenu-mobile").click(function(e){$(".megamenu > ul").toggleClass("show-on-mobile"),e.preventDefault()})});
$(document).ready(function(){$(".fa-search").click(function(){$(".containersearch, .inputnui").toggleClass("active"),$("input[type='text']").focus()})});
//]]>
</script>Chọn JQuery nếu sử dụng các phiên bản (2) hoặc (3)
<script type='text/javascript'>
//<![CDATA[
// JS Megamenu by ngocgn90
$(document).ready(function(){"use strict";$(".megamenu > ul > li:has( > ul)").addClass("megamenu-dropdown-icon"),$(".megamenu > ul > li > ul:not(:has(ul))").addClass("normal-sub"),$(".megamenu > ul").before('<a href="#" class="megamenu-mobile"></a>'),$(".megamenu > ul > li").hover(function(e){$(window).width()>943&&($(this).children("ul").stop(!0,!1).fadeToggle(150),e.preventDefault())}),$(".megamenu > ul > li").click(function(){$(window).width()<=943&&$(this).children("ul").fadeToggle(150)}),$(".megamenu-mobile").click(function(e){$(".megamenu > ul").toggleClass("show-on-mobile"),e.preventDefault()})});
$(document).ready(function(){$(".fa-search").click(function(){$(".containersearch, .inputnui").toggleClass("active"),$("input[type='text']").focus()})});var prev=0,$window=$(window),nav=$(".megamenu-container");$window.on("scroll",function(){var n=$window.scrollTop();nav.toggleClass("hiddenmega",n>prev),prev=n});
//]]>
</script>Sau đó chọn mã CSS bên dưới trước thẻ đóng </head>
<style type='text/css'>
/* Responsive megamenu by ngocgn90 */
.megamenu{position:relative;display:block;margin:auto;text-align:center;max-width:970px}
.megamenu-container{margin:0 auto;background:#222;box-shadow:0 2px 10px rgba(0,0,0,0.05);position:fixed;top:0;left:0;right:0;z-index:99}
.megamenu-mobile{display:none;padding:24px 20px;background:#fff;box-shadow:0 2px 15px rgba(0,0,0,0.1)}
.megamenu-mobile:before{content:"\f0c9";font-family:"fontawesome";font-size:1.5rem;padding:0;left:20px;position:absolute;top:15px;transform:translateY(-25%);color:#222}
.megamenu-dropdown-icon:before{content:"\f107";font-family:"fontawesome";display:none;cursor:pointer;color:#fff;position:absolute;right:20px;top:15px}
.megamenu > ul{margin:0 auto;width:100%;list-style:none;padding:0;position:relative;box-sizing:border-box}
.megamenu > ul:before,.megamenu > ul:after{content:"";display:table}
.megamenu > ul:after{clear:both}
.megamenu > ul > li{float:left;padding:0;margin:0;text-decoration:none;transition:all .1s}
.megamenu > ul > li a{cursor:pointer;text-decoration:none;padding:15px 20px;display:block;color:#fff;font-size:14px;transition:all .1s}
.megamenu > ul > li:hover{background:#e84118}
.megamenu > ul > li > ul{display:none;width:100%;background:#fff;padding:20px;position:absolute;z-index:99;left:0;margin:0;list-style:none;text-align:left;box-sizing:border-box;box-shadow:0 8px 10px -4px rgba(0,0,0,0.2)}
.megamenu > ul > li > ul:before,.megamenu > ul > li > ul:after{content:"";display:table}
.megamenu > ul > li > ul:after{clear:both}
.megamenu > ul > li > ul > li{margin:0;padding-bottom:0;list-style:none;width:25%;background:none;float:left}
.megamenu > ul > li > ul > li a{color:#222;padding:0.2em 0;width:95%;display:block;border-bottom:1px solid rgba(0,0,0,0.1)}
.megamenu > ul > li > ul > li a:hover{color:#e84118}
.megamenu > ul > li > ul > li > ul{display:block;padding:0;margin:10px 0 0;list-style:none;box-sizing:border-box}
.megamenu > ul > li > ul > li > ul:before,.megamenu > ul > li > ul > li > ul:after{content:"";display:table}
.megamenu > ul > li > ul > li > ul:after{clear:both}
.megamenu > ul > li > ul > li > ul > li{float:left;width:100%;padding:10px 0;margin:0;font-size:0.8em}
.megamenu > ul > li > ul > li > ul > li a{border:0}
.megamenu > ul > li > ul.normal-sub{width:100%;max-width:170px;left:auto;padding:5px 10px}
.megamenu > ul > li > ul.normal-sub > li{width:100%}
.megamenu > ul > li > ul.normal-sub > li a{border:0;padding:.5em 0}
.containersearch{background:#e84118;width:0;position:absolute;top:0;right:0;padding:0 30px;text-align:center;transition:all 0.5s ease}
.containersearch .fa{background:#e84118;color:#fff;position:absolute;font-size:19px;cursor:pointer;padding:0;top:15px;right:20px}
.inputnui{border:0!important;background:transparent;width:0%;padding:17.5px 0!important;outline:none;color:#fff;font-size:15px!important;transition:all 0.3s ease}
.containersearch.active{width:250px;padding-left:25px;transition:all 0.5s ease}
.inputnui.active{width:98%;padding-left:5px!important;transition:all 0.5s 0.8s ease}
input::placeholder{color:#fff}
@media only screen and (max-width: 959px) {
.megamenu-container{width:100%}
.megamenu-mobile,.megamenu-dropdown-icon:before{display:block}
.megamenu > ul{display:none}
.megamenu > ul > li{position:relative;width:100%;float:none;display:inline-block;text-align:left;padding:0}
.megamenu > ul > li a{padding:15px 20px;display:block}
.megamenu > ul > li > ul{position:relative;overflow-y:scroll;max-height:280px}
.megamenu > ul > li > ul.normal-sub{width:100%;max-width:100%}
.megamenu > ul > li > ul > li{float:none;width:100%;margin-top:20px}
.megamenu > ul > li > ul > li:first-child{margin:0}
.megamenu > ul > li > ul > li > ul{position:relative}
.megamenu > ul > li > ul > li > ul > li{float:none}
.megamenu .show-on-mobile{display:block}
.megamenu > ul > li:hover{background:rgba(255,255,255,.1)}
.containersearch{background:transparent}
.containersearch .fa{background:transparent;color:#222}
.containersearch.active{width:100%;text-align:center}
.inputnui.active,input::placeholder{color:#888;text-align:center}}
</style>Tiếp theo, nhấn vào nút Lưu chủ đề và xem kết quả trên blog của bạn. Đó là cách tạo menu responsive cho blogspot. Cảm ơn bạn đã ghé thăm và hy vọng hữu ích.