Responsive Menu đa cấp có khung tìm kiếm cho Blogspot

Responsive Menu đa cấp có khung tìm kiếm cho Blogspot

Bạn có thể xem Demo hình ảnh bên dưới hoặc tại đây
Trước khi thực hiện, sao lưu lại template và phải đảm bảo là template của bạn đã cài đặt font Awesome

Desktop view

Mobile view

CSS Code

Thêm đoạn CSS sau vào trước thẻ ]]></b:skin> hoặc </style>:

/* CSS Main Menu */
.navmenu{width:100%;background:#303030;display:inline-block}
#menu{color:#fff;font-size:18px;position:relative;top:5px;font-weight:500;cursor:pointer;padding-left:10px;line-height:2.2em}
#menu a{text-decoration:none}
nav{display:none}
nav ul{list-style-type:none;padding-left:0;font-size:0;background-color:#303030}
nav li{display:block;font-size:16px;color:white}
ul.navbar>li>a{color:#fff}
ul.navbar>li>a:hover{color:red}
nav a{display:block;padding:10px;text-decoration:none;color:inherit}
/*==Dropdown Menu==*/
.sub-menu li{list-style-type:none;display:inline-block}
ul.navbar li ul.sub-menu{display:none;position:absolute}
ul.navbar li{position:relative}
ul.navbar li:hover ul.sub-menu{display:block}
.sub-menu li{margin-left:0!important}
ul.sub-menu>li>a{color:#fff}
ul.sub-menu>li>a:hover{color:red}
@media screen and (max-width:720px){nav ul{width:100%!important}#sub-menu{display:none} nav a{padding:5px 10px}
}
@media screen and (min-width:720px){#menu{display:none}nav{display:block!important}nav li{display:inline-block}}
/*----- Search -----*/
#search-form{display:inline-block;padding-top:4px;padding-right:5px;float:right}
#search-form input{width:200px;height:30px;padding:0 8px;float:left;border-radius:2px 0 0 2px;font-size:13px;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:0;font-size:100%;font:inherit}
#button-submit{width:auto!important;height:30px;padding:0 8px;float:right;border-radius:0 2px 2px 0;background:#66a992;font-size:13px;font-weight:600;text-shadow:0 1px 0 rgba(0,0,0,0.3);color:#fff}
@media screen and (max-width:480px){.toggle-nav{padding:6px 10px}#search-form input{width:150px}}
/* <----Finish menu */

HTML code

Thêm đoạn HTML sau vào bên trên thẻ <header> hoặc bên dưới </header>, phụ thuộc vào template bạn đang sử dụng:

<div class='content-wrapper'>
  <div class='navmenu'>
   <form action='/search' autocomplete='off' id='search-form' method='get'>
<input name='q' placeholder='Search here...' size='15' type='text'/>
<input id='button-submit' type='submit' value='Search'/>
        </form>
    <span id='menu'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAC9JREFUeNpi/P//PwM1AQsQU9VEJgYqg8FvICgMGUeel0eTzWiyGU02Qz/ZAAQYAOPcBjEdYroKAAAAAElFTkSuQmCC'  /></span>
    <nav id='navbar' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
    <ul class='navbar'>
        <li><a href='/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
        <li><a href='https://showtricks.blogspot.com/p/contact.html' itemprop='url' title='Home'><span itemprop='name'>Contact</span></a></li>
        <li id='sub-menu'><span itemprop='name'>Courses</span>
                <ul class="sub-menu">
        <li><a href='/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
        <li><a href='/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
      </ul>
  </li>
        
          <li><a href='/' itemprop='url' title='Home'><span itemprop='name'>Contact Us</span></a></li>
             </ul>
</nav>
</div>
</div>
<div style='clear: both;'/>

Javascript

Thêm đoạn Script sau vào trước thẻ đóng </body>

<!-- mainmenu -->
<script type='text/javascript'>
//<![CDATA[     
document.getElementById('menu').addEventListener('click', function () {
        var nav = document.getElementsByTagName('nav')[0];
        if (nav.style.display == 'block') {
            nav.style.display = 'none';
        } else {
            nav.style.display = 'block';
        }
    }, false);
//]]>
</script>