动画搜索栏切换点击功能

时间：2018-06-25 06:12:19

标签： javascript css

这是我的切换搜索栏的代码，我只想添加动画，例如将其向下滑动，淡入淡出，缓和等。

示例或参考网站可以是此Tutorialzine网站。

var searchContainer = document.querySelector("#search-container");
var mainwrap = document.querySelector(".nav-area");
var openSearch = document.querySelector("#ll-search-icon");
var closeSearch = document.querySelector("#search-close");
var searchInput = document.querySelector(".search-input");

function open() {
  mainwrap.classList.add("move");
  searchContainer.style.zIndex = "3000";
  searchInput.focus();
}

function close() {
  mainwrap.classList.remove("move");
  searchContainer.style.zIndex = "0";
}

function toggleSearch() {
  openSearch.addEventListener('click', open);
  closeSearch.addEventListener('click', close);
}


toggleSearch();
/* =================================
          Main Navigation Area
   ================================= */

.nav-area {
  font-family: "Roboto", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75px;
  position: relative;
  z-index: 1030;
}

.nav-area .logo a {
  display: flex;
  align-items: center;
}

.nav-area .logo a svg {
  width: auto;
  height: 40px;
  fill: #ffffff;
}

.center-nav {
  margin-right: auto;
  margin-left: auto;
}

.center-nav a {
  position: relative;
  color: #ffffff;
  text-decoration: none;
  padding: 28px 10px;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: lighter;
}

.center-nav a:after,
.center-nav a:before {
  transition: all .5s;
}

.center-nav a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  content: '.';
  color: transparent;
  background: #ca49d9;
  background: -moz-linear-gradient(left, #ca49d9 0%, #1771A8 100%);
  background: -webkit-linear-gradient(left, #ca49d9 0%, #1771A8 100%);
  background: linear-gradient(to right, #ca49d9 0%, #1771A8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ca49d9', endColorstr='#1771A8 ', GradientType=1);
  height: 4px;
}

.center-nav a:hover:after {
  width: 100%;
}

.center-nav a:hover {
  text-decoration: none;
}

.center-nav a:not(:last-child) {
  margin-right: 5em;
}

.right-nav {
  display: flex;
  align-items: center;
}

.right-nav .btn-submit {
  font-family: "Roboto", sans-serif;
  background: #ffffff;
  padding: .5em 2em;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 1px;
  color: #787878;
  text-decoration: none;
}

.right-nav .btn-submit:hover {
  color: #616161;
}

.right-nav svg {
  width: 20px;
  height: auto;
  fill: #ffffff;
}

.right-nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
}

.right-nav a:hover {
  text-decoration: none;
  color: #ffffff;
}

.right-nav a:not(.btn-submit) {
  margin-right: 2em;
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
}

.sticky .nav-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
  flex-direction: row;
}

.sticky a {
  color: #656565;
}

.sticky a:hover {
  color: #656565;
}

.sticky .logo a svg {
  display: inline-block;
  fill: #888A8C;
}

.sticky .logo a svg #XMLID_1_ {
  fill: #9750DC;
}

.sticky .btn-submit {
  background: #2452a2;
  color: #ffffff;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
}

.sticky .btn-submit:hover {
  color: #ffffff;
}

.sticky .right-nav a svg {
  fill: #2452a2;
}

.sticky .m-nav svg {
  fill: #2452a2;
}

.m-nav {
  cursor: pointer;
  fill: #ffffff;
}

.m-nav svg {
  display: inline-block;
  width: 22px !important;
  height: auto;
  vertical-align: middle;
}

.mnav-overlay {
  height: 0;
  width: 100%;
  position: fixed;
  z-index: 2090;
  top: 0;
  left: 0;
  background: #0c1476;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(135deg, #0c1476, #680fac 60%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(135deg, #0c1476, #680fac 60%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  overflow-y: hidden;
  transition: 0.5s;
}

.mobile-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.mobile-nav a img {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  width: 120px;
  height: auto;
}

.mnav-overlay a {
  font-family: "Roboto", sans-serif;
  padding: 8px;
  text-decoration: none;
  font-size: 22px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
}

.mnav-overlay a:hover,
.mnav-overlay a:focus {
  color: #f1f1f1;
  text-decoration: none;
}

.mnav-overlay .closebtn {
  position: absolute;
  top: .8em;
  right: .8em;
  font-size: 20px;
}

.mnav-overlay .closebtn:hover {
  text-decoration: none;
}

@media screen and (max-height: 450px) {
  .mnav-overlay {
    overflow-y: auto;
  }
  .mnav-overlay a {
    font-size: 20px;
  }
  .mnav-overlay .closebtn {
    font-size: 20px;
    font-family: "Roboto", sans-serif;
    top: 15px;
    right: 15px;
    text-decoration: none;
  }
}

@media (min-width: 991px) {
  .m-nav {
    display: none;
  }
}

@media (max-width: 991px) {
  .nav-area {
    padding: 15px;
  }
  .nav-area .logo a {
    margin-right: 5px;
  }
  .nav-area .logo a svg {
    width: 100px;
    height: auto;
  }
  .nav-area .right-nav {
    margin-left: auto;
  }
  .nav-area .right-nav .btn-submit {
    padding: 8px;
    position: relative;
  }
  .nav-area .right-nav a {
    font-size: 16px;
  }
  .nav-area .right-nav a:not(:last-child) {
    margin-right: .6em;
  }
  .nav-area .right-nav a svg {
    width: 16px;
    height: auto;
  }
  .center-nav {
    display: none;
  }
}

@media (max-width: 576px) {
  .right-nav {
    margin-left: auto;
  }
  .right-nav .btn-submit {
    padding: 5px;
  }
  .right-nav img {
    width: 16px;
    height: auto;
  }
  .right-nav a {
    font-size: 11px;
  }
  .right-nav a:not(:last-child) {
    margin-right: .8em;
  }
}

@media (max-width: 1200px) {
  .center-nav {
    margin-right: auto;
    margin-left: auto;
  }
  .center-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
  }
  .center-nav a:hover {
    text-decoration: none;
    color: #ffffff;
  }
  .center-nav a:not(:last-child) {
    margin-right: 1em;
  }
}


/*This class is applicable for all page except home page*/

.nav-bg {
  position: fixed;
  top: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
}

.nav-bg .nav-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
  flex-direction: row;
}

.nav-bg a {
  color: #656565;
}

.nav-bg a:hover {
  color: #656565;
}

.nav-bg .logo a svg {
  display: inline-block;
  fill: #888A8C;
}

.nav-bg .logo a svg #XMLID_1_ {
  fill: #9750DC;
}

.nav-bg .btn-submit {
  background: #2452a2;
  color: #ffffff;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
}

.nav-bg .btn-submit:hover {
  color: #ffffff;
}

.nav-bg .right-nav a svg {
  fill: #2452a2;
}

.nav-bg .m-nav svg {
  fill: #2452a2;
}


/* =================================
        Style For Search
   ================================= */

#search-container {
  position: fixed;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  height: 75px;
  transition: all 0.6s ease;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  background: rebeccapurple;
  overflow: hidden;
}

#search-container #search-close {
  transition: background-color 0.6s ease;
  position: absolute;
  color: white;
  top: 50%;
  transform: translateY(-50%);
  right: 3%;
  font-size: 1.2em;
  cursor: pointer;
  font-style: initial;
}

.search-input {
  color: white;
  font-size: 16px;
  width: 98%;
  background-color: transparent;
  border: 0;
  outline: 0;
}

#main-search-form {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#main-search-form input {
  text-align: center;
  font-family: "Roboto", sans-serif;
  color: #ffffff;
}

#main-search-form input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #ffffff;
  text-align: center;
  font-style: italic;
}

#main-search-form input::-moz-placeholder {
  /* Firefox 19+ */
  color: #ffffff;
  text-align: center;
  font-style: italic;
}

#main-search-form input:-ms-input-placeholder {
  /* IE 10+ */
  color: #ffffff;
  text-align: center;
}

#main-search-form input:-moz-placeholder {
  /* Firefox 18- */
  color: #ffffff;
  text-align: center;
}

.move {
  transition: all 0.6s ease;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  display: flex;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- ===================================
             Main Navigation Area
     =================================== -->

<!--FIXME: Search Bar Integration-->
<div id="search-container">
  <form id="main-search-form" action="">
    <input type="text" class="search-input" placeholder="Search Here">
  </form>
  <i id="search-close">&times;</i>
</div>

<div class="nav-area px-md-4 nav-bg">
  <div class="logo mr-md-5">
    <a href="">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236.387 53.781">
                <defs>
                    <style></style>
                </defs>
                <g id="Group_426" data-name="Group 426" transform="translate(-41 -42)">
                    <g id="Group_23" data-name="Group 23" transform="translate(228.43 77.842)">
                        <path id="Path_15" data-name="Path 15" class="cls-1" d="M524.5,122.6h3.395v3.323H524.5Z"
                              transform="translate(-524.5 -114.631)"/>
                        <path id="Path_16" data-name="Path 16" class="cls-1"
                              d="M550.342,107.447a5.817,5.817,0,0,1-5.718,4.5,5.758,5.758,0,0,1-5.825-5.825,5.7,5.7,0,0,1,5.753-5.825,5.778,5.778,0,0,1,5.789,4.574h-3.323a2.431,2.431,0,0,0-2.359-1.5,2.6,2.6,0,0,0-2.573,2.787,2.555,2.555,0,0,0,2.573,2.716,2.609,2.609,0,0,0,2.394-1.465h3.288Z"
                              transform="translate(-533.69 -100.3)"/>
                        <path id="Path_17" data-name="Path 17" class="cls-1"
                              d="M575.515,101.944A5.825,5.825,0,0,1,579.7,100.3a5.571,5.571,0,0,1,4.574,2.073,6.006,6.006,0,0,1,1.322,3.752,6.133,6.133,0,0,1-1.715,4.217,5.765,5.765,0,0,1-4.217,1.644,5.669,5.669,0,0,1-5.861-5.861A6.047,6.047,0,0,1,575.515,101.944Zm4.181,6.968a2.645,2.645,0,0,0,2.609-2.787,2.7,2.7,0,0,0-2.609-2.752,2.774,2.774,0,0,0,0,5.539Z"
                              transform="translate(-556.183 -100.3)"/>
                        <path id="Path_18" data-name="Path 18" class="cls-1"
                              d="M611.636,100.757h3.073V101.9a3.281,3.281,0,0,1,3-1.5,3.421,3.421,0,0,1,3.18,1.965,3.857,3.857,0,0,1,3.431-1.965,3.912,3.912,0,0,1,2.823,1.072c.965.929,1.179,1.751,1.179,4.252v5.932h-3.288v-5.789a2.9,2.9,0,0,0-.357-1.858,1.547,1.547,0,0,0-1.251-.572,1.839,1.839,0,0,0-1.286.536,2.342,2.342,0,0,0-.464,1.751v5.932H618.39v-5.932c0-1.5-.572-2.287-1.68-2.287-1.179,0-1.823.786-1.823,2.287v5.932H611.6v-10.9Z"
                              transform="translate(-580.475 -100.364)"/>
                    </g>
                    <g id="Group_24" data-name="Group 24" transform="translate(-34 -21)">
                        <g id="Group_17" data-name="Group 17" transform="translate(207.219 63)">
                            <path id="Path_6" data-name="Path 6" class="cls-1" d="M370,0h5.968V26.408H370Z"
                                  transform="translate(-370)"/>
                            <path id="Path_7" data-name="Path 7" class="cls-1"
                                  d="M412.088,34.839c-.929,1.894-2.966,2.787-6.146,2.787-5.968,0-10.042-4.324-10.042-10.613,0-6.218,4.217-10.613,10.22-10.613,3,0,4.9.893,6,2.787V17.115h5.61V36.948h-5.61V34.839ZM406.8,32.088a4.844,4.844,0,0,0,4.967-5.039,4.967,4.967,0,1,0-9.934-.036A4.894,4.894,0,0,0,406.8,32.088Z"
                                  transform="translate(-386.645 -10.539)"/>
                            <path id="Path_8" data-name="Path 8" class="cls-1"
                                  d="M473.254,38.87a3.468,3.468,0,0,0,3.5,1.965,4.833,4.833,0,0,0,3.859-1.822,5.358,5.358,0,0,0,.929-3.538v-.643c-.822,1.608-3.395,2.823-5.968,2.823-5.325,0-9.577-4.646-9.577-10.435,0-6.146,4.288-10.72,10.113-10.72a6.992,6.992,0,0,1,5.825,2.537V17.179h5.61V34.618c0,4.074-.214,5.11-1.251,6.718-1.894,2.787-5.718,4.538-10.006,4.538-5.36,0-9.291-2.787-9.863-6.968h6.825Zm3.5-6.718a4.711,4.711,0,0,0,4.86-4.931,4.771,4.771,0,0,0-4.824-5.11,4.851,4.851,0,0,0-4.824,4.931A4.868,4.868,0,0,0,476.756,32.152Z"
                                  transform="translate(-431.694 -10.604)"/>
                            <path id="Path_9" data-name="Path 9" class="cls-1"
                                  d="M537.4,0h5.968V8.148A7.456,7.456,0,0,1,549.085,5.9a10.118,10.118,0,0,1,6.861,2.787,10.457,10.457,0,0,1,2.93,7.647c0,6.325-4.145,10.72-10.006,10.72-2.394,0-3.681-.607-5.825-2.787v2.144h-5.61V0Zm10.578,21.548a4.943,4.943,0,0,0,4.931-5.039,4.914,4.914,0,1,0-9.827-.036A4.858,4.858,0,0,0,547.978,21.548Z"
                                  transform="translate(-477.58)"/>
                            <path id="Path_10" data-name="Path 10" class="cls-1"
                                  d="M623.547,30.83c-1.858,4.288-5.432,6.861-9.684,6.861A10.433,10.433,0,0,1,603.5,27.149,10.421,10.421,0,0,1,613.792,16.5c5.968,0,10.435,4.646,10.435,10.828a7.693,7.693,0,0,1-.143,1.608h-14.83a4.166,4.166,0,0,0,4.324,3.716,4.543,4.543,0,0,0,3.645-1.572l.286-.286h6.039ZM618.294,25a4.374,4.374,0,0,0-4.5-3.431A4.307,4.307,0,0,0,609.325,25Z"
                                  transform="translate(-520.059 -10.604)"/>
                        </g>
                        <g id="Group_18" data-name="Group 18" transform="translate(98.156 63)">
                            <path id="Path_11" data-name="Path 11" class="cls-1"
                                  d="M64.8,1.5h6.754V21.976H79.38v5.968H64.8Z" transform="translate(-64.8 -0.964)"/>
                            <path id="Path_12" data-name="Path 12" class="cls-1"
                                  d="M122.237,0A13.742,13.742,0,1,1,108.3,13.544,13.73,13.73,0,0,1,122.237,0Zm.143,21.548c3.967,0,7.111-3.395,7.111-7.719,0-4.431-3.145-7.862-7.218-7.862a7.347,7.347,0,0,0-7.218,7.647C115.054,18.153,118.163,21.548,122.38,21.548Z"
                                  transform="translate(-92.755)"/>
                            <path id="Path_13" data-name="Path 13" class="cls-1"
                                  d="M212.4,9.463a6.334,6.334,0,0,0-5.789-3.431,7.107,7.107,0,0,0-5.217,2.216,6.92,6.92,0,0,0-2,5.217,9.111,9.111,0,0,0,2.073,6,7.972,7.972,0,0,0,5.61,2.216c3,0,5.217-1.608,5.825-4.217h-7.862V12h15.688l.036,1.394c.25,8.04-6.111,14.151-14.115,14.151a13.778,13.778,0,0,1-9.756-23.764A15.116,15.116,0,0,1,206.751.1c6.075,0,11.65,3.967,13.186,9.363H212.4Z"
                                  transform="translate(-146.931 -0.064)"/>
                            <path id="Path_14" data-name="Path 14" class="cls-1"
                                  d="M291.737,0A13.742,13.742,0,1,1,277.8,13.544,13.73,13.73,0,0,1,291.737,0Zm.143,21.548c3.967,0,7.111-3.395,7.111-7.719,0-4.431-3.145-7.862-7.218-7.862a7.347,7.347,0,0,0-7.219,7.647C284.554,18.153,287.663,21.548,291.88,21.548Z"
                                  transform="translate(-201.685)"/>
                        </g>
                        <path id="XMLID_1_" class="cls-1"
                              d="M17.01,41.96h0a5.532,5.532,0,0,1-5.432-5.217V.4H0V37.386H0c.572,9.291,7.969,16.652,17.01,16.652h6.146V41.924H17.01Z"
                              transform="translate(75 62.743)"/>
                    </g>
                </g>
            </svg>
    </a>
  </div>
  <div class="center-nav">
    <a href="">Logos</a>
    <a href="">How it works</a>
    <a href="">About</a>
    <a href="">Contact</a>
  </div>
  <div class="right-nav">
    <a id="ll-search-icon" href="javascript:void(0)">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129">
                <g>
                    <path d="M51.6,96.7c11,0,21-3.9,28.8-10.5l35,35c0.8,0.8,1.8,1.2,2.9,1.2s2.1-0.4,2.9-1.2c1.6-1.6,1.6-4.2,0-5.8l-35-35   c6.5-7.8,10.5-17.9,10.5-28.8c0-24.9-20.2-45.1-45.1-45.1C26.8,6.5,6.5,26.8,6.5,51.6C6.5,76.5,26.8,96.7,51.6,96.7z M51.6,14.7   c20.4,0,36.9,16.6,36.9,36.9C88.5,72,72,88.5,51.6,88.5c-20.4,0-36.9-16.6-36.9-36.9C14.7,31.3,31.3,14.7,51.6,14.7z"/>
                </g>
            </svg>
    </a>
    <a href="">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512">
                <g>
                    <g>
                        <path d="M508.764,74.466c-2.803-3.503-7.046-5.542-11.533-5.542H104.152L93.16,21.294c-1.547-6.701-7.514-11.448-14.391-11.448    h-64C6.613,9.846,0,16.459,0,24.616s6.613,14.769,14.769,14.769H67.02l74.612,323.321c1.546,6.701,7.514,11.448,14.391,11.448    h295.915c8.157,0,14.769-6.613,14.769-14.769c0-8.157-6.613-14.769-14.769-14.769H167.773l-11.36-49.231h296.511    c6.908,0,12.893-4.788,14.409-11.527L511.64,86.935C512.625,82.557,511.567,77.97,508.764,74.466z M441.108,265.846H149.596    L110.969,98.462h367.8L441.108,265.846z"/>
                    </g>
                </g>
                <g>
                    <g>
                        <path d="M216.615,393.846c-29.86,0-54.154,24.293-54.154,54.154s24.293,54.154,54.154,54.154c29.86,0,54.154-24.293,54.154-54.154    S246.476,393.846,216.615,393.846z M216.615,472.616C203.042,472.616,192,461.573,192,448s11.042-24.615,24.615-24.615    c13.573,0,24.615,11.042,24.615,24.615S230.188,472.616,216.615,472.616z"/>
                    </g>
                </g>
                <g>
                    <g>
                        <path d="M393.846,393.846c-29.86,0-54.154,24.293-54.154,54.154s24.293,54.154,54.154,54.154c29.86,0,54.154-24.293,54.154-54.154    S423.707,393.846,393.846,393.846z M393.846,472.616c-13.573,0-24.615-11.042-24.615-24.615s11.042-24.615,24.615-24.615    c13.573,0,24.615,11.042,24.615,24.615S407.419,472.616,393.846,472.616z"/>
                    </g>
                </g>
            </svg>


    </a>
    <!--<a href="">Login/ Sign Up</a>-->
    <a onclick="logFunction()" class="btn-submit" href="javascript:void(0)">Submit logo</a>
    <span class="m-nav" onclick="openNav()">
                 <svg enable-background="new 0 0 32 32" id="Сo_1" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Menu"><path d="M1,7h30c0.552,0,1-0.448,1-1c0-0.552-0.448-1-1-1H1C0.448,5,0,5.448,0,6C0,6.552,0.448,7,1,7z" /><path d="M31,15H1c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1C32,15.448,31.552,15,31,15z"/><path d="M31,25H1c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1C32,25.448,31.552,25,31,25z"/></g></svg>
            </span>
    </span>
  </div>
</div>

<!--Responsive Mobile Navigation-->

<div id="offcanvas-nav" class="mnav-overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="mobile-nav">
    <a href=""><img src="images/logo.svg" alt="logolagbey_logo"></a>
    <a href="#">Logos</a>
    <a href="#">How it works</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</div>
<!--End Responsive Mobile Navigation-->


<!--Login Form-->
<div id="lllogin-form" class="lllogin-area">
  <div class="lllogin-form">
    <form action="">
      <input type="text" name="" id="lllogin-uname" placeholder="User Name">
      <input type="password" name="" id="lllogin-password" placeholder="Password">
      <small>Forgot Password?</small>
      <input type="submit" value="Login">
      <a href=""><img src="images/social/facebook-app-logo.svg" alt="">Sign in with Facebook</a>
      <p>Sign up on Logo Lagbe</p>
    </form>
  </div>
</div>
<!--End Login Form-->


<!--End Main Navigation Area-->

-提前感谢

2 个答案:

答案 0 :(得分：2)

添加此样式

#search-container {
  height: 0;
  opacity: 0;
  transition: all 2s ease-in;
}

并同时切换搜索框的高度和不透明度以及z-index属性

    function open() {
  mainwrap.classList.add("move");
  searchContainer.style.zIndex = "3000";
  searchContainer.style.height = "75px";
  searchContainer.style.opacity = "1";
  searchInput.focus();
}

function close() {
  mainwrap.classList.remove("move");
  searchContainer.style.height = "0";
  searchContainer.style.zIndex = "0";
  searchContainer.style.opacity = "0";
}


var searchContainer = document.querySelector("#search-container");
var mainwrap = document.querySelector(".nav-area");
var openSearch = document.querySelector("#ll-search-icon");
var closeSearch = document.querySelector("#search-close");
var searchInput = document.querySelector(".search-input");

function open() {
  mainwrap.classList.add("move");
  searchContainer.style.zIndex = "3000";
  searchContainer.style.height = "75px";
  searchContainer.style.opacity = "1";
  searchInput.focus();
}

function close() {
  mainwrap.classList.remove("move");
  searchContainer.style.height = "0";
  searchContainer.style.zIndex = "0";
  searchContainer.style.opacity = "0";
}

function toggleSearch() {
  openSearch.addEventListener('click', open);
  closeSearch.addEventListener('click', close);
}


toggleSearch();
/* =================================
          Main Navigation Area
   ================================= */

.nav-area {
  font-family: "Roboto", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75px;
  position: relative;
  z-index: 1030;
}

.nav-area .logo a {
  display: flex;
  align-items: center;
}

.nav-area .logo a svg {
  width: auto;
  height: 40px;
  fill: #ffffff;
}

.center-nav {
  margin-right: auto;
  margin-left: auto;
}

.center-nav a {
  position: relative;
  color: #ffffff;
  text-decoration: none;
  padding: 28px 10px;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: lighter;
}

.center-nav a:after,
.center-nav a:before {
  transition: all .5s;
}

.center-nav a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  content: '.';
  color: transparent;
  background: #ca49d9;
  background: -moz-linear-gradient(left, #ca49d9 0%, #1771A8 100%);
  background: -webkit-linear-gradient(left, #ca49d9 0%, #1771A8 100%);
  background: linear-gradient(to right, #ca49d9 0%, #1771A8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ca49d9', endColorstr='#1771A8 ', GradientType=1);
  height: 4px;
}

.center-nav a:hover:after {
  width: 100%;
}

.center-nav a:hover {
  text-decoration: none;
}

.center-nav a:not(:last-child) {
  margin-right: 5em;
}

.right-nav {
  display: flex;
  align-items: center;
}

.right-nav .btn-submit {
  font-family: "Roboto", sans-serif;
  background: #ffffff;
  padding: .5em 2em;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 1px;
  color: #787878;
  text-decoration: none;
}

.right-nav .btn-submit:hover {
  color: #616161;
}

.right-nav svg {
  width: 20px;
  height: auto;
  fill: #ffffff;
}

.right-nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
}

.right-nav a:hover {
  text-decoration: none;
  color: #ffffff;
}

.right-nav a:not(.btn-submit) {
  margin-right: 2em;
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
}

.sticky .nav-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
  flex-direction: row;
}

.sticky a {
  color: #656565;
}

.sticky a:hover {
  color: #656565;
}

.sticky .logo a svg {
  display: inline-block;
  fill: #888A8C;
}

.sticky .logo a svg #XMLID_1_ {
  fill: #9750DC;
}

.sticky .btn-submit {
  background: #2452a2;
  color: #ffffff;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
}

.sticky .btn-submit:hover {
  color: #ffffff;
}

.sticky .right-nav a svg {
  fill: #2452a2;
}

.sticky .m-nav svg {
  fill: #2452a2;
}

.m-nav {
  cursor: pointer;
  fill: #ffffff;
}

.m-nav svg {
  display: inline-block;
  width: 22px !important;
  height: auto;
  vertical-align: middle;
}

.mnav-overlay {
  height: 0;
  width: 100%;
  position: fixed;
  z-index: 2090;
  top: 0;
  left: 0;
  background: #0c1476;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(135deg, #0c1476, #680fac 60%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(135deg, #0c1476, #680fac 60%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  overflow-y: hidden;
  transition: 0.5s;
}

.mobile-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.mobile-nav a img {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  width: 120px;
  height: auto;
}

.mnav-overlay a {
  font-family: "Roboto", sans-serif;
  padding: 8px;
  text-decoration: none;
  font-size: 22px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
}

.mnav-overlay a:hover,
.mnav-overlay a:focus {
  color: #f1f1f1;
  text-decoration: none;
}

.mnav-overlay .closebtn {
  position: absolute;
  top: .8em;
  right: .8em;
  font-size: 20px;
}

.mnav-overlay .closebtn:hover {
  text-decoration: none;
}

@media screen and (max-height: 450px) {
  .mnav-overlay {
    overflow-y: auto;
  }
  .mnav-overlay a {
    font-size: 20px;
  }
  .mnav-overlay .closebtn {
    font-size: 20px;
    font-family: "Roboto", sans-serif;
    top: 15px;
    right: 15px;
    text-decoration: none;
  }
}

@media (min-width: 991px) {
  .m-nav {
    display: none;
  }
}

@media (max-width: 991px) {
  .nav-area {
    padding: 15px;
  }
  .nav-area .logo a {
    margin-right: 5px;
  }
  .nav-area .logo a svg {
    width: 100px;
    height: auto;
  }
  .nav-area .right-nav {
    margin-left: auto;
  }
  .nav-area .right-nav .btn-submit {
    padding: 8px;
    position: relative;
  }
  .nav-area .right-nav a {
    font-size: 16px;
  }
  .nav-area .right-nav a:not(:last-child) {
    margin-right: .6em;
  }
  .nav-area .right-nav a svg {
    width: 16px;
    height: auto;
  }
  .center-nav {
    display: none;
  }
}

@media (max-width: 576px) {
  .right-nav {
    margin-left: auto;
  }
  .right-nav .btn-submit {
    padding: 5px;
  }
  .right-nav img {
    width: 16px;
    height: auto;
  }
  .right-nav a {
    font-size: 11px;
  }
  .right-nav a:not(:last-child) {
    margin-right: .8em;
  }
}

@media (max-width: 1200px) {
  .center-nav {
    margin-right: auto;
    margin-left: auto;
  }
  .center-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
  }
  .center-nav a:hover {
    text-decoration: none;
    color: #ffffff;
  }
  .center-nav a:not(:last-child) {
    margin-right: 1em;
  }
}


/*This class is applicable for all page except home page*/

.nav-bg {
  position: fixed;
  top: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
}

.nav-bg .nav-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
  flex-direction: row;
}

.nav-bg a {
  color: #656565;
}

.nav-bg a:hover {
  color: #656565;
}

.nav-bg .logo a svg {
  display: inline-block;
  fill: #888A8C;
}

.nav-bg .logo a svg #XMLID_1_ {
  fill: #9750DC;
}

.nav-bg .btn-submit {
  background: #2452a2;
  color: #ffffff;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
}

.nav-bg .btn-submit:hover {
  color: #ffffff;
}

.nav-bg .right-nav a svg {
  fill: #2452a2;
}

.nav-bg .m-nav svg {
  fill: #2452a2;
}


/* =================================
        Style For Search
   ================================= */

#search-container {
  position: fixed;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  height: 75px;
  transition: all 0.6s ease;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  background: rebeccapurple;
  overflow: hidden;
}

#search-container #search-close {
  transition: background-color 0.6s ease;
  position: absolute;
  color: white;
  top: 50%;
  transform: translateY(-50%);
  right: 3%;
  font-size: 1.2em;
  cursor: pointer;
  font-style: initial;
}

.search-input {
  color: white;
  font-size: 16px;
  width: 98%;
  background-color: transparent;
  border: 0;
  outline: 0;
}

#main-search-form {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#main-search-form input {
  text-align: center;
  font-family: "Roboto", sans-serif;
  color: #ffffff;
}

#main-search-form input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #ffffff;
  text-align: center;
  font-style: italic;
}

#main-search-form input::-moz-placeholder {
  /* Firefox 19+ */
  color: #ffffff;
  text-align: center;
  font-style: italic;
}

#main-search-form input:-ms-input-placeholder {
  /* IE 10+ */
  color: #ffffff;
  text-align: center;
}

#main-search-form input:-moz-placeholder {
  /* Firefox 18- */
  color: #ffffff;
  text-align: center;
}

.move {
  transition: all 0.6s ease;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  display: flex;
}

#search-container {
  height: 0;
  opacity: 0;
  transition: all 2s ease-in;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- ===================================
             Main Navigation Area
     =================================== -->

<!--FIXME: Search Bar Integration-->
<div id="search-container">
  <form id="main-search-form" action="">
    <input type="text" class="search-input" placeholder="Search Here">
  </form>
  <i id="search-close">&times;</i>
</div>

<div class="nav-area px-md-4 nav-bg">
  <div class="logo mr-md-5">
    <a href="">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236.387 53.781">
                <defs>
                    <style></style>
                </defs>
                <g id="Group_426" data-name="Group 426" transform="translate(-41 -42)">
                    <g id="Group_23" data-name="Group 23" transform="translate(228.43 77.842)">
                        <path id="Path_15" data-name="Path 15" class="cls-1" d="M524.5,122.6h3.395v3.323H524.5Z"
                              transform="translate(-524.5 -114.631)"/>
                        <path id="Path_16" data-name="Path 16" class="cls-1"
                              d="M550.342,107.447a5.817,5.817,0,0,1-5.718,4.5,5.758,5.758,0,0,1-5.825-5.825,5.7,5.7,0,0,1,5.753-5.825,5.778,5.778,0,0,1,5.789,4.574h-3.323a2.431,2.431,0,0,0-2.359-1.5,2.6,2.6,0,0,0-2.573,2.787,2.555,2.555,0,0,0,2.573,2.716,2.609,2.609,0,0,0,2.394-1.465h3.288Z"
                              transform="translate(-533.69 -100.3)"/>
                        <path id="Path_17" data-name="Path 17" class="cls-1"
                              d="M575.515,101.944A5.825,5.825,0,0,1,579.7,100.3a5.571,5.571,0,0,1,4.574,2.073,6.006,6.006,0,0,1,1.322,3.752,6.133,6.133,0,0,1-1.715,4.217,5.765,5.765,0,0,1-4.217,1.644,5.669,5.669,0,0,1-5.861-5.861A6.047,6.047,0,0,1,575.515,101.944Zm4.181,6.968a2.645,2.645,0,0,0,2.609-2.787,2.7,2.7,0,0,0-2.609-2.752,2.774,2.774,0,0,0,0,5.539Z"
                              transform="translate(-556.183 -100.3)"/>
                        <path id="Path_18" data-name="Path 18" class="cls-1"
                              d="M611.636,100.757h3.073V101.9a3.281,3.281,0,0,1,3-1.5,3.421,3.421,0,0,1,3.18,1.965,3.857,3.857,0,0,1,3.431-1.965,3.912,3.912,0,0,1,2.823,1.072c.965.929,1.179,1.751,1.179,4.252v5.932h-3.288v-5.789a2.9,2.9,0,0,0-.357-1.858,1.547,1.547,0,0,0-1.251-.572,1.839,1.839,0,0,0-1.286.536,2.342,2.342,0,0,0-.464,1.751v5.932H618.39v-5.932c0-1.5-.572-2.287-1.68-2.287-1.179,0-1.823.786-1.823,2.287v5.932H611.6v-10.9Z"
                              transform="translate(-580.475 -100.364)"/>
                    </g>
                    <g id="Group_24" data-name="Group 24" transform="translate(-34 -21)">
                        <g id="Group_17" data-name="Group 17" transform="translate(207.219 63)">
                            <path id="Path_6" data-name="Path 6" class="cls-1" d="M370,0h5.968V26.408H370Z"
                                  transform="translate(-370)"/>
                            <path id="Path_7" data-name="Path 7" class="cls-1"
                                  d="M412.088,34.839c-.929,1.894-2.966,2.787-6.146,2.787-5.968,0-10.042-4.324-10.042-10.613,0-6.218,4.217-10.613,10.22-10.613,3,0,4.9.893,6,2.787V17.115h5.61V36.948h-5.61V34.839ZM406.8,32.088a4.844,4.844,0,0,0,4.967-5.039,4.967,4.967,0,1,0-9.934-.036A4.894,4.894,0,0,0,406.8,32.088Z"
                                  transform="translate(-386.645 -10.539)"/>
                            <path id="Path_8" data-name="Path 8" class="cls-1"
                                  d="M473.254,38.87a3.468,3.468,0,0,0,3.5,1.965,4.833,4.833,0,0,0,3.859-1.822,5.358,5.358,0,0,0,.929-3.538v-.643c-.822,1.608-3.395,2.823-5.968,2.823-5.325,0-9.577-4.646-9.577-10.435,0-6.146,4.288-10.72,10.113-10.72a6.992,6.992,0,0,1,5.825,2.537V17.179h5.61V34.618c0,4.074-.214,5.11-1.251,6.718-1.894,2.787-5.718,4.538-10.006,4.538-5.36,0-9.291-2.787-9.863-6.968h6.825Zm3.5-6.718a4.711,4.711,0,0,0,4.86-4.931,4.771,4.771,0,0,0-4.824-5.11,4.851,4.851,0,0,0-4.824,4.931A4.868,4.868,0,0,0,476.756,32.152Z"
                                  transform="translate(-431.694 -10.604)"/>
                            <path id="Path_9" data-name="Path 9" class="cls-1"
                                  d="M537.4,0h5.968V8.148A7.456,7.456,0,0,1,549.085,5.9a10.118,10.118,0,0,1,6.861,2.787,10.457,10.457,0,0,1,2.93,7.647c0,6.325-4.145,10.72-10.006,10.72-2.394,0-3.681-.607-5.825-2.787v2.144h-5.61V0Zm10.578,21.548a4.943,4.943,0,0,0,4.931-5.039,4.914,4.914,0,1,0-9.827-.036A4.858,4.858,0,0,0,547.978,21.548Z"
                                  transform="translate(-477.58)"/>
                            <path id="Path_10" data-name="Path 10" class="cls-1"
                                  d="M623.547,30.83c-1.858,4.288-5.432,6.861-9.684,6.861A10.433,10.433,0,0,1,603.5,27.149,10.421,10.421,0,0,1,613.792,16.5c5.968,0,10.435,4.646,10.435,10.828a7.693,7.693,0,0,1-.143,1.608h-14.83a4.166,4.166,0,0,0,4.324,3.716,4.543,4.543,0,0,0,3.645-1.572l.286-.286h6.039ZM618.294,25a4.374,4.374,0,0,0-4.5-3.431A4.307,4.307,0,0,0,609.325,25Z"
                                  transform="translate(-520.059 -10.604)"/>
                        </g>
                        <g id="Group_18" data-name="Group 18" transform="translate(98.156 63)">
                            <path id="Path_11" data-name="Path 11" class="cls-1"
                                  d="M64.8,1.5h6.754V21.976H79.38v5.968H64.8Z" transform="translate(-64.8 -0.964)"/>
                            <path id="Path_12" data-name="Path 12" class="cls-1"
                                  d="M122.237,0A13.742,13.742,0,1,1,108.3,13.544,13.73,13.73,0,0,1,122.237,0Zm.143,21.548c3.967,0,7.111-3.395,7.111-7.719,0-4.431-3.145-7.862-7.218-7.862a7.347,7.347,0,0,0-7.218,7.647C115.054,18.153,118.163,21.548,122.38,21.548Z"
                                  transform="translate(-92.755)"/>
                            <path id="Path_13" data-name="Path 13" class="cls-1"
                                  d="M212.4,9.463a6.334,6.334,0,0,0-5.789-3.431,7.107,7.107,0,0,0-5.217,2.216,6.92,6.92,0,0,0-2,5.217,9.111,9.111,0,0,0,2.073,6,7.972,7.972,0,0,0,5.61,2.216c3,0,5.217-1.608,5.825-4.217h-7.862V12h15.688l.036,1.394c.25,8.04-6.111,14.151-14.115,14.151a13.778,13.778,0,0,1-9.756-23.764A15.116,15.116,0,0,1,206.751.1c6.075,0,11.65,3.967,13.186,9.363H212.4Z"
                                  transform="translate(-146.931 -0.064)"/>
                            <path id="Path_14" data-name="Path 14" class="cls-1"
                                  d="M291.737,0A13.742,13.742,0,1,1,277.8,13.544,13.73,13.73,0,0,1,291.737,0Zm.143,21.548c3.967,0,7.111-3.395,7.111-7.719,0-4.431-3.145-7.862-7.218-7.862a7.347,7.347,0,0,0-7.219,7.647C284.554,18.153,287.663,21.548,291.88,21.548Z"
                                  transform="translate(-201.685)"/>
                        </g>
                        <path id="XMLID_1_" class="cls-1"
                              d="M17.01,41.96h0a5.532,5.532,0,0,1-5.432-5.217V.4H0V37.386H0c.572,9.291,7.969,16.652,17.01,16.652h6.146V41.924H17.01Z"
                              transform="translate(75 62.743)"/>
                    </g>
                </g>
            </svg>
    </a>
  </div>
  <div class="center-nav">
    <a href="">Logos</a>
    <a href="">How it works</a>
    <a href="">About</a>
    <a href="">Contact</a>
  </div>
  <div class="right-nav">
    <a id="ll-search-icon" href="javascript:void(0)">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129">
                <g>
                    <path d="M51.6,96.7c11,0,21-3.9,28.8-10.5l35,35c0.8,0.8,1.8,1.2,2.9,1.2s2.1-0.4,2.9-1.2c1.6-1.6,1.6-4.2,0-5.8l-35-35   c6.5-7.8,10.5-17.9,10.5-28.8c0-24.9-20.2-45.1-45.1-45.1C26.8,6.5,6.5,26.8,6.5,51.6C6.5,76.5,26.8,96.7,51.6,96.7z M51.6,14.7   c20.4,0,36.9,16.6,36.9,36.9C88.5,72,72,88.5,51.6,88.5c-20.4,0-36.9-16.6-36.9-36.9C14.7,31.3,31.3,14.7,51.6,14.7z"/>
                </g>
            </svg>
    </a>
    <a href="">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512">
                <g>
                    <g>
                        <path d="M508.764,74.466c-2.803-3.503-7.046-5.542-11.533-5.542H104.152L93.16,21.294c-1.547-6.701-7.514-11.448-14.391-11.448    h-64C6.613,9.846,0,16.459,0,24.616s6.613,14.769,14.769,14.769H67.02l74.612,323.321c1.546,6.701,7.514,11.448,14.391,11.448    h295.915c8.157,0,14.769-6.613,14.769-14.769c0-8.157-6.613-14.769-14.769-14.769H167.773l-11.36-49.231h296.511    c6.908,0,12.893-4.788,14.409-11.527L511.64,86.935C512.625,82.557,511.567,77.97,508.764,74.466z M441.108,265.846H149.596    L110.969,98.462h367.8L441.108,265.846z"/>
                    </g>
                </g>
                <g>
                    <g>
                        <path d="M216.615,393.846c-29.86,0-54.154,24.293-54.154,54.154s24.293,54.154,54.154,54.154c29.86,0,54.154-24.293,54.154-54.154    S246.476,393.846,216.615,393.846z M216.615,472.616C203.042,472.616,192,461.573,192,448s11.042-24.615,24.615-24.615    c13.573,0,24.615,11.042,24.615,24.615S230.188,472.616,216.615,472.616z"/>
                    </g>
                </g>
                <g>
                    <g>
                        <path d="M393.846,393.846c-29.86,0-54.154,24.293-54.154,54.154s24.293,54.154,54.154,54.154c29.86,0,54.154-24.293,54.154-54.154    S423.707,393.846,393.846,393.846z M393.846,472.616c-13.573,0-24.615-11.042-24.615-24.615s11.042-24.615,24.615-24.615    c13.573,0,24.615,11.042,24.615,24.615S407.419,472.616,393.846,472.616z"/>
                    </g>
                </g>
            </svg>


    </a>
    <!--<a href="">Login/ Sign Up</a>-->
    <a onclick="logFunction()" class="btn-submit" href="javascript:void(0)">Submit logo</a>
    <span class="m-nav" onclick="openNav()">
                 <svg enable-background="new 0 0 32 32" id="Сo_1" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Menu"><path d="M1,7h30c0.552,0,1-0.448,1-1c0-0.552-0.448-1-1-1H1C0.448,5,0,5.448,0,6C0,6.552,0.448,7,1,7z" /><path d="M31,15H1c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1C32,15.448,31.552,15,31,15z"/><path d="M31,25H1c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1C32,25.448,31.552,25,31,25z"/></g></svg>
            </span>
    </span>
  </div>
</div>

<!--Responsive Mobile Navigation-->

<div id="offcanvas-nav" class="mnav-overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="mobile-nav">
    <a href=""><img src="images/logo.svg" alt="logolagbey_logo"></a>
    <a href="#">Logos</a>
    <a href="#">How it works</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</div>
<!--End Responsive Mobile Navigation-->


<!--Login Form-->
<div id="lllogin-form" class="lllogin-area">
  <div class="lllogin-form">
    <form action="">
      <input type="text" name="" id="lllogin-uname" placeholder="User Name">
      <input type="password" name="" id="lllogin-password" placeholder="Password">
      <small>Forgot Password?</small>
      <input type="submit" value="Login">
      <a href=""><img src="images/social/facebook-app-logo.svg" alt="">Sign in with Facebook</a>
      <p>Sign up on Logo Lagbe</p>
    </form>
  </div>
</div>
<!--End Login Form-->


<!--End Main Navigation Area-->

答案 1 :(得分：0)

 
var mainwrap = document.querySelector(".main");
var openSearch = document.querySelector("#ll-search-icon");
var closeSearch = document.querySelector("#search-close"); 

function open() {
  mainwrap.classList.add("move"); 
}

function close() {
  mainwrap.classList.remove("move");
}

function toggleSearch() {
  openSearch.addEventListener('click', open);
  closeSearch.addEventListener('click', close);
}


toggleSearch();
/* =================================
          Main Navigation Area
   ================================= */

.nav-area {
  font-family: "Roboto", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75px;
  position: relative;
  z-index: 1030;
  transition: all 0.6s ease;
  transform: translateY(0px);
  
}

.nav-area .logo a {
  display: flex;
  align-items: center;
}

.nav-area .logo a svg {
  width: auto;
  height: 40px;
  fill: #ffffff;
}

.center-nav {
  margin-right: auto;
  margin-left: auto;
}

.center-nav a {
  position: relative;
  color: #ffffff;
  text-decoration: none;
  padding: 28px 10px;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: lighter;
}

.center-nav a:after,
.center-nav a:before {
  transition: all .5s;
}

.center-nav a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  content: '.';
  color: transparent;
  background: #ca49d9;
  background: -moz-linear-gradient(left, #ca49d9 0%, #1771A8 100%);
  background: -webkit-linear-gradient(left, #ca49d9 0%, #1771A8 100%);
  background: linear-gradient(to right, #ca49d9 0%, #1771A8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ca49d9', endColorstr='#1771A8 ', GradientType=1);
  height: 4px;
}

.center-nav a:hover:after {
  width: 100%;
}

.center-nav a:hover {
  text-decoration: none;
}

.center-nav a:not(:last-child) {
  margin-right: 5em;
}

.right-nav {
  display: flex;
  align-items: center;
}

.right-nav .btn-submit {
  font-family: "Roboto", sans-serif;
  background: #ffffff;
  padding: .5em 2em;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 1px;
  color: #787878;
  text-decoration: none;
}

.right-nav .btn-submit:hover {
  color: #616161;
}

.right-nav svg {
  width: 20px;
  height: auto;
  fill: #ffffff;
}

.right-nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
}

.right-nav a:hover {
  text-decoration: none;
  color: #ffffff;
}

.right-nav a:not(.btn-submit) {
  margin-right: 2em;
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
}

.sticky .nav-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
  flex-direction: row;
}

.sticky a {
  color: #656565;
}

.sticky a:hover {
  color: #656565;
}

.sticky .logo a svg {
  display: inline-block;
  fill: #888A8C;
}

.sticky .logo a svg #XMLID_1_ {
  fill: #9750DC;
}

.sticky .btn-submit {
  background: #2452a2;
  color: #ffffff;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
}

.sticky .btn-submit:hover {
  color: #ffffff;
}

.sticky .right-nav a svg {
  fill: #2452a2;
}

.sticky .m-nav svg {
  fill: #2452a2;
}

.m-nav {
  cursor: pointer;
  fill: #ffffff;
}

.m-nav svg {
  display: inline-block;
  width: 22px !important;
  height: auto;
  vertical-align: middle;
}

.mnav-overlay {
  height: 0;
  width: 100%;
  position: fixed;
  z-index: 2090;
  top: 0;
  left: 0;
  background: #0c1476;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(135deg, #0c1476, #680fac 60%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(135deg, #0c1476, #680fac 60%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  overflow-y: hidden;
  transition: 0.5s;
}

.mobile-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.mobile-nav a img {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  width: 120px;
  height: auto;
}

.mnav-overlay a {
  font-family: "Roboto", sans-serif;
  padding: 8px;
  text-decoration: none;
  font-size: 22px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
}

.mnav-overlay a:hover,
.mnav-overlay a:focus {
  color: #f1f1f1;
  text-decoration: none;
}

.mnav-overlay .closebtn {
  position: absolute;
  top: .8em;
  right: .8em;
  font-size: 20px;
}

.mnav-overlay .closebtn:hover {
  text-decoration: none;
}

@media screen and (max-height: 450px) {
  .mnav-overlay {
    overflow-y: auto;
  }
  .mnav-overlay a {
    font-size: 20px;
  }
  .mnav-overlay .closebtn {
    font-size: 20px;
    font-family: "Roboto", sans-serif;
    top: 15px;
    right: 15px;
    text-decoration: none;
  }
}

@media (min-width: 991px) {
  .m-nav {
    display: none;
  }
}

@media (max-width: 991px) {
  .nav-area {
    padding: 15px;
  }
  .nav-area .logo a {
    margin-right: 5px;
  }
  .nav-area .logo a svg {
    width: 100px;
    height: auto;
  }
  .nav-area .right-nav {
    margin-left: auto;
  }
  .nav-area .right-nav .btn-submit {
    padding: 8px;
    position: relative;
  }
  .nav-area .right-nav a {
    font-size: 16px;
  }
  .nav-area .right-nav a:not(:last-child) {
    margin-right: .6em;
  }
  .nav-area .right-nav a svg {
    width: 16px;
    height: auto;
  }
  .center-nav {
    display: none;
  }
}

@media (max-width: 576px) {
  .right-nav {
    margin-left: auto;
  }
  .right-nav .btn-submit {
    padding: 5px;
  }
  .right-nav img {
    width: 16px;
    height: auto;
  }
  .right-nav a {
    font-size: 11px;
  }
  .right-nav a:not(:last-child) {
    margin-right: .8em;
  }
}

@media (max-width: 1200px) {
  .center-nav {
    margin-right: auto;
    margin-left: auto;
  }
  .center-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
  }
  .center-nav a:hover {
    text-decoration: none;
    color: #ffffff;
  }
  .center-nav a:not(:last-child) {
    margin-right: 1em;
  }
}


/*This class is applicable for all page except home page*/

.nav-bg {
  position: fixed;
  top: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
}

.nav-bg .nav-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
  flex-direction: row;
  transition: all 0.6s ease;
  transform: translateY(0px);
}

.nav-bg a {
  color: #656565;
}

.nav-bg a:hover {
  color: #656565;
}

.nav-bg .logo a svg {
  display: inline-block;
  fill: #888A8C;
}

.nav-bg .logo a svg #XMLID_1_ {
  fill: #9750DC;
}

.nav-bg .btn-submit {
  background: #2452a2;
  color: #ffffff;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
}

.nav-bg .btn-submit:hover {
  color: #ffffff;
}

.nav-bg .right-nav a svg {
  fill: #2452a2;
}

.nav-bg .m-nav svg {
  fill: #2452a2;
}


/* =================================
        Style For Search
   ================================= */

#search-container {
  position: fixed;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  height: 75px;
  transition: all 0.6s ease;
  background: rebeccapurple;
  transform: translateY(-75px);
}

.main.move #search-container {transform: translateY(0px);}

.main.move .nav-area {transform: translateY(-75px);}

.main.move #lllogin-form {transform: translateY(-75px);}

.search-input {
  color: white;
  font-size: 16px;
  width: 98%;
  background-color: transparent;
  border: 0;
  outline: 0;
}

#main-search-form {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#main-search-form input {
  text-align: center;
  font-family: "Roboto", sans-serif;
  color: #ffffff;
}

#main-search-form input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #ffffff;
  text-align: center;
  font-style: italic;
}

#main-search-form input::-moz-placeholder {
  /* Firefox 19+ */
  color: #ffffff;
  text-align: center;
  font-style: italic;
}

#main-search-form input:-ms-input-placeholder {
  /* IE 10+ */
  color: #ffffff;
  text-align: center;
}

#main-search-form input:-moz-placeholder {
  /* Firefox 18- */
  color: #ffffff;
  text-align: center;
}
 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- ===================================
             Main Navigation Area
     =================================== -->
<div class="main">
<!--FIXME: Search Bar Integration-->
<div id="search-container">
  <form id="main-search-form" action="">
    <input type="text" class="search-input" placeholder="Search Here">
  </form>
  <i id="search-close">&times;</i>
</div>

<div class="nav-area px-md-4 nav-bg">
  <div class="logo mr-md-5">
    <a href="">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236.387 53.781">
                <defs>
                    <style></style>
                </defs>
                <g id="Group_426" data-name="Group 426" transform="translate(-41 -42)">
                    <g id="Group_23" data-name="Group 23" transform="translate(228.43 77.842)">
                        <path id="Path_15" data-name="Path 15" class="cls-1" d="M524.5,122.6h3.395v3.323H524.5Z"
                              transform="translate(-524.5 -114.631)"/>
                        <path id="Path_16" data-name="Path 16" class="cls-1"
                              d="M550.342,107.447a5.817,5.817,0,0,1-5.718,4.5,5.758,5.758,0,0,1-5.825-5.825,5.7,5.7,0,0,1,5.753-5.825,5.778,5.778,0,0,1,5.789,4.574h-3.323a2.431,2.431,0,0,0-2.359-1.5,2.6,2.6,0,0,0-2.573,2.787,2.555,2.555,0,0,0,2.573,2.716,2.609,2.609,0,0,0,2.394-1.465h3.288Z"
                              transform="translate(-533.69 -100.3)"/>
                        <path id="Path_17" data-name="Path 17" class="cls-1"
                              d="M575.515,101.944A5.825,5.825,0,0,1,579.7,100.3a5.571,5.571,0,0,1,4.574,2.073,6.006,6.006,0,0,1,1.322,3.752,6.133,6.133,0,0,1-1.715,4.217,5.765,5.765,0,0,1-4.217,1.644,5.669,5.669,0,0,1-5.861-5.861A6.047,6.047,0,0,1,575.515,101.944Zm4.181,6.968a2.645,2.645,0,0,0,2.609-2.787,2.7,2.7,0,0,0-2.609-2.752,2.774,2.774,0,0,0,0,5.539Z"
                              transform="translate(-556.183 -100.3)"/>
                        <path id="Path_18" data-name="Path 18" class="cls-1"
                              d="M611.636,100.757h3.073V101.9a3.281,3.281,0,0,1,3-1.5,3.421,3.421,0,0,1,3.18,1.965,3.857,3.857,0,0,1,3.431-1.965,3.912,3.912,0,0,1,2.823,1.072c.965.929,1.179,1.751,1.179,4.252v5.932h-3.288v-5.789a2.9,2.9,0,0,0-.357-1.858,1.547,1.547,0,0,0-1.251-.572,1.839,1.839,0,0,0-1.286.536,2.342,2.342,0,0,0-.464,1.751v5.932H618.39v-5.932c0-1.5-.572-2.287-1.68-2.287-1.179,0-1.823.786-1.823,2.287v5.932H611.6v-10.9Z"
                              transform="translate(-580.475 -100.364)"/>
                    </g>
                    <g id="Group_24" data-name="Group 24" transform="translate(-34 -21)">
                        <g id="Group_17" data-name="Group 17" transform="translate(207.219 63)">
                            <path id="Path_6" data-name="Path 6" class="cls-1" d="M370,0h5.968V26.408H370Z"
                                  transform="translate(-370)"/>
                            <path id="Path_7" data-name="Path 7" class="cls-1"
                                  d="M412.088,34.839c-.929,1.894-2.966,2.787-6.146,2.787-5.968,0-10.042-4.324-10.042-10.613,0-6.218,4.217-10.613,10.22-10.613,3,0,4.9.893,6,2.787V17.115h5.61V36.948h-5.61V34.839ZM406.8,32.088a4.844,4.844,0,0,0,4.967-5.039,4.967,4.967,0,1,0-9.934-.036A4.894,4.894,0,0,0,406.8,32.088Z"
                                  transform="translate(-386.645 -10.539)"/>
                            <path id="Path_8" data-name="Path 8" class="cls-1"
                                  d="M473.254,38.87a3.468,3.468,0,0,0,3.5,1.965,4.833,4.833,0,0,0,3.859-1.822,5.358,5.358,0,0,0,.929-3.538v-.643c-.822,1.608-3.395,2.823-5.968,2.823-5.325,0-9.577-4.646-9.577-10.435,0-6.146,4.288-10.72,10.113-10.72a6.992,6.992,0,0,1,5.825,2.537V17.179h5.61V34.618c0,4.074-.214,5.11-1.251,6.718-1.894,2.787-5.718,4.538-10.006,4.538-5.36,0-9.291-2.787-9.863-6.968h6.825Zm3.5-6.718a4.711,4.711,0,0,0,4.86-4.931,4.771,4.771,0,0,0-4.824-5.11,4.851,4.851,0,0,0-4.824,4.931A4.868,4.868,0,0,0,476.756,32.152Z"
                                  transform="translate(-431.694 -10.604)"/>
                            <path id="Path_9" data-name="Path 9" class="cls-1"
                                  d="M537.4,0h5.968V8.148A7.456,7.456,0,0,1,549.085,5.9a10.118,10.118,0,0,1,6.861,2.787,10.457,10.457,0,0,1,2.93,7.647c0,6.325-4.145,10.72-10.006,10.72-2.394,0-3.681-.607-5.825-2.787v2.144h-5.61V0Zm10.578,21.548a4.943,4.943,0,0,0,4.931-5.039,4.914,4.914,0,1,0-9.827-.036A4.858,4.858,0,0,0,547.978,21.548Z"
                                  transform="translate(-477.58)"/>
                            <path id="Path_10" data-name="Path 10" class="cls-1"
                                  d="M623.547,30.83c-1.858,4.288-5.432,6.861-9.684,6.861A10.433,10.433,0,0,1,603.5,27.149,10.421,10.421,0,0,1,613.792,16.5c5.968,0,10.435,4.646,10.435,10.828a7.693,7.693,0,0,1-.143,1.608h-14.83a4.166,4.166,0,0,0,4.324,3.716,4.543,4.543,0,0,0,3.645-1.572l.286-.286h6.039ZM618.294,25a4.374,4.374,0,0,0-4.5-3.431A4.307,4.307,0,0,0,609.325,25Z"
                                  transform="translate(-520.059 -10.604)"/>
                        </g>
                        <g id="Group_18" data-name="Group 18" transform="translate(98.156 63)">
                            <path id="Path_11" data-name="Path 11" class="cls-1"
                                  d="M64.8,1.5h6.754V21.976H79.38v5.968H64.8Z" transform="translate(-64.8 -0.964)"/>
                            <path id="Path_12" data-name="Path 12" class="cls-1"
                                  d="M122.237,0A13.742,13.742,0,1,1,108.3,13.544,13.73,13.73,0,0,1,122.237,0Zm.143,21.548c3.967,0,7.111-3.395,7.111-7.719,0-4.431-3.145-7.862-7.218-7.862a7.347,7.347,0,0,0-7.218,7.647C115.054,18.153,118.163,21.548,122.38,21.548Z"
                                  transform="translate(-92.755)"/>
                            <path id="Path_13" data-name="Path 13" class="cls-1"
                                  d="M212.4,9.463a6.334,6.334,0,0,0-5.789-3.431,7.107,7.107,0,0,0-5.217,2.216,6.92,6.92,0,0,0-2,5.217,9.111,9.111,0,0,0,2.073,6,7.972,7.972,0,0,0,5.61,2.216c3,0,5.217-1.608,5.825-4.217h-7.862V12h15.688l.036,1.394c.25,8.04-6.111,14.151-14.115,14.151a13.778,13.778,0,0,1-9.756-23.764A15.116,15.116,0,0,1,206.751.1c6.075,0,11.65,3.967,13.186,9.363H212.4Z"
                                  transform="translate(-146.931 -0.064)"/>
                            <path id="Path_14" data-name="Path 14" class="cls-1"
                                  d="M291.737,0A13.742,13.742,0,1,1,277.8,13.544,13.73,13.73,0,0,1,291.737,0Zm.143,21.548c3.967,0,7.111-3.395,7.111-7.719,0-4.431-3.145-7.862-7.218-7.862a7.347,7.347,0,0,0-7.219,7.647C284.554,18.153,287.663,21.548,291.88,21.548Z"
                                  transform="translate(-201.685)"/>
                        </g>
                        <path id="XMLID_1_" class="cls-1"
                              d="M17.01,41.96h0a5.532,5.532,0,0,1-5.432-5.217V.4H0V37.386H0c.572,9.291,7.969,16.652,17.01,16.652h6.146V41.924H17.01Z"
                              transform="translate(75 62.743)"/>
                    </g>
                </g>
            </svg>
    </a>
  </div>
  <div class="center-nav">
    <a href="">Logos</a>
    <a href="">How it works</a>
    <a href="">About</a>
    <a href="">Contact</a>
  </div>
  <div class="right-nav">
    <a id="ll-search-icon" href="javascript:void(0)">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129">
                <g>
                    <path d="M51.6,96.7c11,0,21-3.9,28.8-10.5l35,35c0.8,0.8,1.8,1.2,2.9,1.2s2.1-0.4,2.9-1.2c1.6-1.6,1.6-4.2,0-5.8l-35-35   c6.5-7.8,10.5-17.9,10.5-28.8c0-24.9-20.2-45.1-45.1-45.1C26.8,6.5,6.5,26.8,6.5,51.6C6.5,76.5,26.8,96.7,51.6,96.7z M51.6,14.7   c20.4,0,36.9,16.6,36.9,36.9C88.5,72,72,88.5,51.6,88.5c-20.4,0-36.9-16.6-36.9-36.9C14.7,31.3,31.3,14.7,51.6,14.7z"/>
                </g>
            </svg>
    </a>
    <a href="">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512">
                <g>
                    <g>
                        <path d="M508.764,74.466c-2.803-3.503-7.046-5.542-11.533-5.542H104.152L93.16,21.294c-1.547-6.701-7.514-11.448-14.391-11.448    h-64C6.613,9.846,0,16.459,0,24.616s6.613,14.769,14.769,14.769H67.02l74.612,323.321c1.546,6.701,7.514,11.448,14.391,11.448    h295.915c8.157,0,14.769-6.613,14.769-14.769c0-8.157-6.613-14.769-14.769-14.769H167.773l-11.36-49.231h296.511    c6.908,0,12.893-4.788,14.409-11.527L511.64,86.935C512.625,82.557,511.567,77.97,508.764,74.466z M441.108,265.846H149.596    L110.969,98.462h367.8L441.108,265.846z"/>
                    </g>
                </g>
                <g>
                    <g>
                        <path d="M216.615,393.846c-29.86,0-54.154,24.293-54.154,54.154s24.293,54.154,54.154,54.154c29.86,0,54.154-24.293,54.154-54.154    S246.476,393.846,216.615,393.846z M216.615,472.616C203.042,472.616,192,461.573,192,448s11.042-24.615,24.615-24.615    c13.573,0,24.615,11.042,24.615,24.615S230.188,472.616,216.615,472.616z"/>
                    </g>
                </g>
                <g>
                    <g>
                        <path d="M393.846,393.846c-29.86,0-54.154,24.293-54.154,54.154s24.293,54.154,54.154,54.154c29.86,0,54.154-24.293,54.154-54.154    S423.707,393.846,393.846,393.846z M393.846,472.616c-13.573,0-24.615-11.042-24.615-24.615s11.042-24.615,24.615-24.615    c13.573,0,24.615,11.042,24.615,24.615S407.419,472.616,393.846,472.616z"/>
                    </g>
                </g>
            </svg>


    </a>
    <!--<a href="">Login/ Sign Up</a>-->
    <a onclick="logFunction()" class="btn-submit" href="javascript:void(0)">Submit logo</a>
    <span class="m-nav" onclick="openNav()">
                 <svg enable-background="new 0 0 32 32" id="Сo_1" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Menu"><path d="M1,7h30c0.552,0,1-0.448,1-1c0-0.552-0.448-1-1-1H1C0.448,5,0,5.448,0,6C0,6.552,0.448,7,1,7z" /><path d="M31,15H1c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1C32,15.448,31.552,15,31,15z"/><path d="M31,25H1c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1C32,25.448,31.552,25,31,25z"/></g></svg>
            </span>
    </span>
  </div>
</div>

<!--Responsive Mobile Navigation-->

<div id="offcanvas-nav" class="mnav-overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="mobile-nav">
    <a href=""><img src="images/logo.svg" alt="logolagbey_logo"></a>
    <a href="#">Logos</a>
    <a href="#">How it works</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</div>
<!--End Responsive Mobile Navigation-->


<!--Login Form-->
<div id="lllogin-form" class="lllogin-area">
  <div class="lllogin-form">
    <form action="">
      <input type="text" name="" id="lllogin-uname" placeholder="User Name">
      <input type="password" name="" id="lllogin-password" placeholder="Password">
      <small>Forgot Password?</small>
      <input type="submit" value="Login">
      <a href=""><img src="images/social/facebook-app-logo.svg" alt="">Sign in with Facebook</a>
      <p>Sign up on Logo Lagbe</p>
    </form>
  </div>
</div>
<!--End Login Form-->

</div>


<!--End Main Navigation Area-->

嘿，您可以检查这种方法

相关问题
最新问题