将动画搜索栏集成到导航栏中时出现问题

时间：2018-07-21 19:32:28

标签： html css

我正在创建一个网站，并决定将动画搜索栏集成到导航栏中将是一个有趣的功能。不幸的是，单击图标后，我在导航栏上居中存在问题。另外，放大镜图标和关闭图标之间的距离太大，我无法弄清楚如何缩小它。

这是HTML：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="author" content="Bogdan">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>navbar</title>
<link href="navstack.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>

<div class="navbar" id="myTopnav">
<nav>
  <ul>
    <li><a href=page>page1</a></li>
    <li><a href=page>page2</a></li>
    <li><a href=page>page3</a></li>


    <li class="icon">
      <a href="javascript:void(0);" onclick="myFunction()">
        <i class="fa fa-bars"></i>
      </a>
   </li>

    <!--<li class="search-icon">
      <a>
        <i class="fa fa-search"></i>
      </a>
    </li>-->


  <li>
    <form onsubmit="submitFn(this, event);">
        <div class="search-wrapper">
            <div class="input-holder">
                <input type="text" class="search-input" placeholder="Type to search" />
                <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
            </div>
            <span class="close" onclick="searchToggle(this, event);">        </span>
        </div>
    </form>
  </li>


  </ul>
</nav>
</div>


<script type="text/javascript">


function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
      x.className += " responsive";
  } else {
      x.className = "navbar";
  }
}


function searchToggle(obj, evt){
  var container = $(obj).closest('.search-wrapper');

  if(!container.hasClass('active')){
        container.addClass('active');
        evt.preventDefault();
  }
  else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
        container.removeClass('active');
        // clear input
        container.find('.search-input').val('');
  }
}

function submitFn(obj, evt){
  value = $(obj).find('.search-input').val().trim();

  _html = ":)";
  if(!value.length){
      _html = ":]";
  }
  else{
      _html += "<b>" + value + "</b>";
  }

  $(obj).find('.result-container').html('<span>' + _html + '</span>');
  $(obj).find('.result-container').fadeIn(100);

  evt.preventDefault();
}
</script>

</body>
</html>

这是CSS：

*{
margin:0;
padding:0;
box-sizing: border-box;
}

body{
padding-top: 49px;
}

.navbar{
visibility: visible;

overflow: hidden;
background-color: #323232;

position: fixed;
top: 0;
width: 100%;

}

.navbar ul {
list-style-type: none;
text-align: center;
}

.navbar li{
display: inline-block;
padding: 14px 18px;
}


.navbar a{
color: white;
text-align: center;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}

.navbar a:hover{
color: grey;
}

.navbar a.active{
color:grey;
}

.navbar .icon {
display: none;
}



.navbar .search-wrapper {
position: absolute;
-webkit-transform: translate(-35%, -15%);
-moz-transform: translate(-35%, -15%);
transform: translate(-35%, -15%);
height: 40px;

}
.navbar .search-wrapper.active {width:50%}

.navbar .search-wrapper .input-holder {
overflow: hidden;
height: 40px;
background: rgba(255,255,255,0);
border-radius:0;
position: relative;
width:70px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.navbar .search-wrapper.active .input-holder {
border-radius: 0;
width:50%;
background: #323232;
-webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}

.navbar .search-wrapper .input-holder .search-input {
width:100%;
height: 40px;
padding:0 70px 0 20px;
opacity: 0;
position: absolute;
top:-5px;
left:0px;
bottom:0px;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border:none;
outline:none;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
/*font-weight: 400;*/
/*line-height: 20px;*/
color:white;
-webkit-transform: translate(0, 60px);
-moz-transform: translate(0, 60px);
transform: translate(0, 60px);
-webkit-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);

-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.navbar .search-wrapper.active .input-holder .search-input {
opacity: 1;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
transform: translate(0, 10px);
}

.navbar .search-wrapper .input-holder .search-icon {
width:40px;
height:40px;
border:none;
border-radius:0;
background: #323232;
padding:0px;
outline:none;
position: relative;
z-index: 2;
float:right;
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.navbar .search-wrapper.active .input-holder .search-icon {
width: 40px;
height: 40px;
margin: 0px;
border-radius: 0;
}
.navbar .search-wrapper .input-holder .search-icon span {
width:22px;
height:22px;
display: inline-block;
vertical-align: middle;
position:relative;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
-moz-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);

}
.navbar .search-wrapper.active .input-holder .search-icon span {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.navbar .search-wrapper .input-holder .search-icon span::before, .search- wrapper .input-holder .search-icon span::after {
position: absolute;
content:'';
}
.navbar .search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
left: 9px;
top: 18px;
border-radius: 2px;
background: #FFFFFF;
}
.navbar .search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
left: 0px;
top: 0px;
border-radius: 16px;
border: 4px solid #FFFFFF;
}

.navbar .search-wrapper .close {
position: absolute;
z-index: 1;
top:15px;
right:20px;
width:40px;
height:40px;
cursor: pointer;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
-moz-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navbar .search-wrapper.active .close {
right:-50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-moz-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.navbar .search-wrapper .close::before, .search-wrapper .close::after {
position:absolute;
content:'';
background: #FFF;
border-radius: 2px;
}
.navbar .search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.navbar .search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}



@media screen and (max-width: 560px) {
.search-wrapper.active .input-holder {width:200px;}
}



@media screen and (max-width: 1000px) {
.navbar li:not(:first-child) {display: none;}
.navbar li.icon {
position: fixed;
top: 0;
left: 0;
display: block;
}

}

@media screen and (max-width: 1000px) {
body {
padding-top: 49px;
}

.navbar li:first-child{
display: flex;
justify-content: center;

}

.navbar.responsive {
height: 100%;
}

.navbar.responsive li:not(:first-child){
float: none;
display: block;
text-align: left;
}

}


*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

body{
  padding-top: 49px;
}

.navbar{
  visibility: visible;

  overflow: hidden;
  background-color: #323232;

  position: fixed;
  top: 0;
  width: 100%;

}

.navbar ul {
    list-style-type: none;
    text-align: center;
}

.navbar li{
  display: inline-block;
  padding: 14px 18px;
}


.navbar a{
  color: white;
  text-align: center;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
}

.navbar a:hover{
  color: grey;
}

.navbar a.active{
  color:grey;
}

.navbar .icon {
    display: none;
}



.navbar .search-wrapper {
    position: absolute;
    -webkit-transform: translate(-35%, -15%);
    -moz-transform: translate(-35%, -15%);
    transform: translate(-35%, -15%);
    height: 40px;

}
.navbar .search-wrapper.active {width:50%}

.navbar .search-wrapper .input-holder {
    overflow: hidden;
    height: 40px;
    background: rgba(255,255,255,0);
    border-radius:0;
    position: relative;
    width:70px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.navbar .search-wrapper.active .input-holder {
    border-radius: 0;
    width:50%;
    background: #323232;
    -webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}

.navbar .search-wrapper .input-holder .search-input {
    width:100%;
    height: 40px;
    padding:0 70px 0 20px;
    opacity: 0;
    position: absolute;
    top:-5px;
    left:0px;
    bottom:0px;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border:none;
    outline:none;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    /*font-weight: 400;*/
    /*line-height: 20px;*/
    color:white;
    -webkit-transform: translate(0, 60px);
    -moz-transform: translate(0, 60px);
    transform: translate(0, 60px);
    -webkit-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);

    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.navbar .search-wrapper.active .input-holder .search-input {
    opacity: 1;
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    transform: translate(0, 10px);
}

.navbar .search-wrapper .input-holder .search-icon {
    width:40px;
    height:40px;
    border:none;
    border-radius:0;
    background: #323232;
    padding:0px;
    outline:none;
    position: relative;
    z-index: 2;
    float:right;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.navbar .search-wrapper.active .input-holder .search-icon {
    width: 40px;
    height: 40px;
    margin: 0px;
    border-radius: 0;
}
.navbar .search-wrapper .input-holder .search-icon span {
    width:22px;
    height:22px;
    display: inline-block;
    vertical-align: middle;
    position:relative;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
    -moz-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
    transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);

}
.navbar .search-wrapper.active .input-holder .search-icon span {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.navbar .search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
    position: absolute;
    content:'';
}
.navbar .search-wrapper .input-holder .search-icon span::before {
    width: 4px;
    height: 11px;
    left: 9px;
    top: 18px;
    border-radius: 2px;
    background: #FFFFFF;
}
.navbar .search-wrapper .input-holder .search-icon span::after {
    width: 14px;
    height: 14px;
    left: 0px;
    top: 0px;
    border-radius: 16px;
    border: 4px solid #FFFFFF;
}

.navbar .search-wrapper .close {
    position: absolute;
    z-index: 1;
    top:15px;
    right:20px;
    width:40px;
    height:40px;
    cursor: pointer;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    -moz-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.navbar .search-wrapper.active .close {
    right:-50px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
.navbar .search-wrapper .close::before, .search-wrapper .close::after {
    position:absolute;
    content:'';
    background: #FFF;
    border-radius: 2px;
}
.navbar .search-wrapper .close::before {
    width: 5px;
    height: 25px;
    left: 10px;
    top: 0px;
}
.navbar .search-wrapper .close::after {
    width: 25px;
    height: 5px;
    left: 0px;
    top: 10px;
}



@media screen and (max-width: 560px) {
    .search-wrapper.active .input-holder {width:200px;}
}



@media screen and (max-width: 1000px) {
  .navbar li:not(:first-child) {display: none;}
  .navbar li.icon {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
}

}

@media screen and (max-width: 1000px) {
  body {
  padding-top: 49px;
}

.navbar li:first-child{
  display: flex;
  justify-content: center;

}

  .navbar.responsive {
    height: 100%;
  }

  .navbar.responsive li:not(:first-child){
    float: none;
    display: block;
    text-align: left;
  }

}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="Bogdan">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>navbar</title>
  <link href="navstack.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>

  <div class="navbar" id="myTopnav">
    <nav>
      <ul>
        <li><a href=page>page1</a></li>
        <li><a href=page>page2</a></li>
        <li><a href=page>page3</a></li>


        <li class="icon">
          <a href="javascript:void(0);" onclick="myFunction()">
            <i class="fa fa-bars"></i>
          </a>
       </li>

        <!--<li class="search-icon">
          <a>
            <i class="fa fa-search"></i>
          </a>
        </li>-->


      <li>
        <form onsubmit="submitFn(this, event);">
            <div class="search-wrapper">
                <div class="input-holder">
                    <input type="text" class="search-input" placeholder="Type to search" />
                    <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
                </div>
                <span class="close" onclick="searchToggle(this, event);"></span>
            </div>
        </form>
      </li>


      </ul>
    </nav>
  </div>


  <script type="text/javascript">


  function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "navbar") {
          x.className += " responsive";
      } else {
          x.className = "navbar";
      }
  }


  function searchToggle(obj, evt){
      var container = $(obj).closest('.search-wrapper');

      if(!container.hasClass('active')){
            container.addClass('active');
            evt.preventDefault();
      }
      else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
            container.removeClass('active');
            // clear input
            container.find('.search-input').val('');
      }
  }

  function submitFn(obj, evt){
      value = $(obj).find('.search-input').val().trim();

      _html = ":)";
      if(!value.length){
          _html = ":]";
      }
      else{
          _html += "<b>" + value + "</b>";
      }

      $(obj).find('.result-container').html('<span>' + _html + '</span>');
      $(obj).find('.result-container').fadeIn(100);

      evt.preventDefault();
  }
  </script>

</body>
</html>

0 个答案:

没有答案
相关问题
最新问题