Menu (hoctienganh123.net)

1KB

index.rar

<span class="search-button search"><i class="fas fa-search"></i></span>

<div class="container containersearch">
    <div class="td-drop-down-search">
        <form method="POST" class="td-search-form" action="<?php echo site_url('searchkeyword'); ?>">
            <div role="search" class="td-head-form-search-wrap">
                <input id="td-header-search" type="text" value="" name="s">
                <input class="wpb_button wpb_btn-inverse btn" type="submit" id="td-header-search-top" value="Search">
            </div>
        </form>
        <div id="td-aj-search"></div>
    </div>
  </div>

.containersearch {
    position: relative;
}

.header-search {
  position: relative;
}
#td-header-search {
  padding-left: 5px;
  border-top: 1px solid #eaeaea;
  border-left: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
#td-header-search-top {
  padding-right: 15px;
  padding-left: 15px;
  background-color: #000;
  color: #fff;
  border: none;
  font-weight: 700;
  width: 80px;
  height: 35px;
  &:hover {
    background-color: #e25d1e;
  }
}
.td-drop-down-search  {
  width: 400px;
}
.td-head-form-search-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  input{
    float: left;
    height: 35px;
  }
}
.td-search-form {
  margin: 20px;
}
.td-drop-down-search {
  text-align: right;
  position: absolute;
  top: 100%;
  z-index: 3;
  visibility: hidden;
  opacity: 0;
  right: 0;
  border-radius: 0;
  border: none;
  line-height: 30px;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-transform: translate3d(0, 20px, 0);
  transform: translate3d(0, 20px, 0);
  &.td-drop-down-search-open {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

jQuery(document).ready(function($) { $(".search-button").click(function(d) { $(".td-drop-down-search").toggleClass("td-drop-down-search-open") }); });