Tuan Phan Blog

Chia sẻ, học hỏi và đam mê thế giới NET

» » » » » Responsive dropdown menu and Search sử dụng jQuery

Responsive dropdown menu and Search sử dụng jQuery

By
Responsive dropdown menu  blogspot củng đươc các blogger viết khá nhiều, lần này mình bổ sung khung tìm kiếm ( Search  ) kết hợp trên khung menu rất tiện lợi và đẹp mắt với một chút  jQuery.
Responsive dropdown menu and Search sử dụng jQuery
Responsive dropdown menu and Search sử dụng jQuery
Responsive dropdown menu and Search sử dụng jQuery

Responsive dropdown menu and Search lần này sử dụng tông màu đen làm chủ đạo kết hợp với màu vàng cam và màu chử trắng rất dễ nhìn . Nếu những ai không thích tông màu này có thể thay đổi theo ý thích của mình.
Và một cái hay ở bài này Menu và khung tìm kiếm ẩn khi chúng ta kéo thanh trượt xuống và hiện khi ta kéo nhẹ thanh trượt lên

Responsive dropdown menu and Search

Các bước tiến hành chèn Responsive dropdown menu and Search vào trong template của bạn, nếu các bạn nào chưa rành về code thì hãy tải template của mình về máy trước khi chèn tiện ích này vào. Hoặc 1 mẹo nhỏ khi chúng ta chèn bị sai thì ta cứ nhấn Ctrl+Z rồi lưu lại nó sẻ trờ về lại như ban đầu.
Bước 1:
  • Đăng nhập vào tài khoản blogger.com của bạn
  • Chọn Mẫu
  • Chỉnh sửa  HTML
Sau đó chúng ta nhấn Ctrl+F tìm đến thẻ ]]></b:skin> và thêm đoạn CSS bên dưới lên trên nó.

CSS Responsive dropdown menu and Search

nav {
    width: 100%;
}

.nav_wrapper {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    transition: top .5s ease-out;
    background: #2f3b3f;
}

.scroll {
    top: -90px;
}

.no-scroll {
    top: 0;
    z-index: 9999;
}

.btn {
    padding: 10px 1%;
    margin: 5px;
    color: #fff;
    text-decoration: none;
    font-family: sans-serif;
    transition: all 0.1s ease;
}

.btn:hover {
    transition: all 0.1s ease;
}

#search {
    float: right;
    font-size: 30px;
    padding: 2px 15px;
    line-height: 40px;
    color: #fff;
    margin: 0;
    font-weight: 700;
    -webkit-transform: rotate(181deg);
    -moz-transform: rotate(181deg);
    -ms-transform: rotate(181deg);
    -o-transform: rotate(181deg);
    transform: rotate(181deg);
}

#search:hover {
    color: #efa666;
}

.search_box {
    clear: both;
    width: 100%;
    background: #e8ebf0;
    padding: 0;
    margin: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.1s ease-in-out;
}

.search_box.active {
    height: auto;
    padding: 15px 0;
}

.search_box input {
    width: 80%;
    font-size: 13px;
    margin: 0 0 0 15px;
    padding: 10px;
    border: none;
    background: #fff;
}

.search_box input:focus {
    outline: none;
}

.search_box input.search_icon {
    clear: both;
    width: 10%;
    height: auto;
    padding: 10px;
    margin: 0;
    margin-left: -5px;
    border: none;
    color: #fff;
    cursor: pointer;
    background: #8c949d;
    opacity: 1;
    transition: all 0.1s ease;
}

.search_box input.search_icon:hover {
    background: #efa666;
}

.menu-link {
    display: none;
}

.spinner-master input[type=checkbox] {
    display: none;
}

.menu {
    width: 100%;
    height: auto;
    background: #2f3b3f;
    transition: all 0.3s ease;
}

.menu ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
    position: relative;
    display: inline-block;
}

.menu > li > ul.sub_menu {
    min-width: 10em;
    padding: 4px 0;
    background-color: #f4f4f4;
    border: 1px solid #fff;
}

.menu ul li {
    padding: 0px;
}

.menu > ul > li {
    display: inline-block;
}

.menu ul li a {
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
}

.menu ul li a:hover {
    background: #efa666;
    color: #fff;
}

.menu ul li.hover > a {
    background: #efa666;
    color: #fff;
}

.menu ul li > a {
    padding: 15px;
}

.menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
    min-width: 160px;
    background: #39484d;
}

.menu ul li:hover > ul {
    display: block;
}

.menu ul ul > li {
    position: relative;
}

.menu ul ul > li a {
    padding: 10px 15px;
    height: auto;
    background: #39484d;
}

.menu ul ul > li a:hover {
    background: #efa666;
    color: #fff;
}

.menu ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}

@media all and (max-width: 768px) {
    .example-header .container {
        width: 100%;
    }

    #search {
        padding: 10px;
    }

    .spinner-master * {
        transition: all 0.3s;
        box-sizing: border-box;
    }

    .spinner-master {
        position: relative;
        margin: 15px;
        height: 30px;
        width: 30px;
        float: left;
    }

    .spinner-master label {
        cursor: pointer;
        position: absolute;
        z-index: 99;
        height: 100%;
        width: 100%;
        top: 5px;
        left: 0;
    }

    .spinner-master .spinner {
        position: absolute;
        height: 4px;
        width: 100%;
        padding: 0;
        background-color: #fff;
    }

    .spinner-master .diagonal.part-1 {
        position: relative;
        float: left;
    }

    .spinner-master .horizontal {
        position: relative;
        float: left;
        margin-top: 4px;
    }

    .spinner-master .diagonal.part-2 {
        position: relative;
        float: left;
        margin-top: 4px;
    }

    .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal {
        opacity: 0;
    }

    .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        margin-top: 10px;
    }

    .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        margin-top: -12px;
    }

    a.menu-link {
        display: block;
        color: #fff;
        float: left;
        text-decoration: none;
        padding: 10px 16px;
        font-size: 1.5em;
    }

    a.menu-link:hover {
        color: #efa666;
    }

    a.menu-link:after {
        content: "\2630";
        font-weight: normal;
    }

    a.menu-link.active:after {
        content: "\2715";
    }

    .menu {
        clear: both;
        min-width: inherit;
        float: none;
    }

    .menu, .menu > ul ul {
        overflow: hidden;
        max-height: 0;
        background-color: #39484d;
    }

    .menu > li > ul.sub-menu {
        padding: 0px;
        border: none;
    }

    .menu.active, .menu > ul ul.active {
        max-height: 55em;
    }

    .menu ul {
        display: inline;
    }

    .menu li, .menu > ul > li {
        display: block;
    }

    .menu > ul > li:last-of-type a {
        border: none;
    }

    .menu li a {
        color: #fff;
        display: block;
        padding: 0.8em;
        position: relative;
    }

    .menu li.has-submenu > a:after {
        content: '+';
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        font-size: 1.5em;
        padding: 0.55em 0.5em;
    }

    .menu li.has-submenu > a.active:after {
        content: "-";
    }

    .menu ul ul > li a {
        background-color: #39484d;
        padding: 10px 18px 10px 30px;
    }

    .menu ul li a:hover {
        background: #4b5f65;
        color: #fff;
    }

    .menu ul li.hover > a {
        background: #4b5f65;
        color: #fff;
    }

    .menu ul ul, .menu ul ul ul {
        display: inherit;
        position: relative;
        left: auto;
        top: auto;
        border: none;
    }

    .search_box {
        position: absolute;
        top: 60px;
        left: 0;
        z-index: 10;
    }

    .search_box input {
        width: 70%;
    }

    .search_box input.search_icon {
        width: 17%;
    };
}

Sau khi chèn CSS xong các bạn tìm đến thẻ <body> hoặc </header> rồi chèn code HTML bên dưới nó sao nó phù hợp với chổ hiển thị template của bạn.

HTML Responsive dropdown menu and Search

<div class="nav_wrapper">
<!--<a class="menu-link" href="#menu"></a>-->
  
 <div class="spinner-master">
  <input type="checkbox" id="spinner-form" />
  <label for="spinner-form" class="spinner-spin">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
  </label>
</div>
  
<a href="#search_box" class="btn" id="search">&#9740;</a>
<nav id="menu" class="menu">
 <ul class="dropdown">
  <li ><a href="#Link" title="Link">Home</a>
  <ul >
  <li ><a href="#Link" title="Link">Link » </a>
   <ul >
    <li ><a href="#Link" title="Link">Link</a></li>
    <li ><a href="#Link" title="Link">Link</a></li>
   </ul>
  </li>
  <li ><a href="#Link" title="Link">About</a></li>
  <li ><a href="#Link" title="Link">Link » </a>
   <ul >
    <li ><a href="#Link" title="Link">Link</a></li>
    <li ><a href="#link" title="Link">Link</a></li>
    <li ><a href="#Link" title="Link">Link </a></li>
   </ul>
  </li>
  </ul>
  </li>
  <li ><a href="#Link" title="Link">Category</a>
  <ul >
   <li ><a href="#Link" title="Link ">Link</a></li>
   <li ><a href="#Link" title="Link">Link</a></li>
  </ul>
  </li>
  <li ><a href="#Link" title="Link">Portfolio</a>
   <ul >
    <li ><a href="#Link" title="Link">Link</a></li>
    <li ><a href="#Link" title="Link">Link</a></li>
    <li ><a href="#Link" title="Link">Link</a></li>
   </ul>
  </li>
  <li ><a href="#Link" title="Link">Work</a>
  <ul >
   <li ><a href="#Link" title="Link">Link</a></li>
   <li ><a href="#Link" title="Link">Link</a></li>
   <li ><a href="#Link" title="Link">Link</a></li>
   <li ><a href="#Link" title=" Link"> Link</a></li>
  </ul>
  </li>
  <li ><a href="#Link" title="Link">Playground</a>
   <ul >
    <li ><a href="#Link" title="Link">Link  </a></li>
    <li ><a href="#Link" title="Link">Link</a></li>
    <li ><a href="#Link" title="Link">Link</a></li>
   </ul>
  </li>
  <li ><a href="#Link" title="Link">Sitemap</a></li>
 </ul>
 </nav>
<form class="search_box" id="search_box" action="/search/">
   <input name="search_criteria" placeholder="Search here" value="" type="text"/>
   <input class="search_icon" value="Search" type="submit"/>
</form>
</div>

Cuối cùng là đoạn jQuery không thể thiếu trong bài hướng dẫn này. Và các bạn chèn nó trên thẻ </body> nhé

jQuery Responsive dropdown menu and Search

<script type='text/javascript'>
$("ul li:has(ul)").addClass("has-submenu");$("ul li ul").addClass("sub-menu");$("ul.dropdown li").hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});var $menu=$("#menu"),$menulink=$("#spinner-form"),$search=$("#search"),$search_box=$(".search_box"),$menuTrigger=$(".has-submenu > a");$menulink.click(function(e){$menulink.toggleClass("active");$menu.toggleClass("active");if($search.hasClass("active")){$(".menu.active").css("padding-top","50px")}});$search.click(function(e){e.preventDefault();$search_box.toggleClass("active")});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass("active").next("ul").toggleClass("active")});$("ul li:has(ul)");$(function(){var e=$(document).scrollTop();var t=$(".nav_wrapper").outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()>=50){$(".nav_wrapper").css("position","fixed")}else{$(".nav_wrapper").css("position","fixed")}if(n>t){$(".nav_wrapper").addClass("scroll")}else{$(".nav_wrapper").removeClass("scroll")}if(n>e){$(".nav_wrapper").removeClass("no-scroll")}else{$(".nav_wrapper").addClass("no-scroll")}e=$(document).scrollTop()})})
</script>

Các bạn lưu lại và xem kết quả. Chúc các bạn thành công !

Chia sẻ»

0 nhận xét trong bài "Responsive dropdown menu and Search sử dụng jQuery"

Cám ơn các bạn ghé thăm Blog Tuấn Phan !

Nhận xét để đóng góp ý kiến bài viết.

Vui lòng viết nhận xét có dấu.

Không dùng từ ngữ thô tục, chửi bậy.

Nhận xét chứa link spame sẻ bị xóa.

Tạm thời khóa comment ẩn danh do nhiều bạn lợi dụng spame.

Back To Top