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 có khung tìm kiếm cho blogspot (sử dụng Jquery)

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 thư viện Jquery

Responsive Menu có khung tìm kiếm cho blogspot (sử dụng Jquery)
Desktop View
Responsive Menu có khung tìm kiếm cho blogspot (sử dụng Jquery)
Mobile View

CSS Code

Thêm đoạn CSS sau vào trước thẻ ]]></b:skin> hoặc </style>:
/*----- Toggle Button -----*/
.toggle-nav{display:none}
@media screen and (min-width:720px){.menu{width:100%;box-shadow:0 1px 1px rgba(0,0,0,0.15);background:#303030}}
.menu ul{display:inline-block;margin: 10px 0 5px 10px;padding-left:0;}
.menu li{margin:0 20px 0 0;float:left;list-style:none;font-size:17px}
.menu li:last-child{margin-right:0}
.menu a{text-shadow:0 1px 0 rgba(0,0,0,0.5);color:#999;transition:color linear 0.15s}
.menu a:hover,.menu .current-item a{text-decoration:none;color:#66a992}
/*----- Search -----*/
#search-form{float:right;display:inline-block;padding-top: 4px;  padding-right: 5px}
#search-form input{width:200px;height:30px;padding:0 8px;float:left;border-radius:2px 0 0 2px;font-size:13px;margin: 0px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; border: 0px; 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}
/*----- Responsive -----*/
@media screen and (max-width:1150px){.wrap{width:90%}}
@media screen and (max-width:970px){.search-form input{width:120px}}
@media screen and (max-width:720px){.menu{position:relative;display:inline-block;  width: 100%;background:#37474F;}.menu ul.active{display:none}.menu ul{width:100%;position:absolute;top:95%;left:0;padding:10px 18px;box-shadow:0 1px 1px rgba(0,0,0,0.15);background:#303030}.menu ul:after{width:0;height:0;position:absolute;top:0%;left:22px;content:'';transform:translate(0%,-100%);border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #303030}.menu li{margin:5px 0 5px 0;float:none;display:block}.menu a{display:block}.toggle-nav{padding:6px 20px;float:left;display:inline-block;box-shadow:0 1px 1px rgba(0,0,0,0.15);background:#303030;text-shadow:0 1px 0 rgba(0,0,0,0.5);color:#777;font-size:20px;transition:color linear 0.15s}.toggle-nav:hover,.toggle-nav.active{text-decoration:none;color:#66a992}#search-form input{box-shadow:-1px 1px 2px rgba(0,0,0,0.1)}}
  @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:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class='menu' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
    <ul class='active'>
        <li class='current-item'><a href='/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
  <li><a href='https://showtricks.blogspot.com/' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
  <li><a href='https://showtricks.blogspot.com/p/contact.html' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
  <li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
  <li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
    </ul>
    <a class='toggle-nav' href='#'>&#9776;</a>
 <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>
</nav>

Nếu template đã cài sẵn thư viện Jquery thì xóa bỏ đoạn màu vàng đi

Javascript

Thêm đoạn Script sau vào trước thẻ đóng </body>
<!-- mainmenu -->
<script type='text/javascript'>
//<![CDATA[     
jQuery(document).ready(function() {
 jQuery('.toggle-nav').click(function(e) {
  jQuery(this).toggleClass('active');
  jQuery('.menu ul').toggleClass('active');

  e.preventDefault();
 });
});
//]]>
</script>

0 nhận xét

Đăng nhận xét