Bài đăng nổi bật

Ford Biên Hòa Đồng Nai - Đại lý mua bán xe giá tốt nhất

Xuất hiện tại Biên Hòa Đồng Nai từ năm 2007 tới nay, hãng xe Ôtô nổi tiếng tới từ Mỹ –  Ford Motor  đã khẳng định được một chỗ đứng trong l...

Chủ Nhật, 25 tháng 9, 2016

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 DEMO
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

Responsive Menu đa cấp có khung tìm kiếm cho Blogspot
Desktop view
Responsive Menu đa cấp có khung tìm kiếm cho Blogspot
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://upsot.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>

0 nhận xét

Đăng nhận xét