Tạo menu responsive cho blogspot mới nhất
CSS HTML ResponsiveMenu responsive là một menu hiển thị một menu thả xuống lớn và thường có nhiều liên kết mà bạn có thể thêm vào nó. Tính năng Menu responsive thường được sử dụng trên các trang web lớn có nhiều nội dung và loại trang để yêu cầu nhiều điều hướng, chẳng hạn như các trang web của chính phủ hoặc các trang tin tức.
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.
Chọn JQuery nếu sử dụng các phiên bản (2) hoặc (3)
Sau đó chọn mã CSS bên dưới trước thẻ đóng </head>
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.
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.
![[ widget ] Tìm hiểu về thuộc tính thẻ Widget trong blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSO5bZh51tUi6XIp2s5fOhnIKycq1Mc9ADS1xNhl4V5n9NIvUEM_5MrFNS9QbLgw6dZxlKDxBtLNtqySlKcBdEnyF4ThbOPUgRUbSu4xs10vt59WGq7_wK2gho4LqfA4A-BRzkc8TnbaI/w280-h186-p-k-no-nu/tim-hieu-the-widget-trong-blogspot.jpg)
![[ section ] Tìm hiểu về thuộc tính thẻ Section trong blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt1sAzfrTCPGY7_TjwucHJ_LngoXhORQiNcS6IM1zKXaqsQcTVf-VDWeF439JE5cu0-jKCPKoKvq6rbkV-opuTkSr2j_mVITSFnQIESNjk_WnwozLpuVmyoW8WoQD5YyNuXhGKEc2hN3M/w280-h186-p-k-no-nu/Cau-Truc-Cua-Trang-Web-Su-Dung-The-HTML5-section-ngocgn90.jpeg)
