If screen is lower than 600, on click expand search bar and hide the rest of elements
0
I have a search bar that is closed when screen is less than 600px, in same line with another 2 elements (a menu + a shopping cart).
When I click on the search bar it has to expand and also the 2 elements must dissapear. When I click the x and close the search bar (or outside), it must revert (shrink + show the 2 elements).
These are the problems I have:
Search bar must close as well if I close outside it, not just on x
Elements must remain hidden until search bar is closed. So if I click on the search button to perform the search + click to input terms of search, the 2 elements must remain hidden - right now they show again
Demo https://codepen.io/anon/pen/pQebge
<div class="htr-top">
MENU
</div>
<ul class="cart-area">
CART
</ul>
<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>
body {
background: #212129;
}
::selection {
background: #212129;
}
.htr-top, .cart-area {
display:inline-block;
}
.search-wrapper {
position: relative;
/*transform: translate(-50%, -50%);
top:50%;
left:50%;*/
display:inline-block;
}
.search-wrapper.active {}
.search-wrapper .input-holder {
height: 70px;
width:70px;
overflow: hidden;
background: rgba(255,255,255,0);
border-radius:6px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width:450px;
border-radius: 50px;
background: rgba(0,0,0,0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width:100%;
height: 50px;
padding:0px 70px 0 20px;
opacity: 0;
position: absolute;
top:0px;
left:0px;
background: transparent;
box-sizing: border-box;
border:none;
outline:none;
font-family:"Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color:#FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width:70px;
height:70px;
border:none;
border-radius:6px;
background: #FFF;
padding:0px;
outline:none;
position: relative;
z-index: 2;
float:right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height:50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width:22px;
height:22px;
display: inline-block;
vertical-align: middle;
position:relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
position: absolute;
content:'';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
left: 9px;
top: 18px;
border-radius: 2px;
background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
left: 0px;
top: 0px;
border-radius: 16px;
border: 4px solid #FE5F55;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top:24px;
right:20px;
width:25px;
height:25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right:-50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before, .search-wrapper .close::after {
position:absolute;
content:'';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}
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('');
}
}
$('.search-wrapper').on('click', function(){
$('.cart-area,.htr-top').toggle();
});
function checkWidth(init)
{
/*If browser resized, check width again */
if ($(window).width() > 600) {
$('.search-wrapper').addClass('active');
}
else {
if (!init) {
$('.search-wrapper').removeClass('active');
}
}
}
$(document).ready(function() {
checkWidth(true);
jquery
asked Nov 14 '18 at 6:45
Adyyda
14012
add a comment |
0
I have a search bar that is closed when screen is less than 600px, in same line with another 2 elements (a menu + a shopping cart).
When I click on the search bar it has to expand and also the 2 elements must dissapear. When I click the x and close the search bar (or outside), it must revert (shrink + show the 2 elements).
These are the problems I have:
Search bar must close as well if I close outside it, not just on x
Elements must remain hidden until search bar is closed. So if I click on the search button to perform the search + click to input terms of search, the 2 elements must remain hidden - right now they show again
Demo https://codepen.io/anon/pen/pQebge
<div class="htr-top">
MENU
</div>
<ul class="cart-area">
CART
</ul>
<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>
body {
background: #212129;
}
::selection {
background: #212129;
}
.htr-top, .cart-area {
display:inline-block;
}
.search-wrapper {
position: relative;
/*transform: translate(-50%, -50%);
top:50%;
left:50%;*/
display:inline-block;
}
.search-wrapper.active {}
.search-wrapper .input-holder {
height: 70px;
width:70px;
overflow: hidden;
background: rgba(255,255,255,0);
border-radius:6px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width:450px;
border-radius: 50px;
background: rgba(0,0,0,0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width:100%;
height: 50px;
padding:0px 70px 0 20px;
opacity: 0;
position: absolute;
top:0px;
left:0px;
background: transparent;
box-sizing: border-box;
border:none;
outline:none;
font-family:"Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color:#FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width:70px;
height:70px;
border:none;
border-radius:6px;
background: #FFF;
padding:0px;
outline:none;
position: relative;
z-index: 2;
float:right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height:50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width:22px;
height:22px;
display: inline-block;
vertical-align: middle;
position:relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
position: absolute;
content:'';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
left: 9px;
top: 18px;
border-radius: 2px;
background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
left: 0px;
top: 0px;
border-radius: 16px;
border: 4px solid #FE5F55;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top:24px;
right:20px;
width:25px;
height:25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right:-50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before, .search-wrapper .close::after {
position:absolute;
content:'';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}
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('');
}
}
$('.search-wrapper').on('click', function(){
$('.cart-area,.htr-top').toggle();
});
function checkWidth(init)
{
/*If browser resized, check width again */
if ($(window).width() > 600) {
$('.search-wrapper').addClass('active');
}
else {
if (!init) {
$('.search-wrapper').removeClass('active');
}
}
}
$(document).ready(function() {
checkWidth(true);
jquery
asked Nov 14 '18 at 6:45
Adyyda
14012
add a comment |
0
0
0
I have a search bar that is closed when screen is less than 600px, in same line with another 2 elements (a menu + a shopping cart).
When I click on the search bar it has to expand and also the 2 elements must dissapear. When I click the x and close the search bar (or outside), it must revert (shrink + show the 2 elements).
These are the problems I have:
Search bar must close as well if I close outside it, not just on x
Elements must remain hidden until search bar is closed. So if I click on the search button to perform the search + click to input terms of search, the 2 elements must remain hidden - right now they show again
Demo https://codepen.io/anon/pen/pQebge
<div class="htr-top">
MENU
</div>
<ul class="cart-area">
CART
</ul>
<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>
body {
background: #212129;
}
::selection {
background: #212129;
}
.htr-top, .cart-area {
display:inline-block;
}
.search-wrapper {
position: relative;
/*transform: translate(-50%, -50%);
top:50%;
left:50%;*/
display:inline-block;
}
.search-wrapper.active {}
.search-wrapper .input-holder {
height: 70px;
width:70px;
overflow: hidden;
background: rgba(255,255,255,0);
border-radius:6px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width:450px;
border-radius: 50px;
background: rgba(0,0,0,0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width:100%;
height: 50px;
padding:0px 70px 0 20px;
opacity: 0;
position: absolute;
top:0px;
left:0px;
background: transparent;
box-sizing: border-box;
border:none;
outline:none;
font-family:"Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color:#FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width:70px;
height:70px;
border:none;
border-radius:6px;
background: #FFF;
padding:0px;
outline:none;
position: relative;
z-index: 2;
float:right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height:50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width:22px;
height:22px;
display: inline-block;
vertical-align: middle;
position:relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
position: absolute;
content:'';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
left: 9px;
top: 18px;
border-radius: 2px;
background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
left: 0px;
top: 0px;
border-radius: 16px;
border: 4px solid #FE5F55;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top:24px;
right:20px;
width:25px;
height:25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right:-50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before, .search-wrapper .close::after {
position:absolute;
content:'';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}
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('');
}
}
$('.search-wrapper').on('click', function(){
$('.cart-area,.htr-top').toggle();
});
function checkWidth(init)
{
/*If browser resized, check width again */
if ($(window).width() > 600) {
$('.search-wrapper').addClass('active');
}
else {
if (!init) {
$('.search-wrapper').removeClass('active');
}
}
}
$(document).ready(function() {
checkWidth(true);
jquery
asked Nov 14 '18 at 6:45
Adyyda
14012
I have a search bar that is closed when screen is less than 600px, in same line with another 2 elements (a menu + a shopping cart).
When I click on the search bar it has to expand and also the 2 elements must dissapear. When I click the x and close the search bar (or outside), it must revert (shrink + show the 2 elements).
These are the problems I have:
Search bar must close as well if I close outside it, not just on x
Elements must remain hidden until search bar is closed. So if I click on the search button to perform the search + click to input terms of search, the 2 elements must remain hidden - right now they show again
Demo https://codepen.io/anon/pen/pQebge
<div class="htr-top">
MENU
</div>
<ul class="cart-area">
CART
</ul>
<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>
body {
background: #212129;
}
::selection {
background: #212129;
}
.htr-top, .cart-area {
display:inline-block;
}
.search-wrapper {
position: relative;
/*transform: translate(-50%, -50%);
top:50%;
left:50%;*/
display:inline-block;
}
.search-wrapper.active {}
.search-wrapper .input-holder {
height: 70px;
width:70px;
overflow: hidden;
background: rgba(255,255,255,0);
border-radius:6px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width:450px;
border-radius: 50px;
background: rgba(0,0,0,0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width:100%;
height: 50px;
padding:0px 70px 0 20px;
opacity: 0;
position: absolute;
top:0px;
left:0px;
background: transparent;
box-sizing: border-box;
border:none;
outline:none;
font-family:"Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color:#FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width:70px;
height:70px;
border:none;
border-radius:6px;
background: #FFF;
padding:0px;
outline:none;
position: relative;
z-index: 2;
float:right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height:50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width:22px;
height:22px;
display: inline-block;
vertical-align: middle;
position:relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
position: absolute;
content:'';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
left: 9px;
top: 18px;
border-radius: 2px;
background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
left: 0px;
top: 0px;
border-radius: 16px;
border: 4px solid #FE5F55;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top:24px;
right:20px;
width:25px;
height:25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right:-50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before, .search-wrapper .close::after {
position:absolute;
content:'';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}
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('');
}
}
$('.search-wrapper').on('click', function(){
$('.cart-area,.htr-top').toggle();
});
function checkWidth(init)
{
/*If browser resized, check width again */
if ($(window).width() > 600) {
$('.search-wrapper').addClass('active');
}
else {
if (!init) {
$('.search-wrapper').removeClass('active');
}
}
}
$(document).ready(function() {
checkWidth(true);
jquery
jquery
asked Nov 14 '18 at 6:45
Adyyda
14012
asked Nov 14 '18 at 6:45
Adyyda
14012
edited Nov 14 '18 at 9:36
asked Nov 14 '18 at 6:45
Adyyda
14012
asked Nov 14 '18 at 6:45
Adyyda
14012
asked Nov 14 '18 at 6:45
Adyyda
14012
14012
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
Remove $('.search-wrapper').on('click', function(){ from code and use $('.cart-area,.htr-top').toggle(); inside searchToggle function as below code.
Update
Added $("html").on("click", function(e) { function to close search box on click outside of search box.
function searchToggle(obj, evt) {
var container = $(obj).closest(".search-wrapper");
if (!container.hasClass("active")) {
container.addClass("active");
$(".cart-area,.htr-top").toggle();
$(".search-input").focus();
evt.preventDefault();
} else if (container.hasClass("active") && $(obj).closest(".input-holder").length == 0) {
container.removeClass("active");
// clear input
container.find(".search-input").val("");
$(".cart-area,.htr-top").toggle();
}
}
$("html").on("click", function(e) {
var container = $(".search-wrapper");
if (container.hasClass("active") && $(e.target).closest(".search-wrapper").length == 0) {
container.removeClass("active");
container.find(".search-input").val("");
$(".cart-area,.htr-top").toggle();
}
});body {
background: #212129;
}
::selection {
background: #212129;
}
.htr-top,
.cart-area {
display: inline-block;
}
.search-wrapper {
position: relative;
/*transform: translate(-50%, -50%);
top:50%;
left:50%;*/
display: inline-block;
}
.search-wrapper.active {}
.search-wrapper .input-holder {
height: 70px;
width: 70px;
overflow: hidden;
background: rgba(255, 255, 255, 0);
border-radius: 6px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width: 450px;
border-radius: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width: 100%;
height: 50px;
padding: 0px 70px 0 20px;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
background: transparent;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width: 70px;
height: 70px;
border: none;
border-radius: 6px;
background: #FFF;
padding: 0px;
outline: none;
position: relative;
z-index: 2;
float: right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height: 50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
position: relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before,
.search-wrapper .input-holder .search-icon span::after {
position: absolute;
content: '';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
left: 9px;
top: 18px;
border-radius: 2px;
background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
left: 0px;
top: 0px;
border-radius: 16px;
border: 4px solid #FE5F55;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top: 24px;
right: 20px;
width: 25px;
height: 25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right: -50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before,
.search-wrapper .close::after {
position: absolute;
content: '';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="htr-top">
MENU
</div>
<ul class="cart-area">
CART
</ul>
<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>answered Nov 14 '18 at 7:01
Karan
2,9352324
Yupeee...Works great. Can we colapse the search and show the 2 elements if we click outside of search (not just the x button)?
– Adyyda
Nov 14 '18 at 7:26
Updated my answer to close search box on click outside of search box.
– Karan
Nov 14 '18 at 8:41
Works in the demo you provided but in my site it makes the header elements dissapear on click outside the page. I am using for desktop mode the search bar as active so expanded and when screen is lower than 600px it has the active class removed and so it shows collapsed till i click on search button. The code for page resize is specified on top of thread. Thank you anyway for your help
– Adyyda
Nov 14 '18 at 9:35
On desktop browsers the menu works ok. On mobile phone, the moment i click on input field to enter the text and the keyboard shows, the search bar closes. Any way to prevent this on mobile phones?
– Adyyda
Nov 19 '18 at 19:44
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294501%2fif-screen-is-lower-than-600-on-click-expand-search-bar-and-hide-the-rest-of-ele%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Remove $('.search-wrapper').on('click', function(){ from code and use $('.cart-area,.htr-top').toggle(); inside searchToggle function as below code.
Update
Added $("html").on("click", function(e) { function to close search box on click outside of search box.
function searchToggle(obj, evt) {
var container = $(obj).closest(".search-wrapper");
if (!container.hasClass("active")) {
container.addClass("active");
$(".cart-area,.htr-top").toggle();
$(".search-input").focus();
evt.preventDefault();
} else if (container.hasClass("active") && $(obj).closest(".input-holder").length == 0) {
container.removeClass("active");
// clear input
container.find(".search-input").val("");
$(".cart-area,.htr-top").toggle();
}
}
$("html").on("click", function(e) {
var container = $(".search-wrapper");
if (container.hasClass("active") && $(e.target).closest(".search-wrapper").length == 0) {
container.removeClass("active");
container.find(".search-input").val("");
$(".cart-area,.htr-top").toggle();
}
});body {
background: #212129;
}
::selection {
background: #212129;
}
.htr-top,
.cart-area {
display: inline-block;
}
.search-wrapper {
position: relative;
/*transform: translate(-50%, -50%);
top:50%;
left:50%;*/
display: inline-block;
}
.search-wrapper.active {}
.search-wrapper .input-holder {
height: 70px;
width: 70px;
overflow: hidden;
background: rgba(255, 255, 255, 0);
border-radius: 6px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width: 450px;
border-radius: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width: 100%;
height: 50px;
padding: 0px 70px 0 20px;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
background: transparent;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width: 70px;
height: 70px;
border: none;
border-radius: 6px;
background: #FFF;
padding: 0px;
outline: none;
position: relative;
z-index: 2;
float: right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height: 50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
position: relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before,
.search-wrapper .input-holder .search-icon span::after {
position: absolute;
content: '';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
left: 9px;
top: 18px;
border-radius: 2px;
background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
left: 0px;
top: 0px;
border-radius: 16px;
border: 4px solid #FE5F55;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top: 24px;
right: 20px;
width: 25px;
height: 25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right: -50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before,
.search-wrapper .close::after {
position: absolute;
content: '';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="htr-top">
MENU
</div>
<ul class="cart-area">
CART
</ul>
<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>answered Nov 14 '18 at 7:01
Karan
2,9352324
Yupeee...Works great. Can we colapse the search and show the 2 elements if we click outside of search (not just the x button)?
– Adyyda
Nov 14 '18 at 7:26
Updated my answer to close search box on click outside of search box.
– Karan
Nov 14 '18 at 8:41
Works in the demo you provided but in my site it makes the header elements dissapear on click outside the page. I am using for desktop mode the search bar as active so expanded and when screen is lower than 600px it has the active class removed and so it shows collapsed till i click on search button. The code for page resize is specified on top of thread. Thank you anyway for your help
– Adyyda
Nov 14 '18 at 9:35
On desktop browsers the menu works ok. On mobile phone, the moment i click on input field to enter the text and the keyboard shows, the search bar closes. Any way to prevent this on mobile phones?
– Adyyda
Nov 19 '18 at 19:44
add a comment |
1
Remove $('.search-wrapper').on('click', function(){ from code and use $('.cart-area,.htr-top').toggle(); inside searchToggle function as below code.
Update
Added $("html").on("click", function(e) { function to close search box on click outside of search box.
function searchToggle(obj, evt) {
var container = $(obj).closest(".search-wrapper");
if (!container.hasClass("active")) {
container.addClass("active");
$(".cart-area,.htr-top").toggle();
$(".search-input").focus();
evt.preventDefault();
} else if (container.hasClass("active") && $(obj).closest(".input-holder").length == 0) {
container.removeClass("active");
// clear input
container.find(".search-input").val("");
$(".cart-area,.htr-top").toggle();
}
}
$("html").on("click", function(e) {
var container = $(".search-wrapper");
if (container.hasClass("active") && $(e.target).closest(".search-wrapper").length == 0) {
container.removeClass("active");
container.find(".search-input").val("");
$(".cart-area,.htr-top").toggle();
}
});body {
background: #212129;
}
::selection {
background: #212129;
}
.htr-top,
.cart-area {
display: inline-block;
}
.search-wrapper {
position: relative;
/*transform: translate(-50%, -50%);
top:50%;
left:50%;*/
display: inline-block;
}
.search-wrapper.active {}
.search-wrapper .input-holder {
height: 70px;
width: 70px;
overflow: hidden;
background: rgba(255, 255, 255, 0);
border-radius: 6px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width: 450px;
border-radius: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width: 100%;
height: 50px;
padding: 0px 70px 0 20px;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
background: transparent;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width: 70px;
height: 70px;
border: none;
border-radius: 6px;
background: #FFF;
padding: 0px;
outline: none;
position: relative;
z-index: 2;
float: right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height: 50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
position: relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before,
.search-wrapper .input-holder .search-icon span::after {
position: absolute;
content: '';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
left: 9px;
top: 18px;
border-radius: 2px;
background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
left: 0px;
top: 0px;
border-radius: 16px;
border: 4px solid #FE5F55;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top: 24px;
right: 20px;
width: 25px;
height: 25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right: -50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before,
.search-wrapper .close::after {
position: absolute;
content: '';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="htr-top">
MENU
</div>
<ul class="cart-area">
CART
</ul>
<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>answered Nov 14 '18 at 7:01
Karan
2,9352324
Yupeee...Works great. Can we colapse the search and show the 2 elements if we click outside of search (not just the x button)?
– Adyyda
Nov 14 '18 at 7:26
Updated my answer to close search box on click outside of search box.
– Karan
Nov 14 '18 at 8:41
Works in the demo you provided but in my site it makes the header elements dissapear on click outside the page. I am using for desktop mode the search bar as active so expanded and when screen is lower than 600px it has the active class removed and so it shows collapsed till i click on search button. The code for page resize is specified on top of thread. Thank you anyway for your help
– Adyyda
Nov 14 '18 at 9:35
On desktop browsers the menu works ok. On mobile phone, the moment i click on input field to enter the text and the keyboard shows, the search bar closes. Any way to prevent this on mobile phones?
– Adyyda
Nov 19 '18 at 19:44
add a comment |
1
1
1
Remove $('.search-wrapper').on('click', function(){ from code and use $('.cart-area,.htr-top').toggle(); inside searchToggle function as below code.
Update
Added $("html").on("click", function(e) { function to close search box on click outside of search box.
function searchToggle(obj, evt) {
var container = $(obj).closest(".search-wrapper");
if (!container.hasClass("active")) {
container.addClass("active");
$(".cart-area,.htr-top").toggle();
$(".search-input").focus();
evt.preventDefault();
} else if (container.hasClass("active") && $(obj).closest(".input-holder").length == 0) {
container.removeClass("active");
// clear input
container.find(".search-input").val("");
$(".cart-area,.htr-top").toggle();
}
}
$("html").on("click", function(e) {
var container = $(".search-wrapper");
if (container.hasClass("active") && $(e.target).closest(".search-wrapper").length == 0) {
container.removeClass("active");
container.find(".search-input").val("");
$(".cart-area,.htr-top").toggle();
}
});body {
background: #212129;
}
::selection {
background: #212129;
}
.htr-top,
.cart-area {
display: inline-block;
}
.search-wrapper {
position: relative;
/*transform: translate(-50%, -50%);
top:50%;
left:50%;*/
display: inline-block;
}
.search-wrapper.active {}
.search-wrapper .input-holder {
height: 70px;
width: 70px;
overflow: hidden;
background: rgba(255, 255, 255, 0);
border-radius: 6px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width: 450px;
border-radius: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width: 100%;
height: 50px;
padding: 0px 70px 0 20px;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
background: transparent;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width: 70px;
height: 70px;
border: none;
border-radius: 6px;
background: #FFF;
padding: 0px;
outline: none;
position: relative;
z-index: 2;
float: right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height: 50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
position: relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before,
.search-wrapper .input-holder .search-icon span::after {
position: absolute;
content: '';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
left: 9px;
top: 18px;
border-radius: 2px;
background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
left: 0px;
top: 0px;
border-radius: 16px;
border: 4px solid #FE5F55;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top: 24px;
right: 20px;
width: 25px;
height: 25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right: -50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before,
.search-wrapper .close::after {
position: absolute;
content: '';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="htr-top">
MENU
</div>
<ul class="cart-area">
CART
</ul>
<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>answered Nov 14 '18 at 7:01
Karan
2,9352324
Remove $('.search-wrapper').on('click', function(){ from code and use $('.cart-area,.htr-top').toggle(); inside searchToggle function as below code.
Update
Added $("html").on("click", function(e) { function to close search box on click outside of search box.
function searchToggle(obj, evt) {
var container = $(obj).closest(".search-wrapper");
if (!container.hasClass("active")) {
container.addClass("active");
$(".cart-area,.htr-top").toggle();
$(".search-input").focus();
evt.preventDefault();
} else if (container.hasClass("active") && $(obj).closest(".input-holder").length == 0) {
container.removeClass("active");
// clear input
container.find(".search-input").val("");
$(".cart-area,.htr-top").toggle();
}
}
$("html").on("click", function(e) {
var container = $(".search-wrapper");
if (container.hasClass("active") && $(e.target).closest(".search-wrapper").length == 0) {
container.removeClass("active");
container.find(".search-input").val("");
$(".cart-area,.htr-top").toggle();
}
});body {
background: #212129;
}
::selection {
background: #212129;
}
.htr-top,
.cart-area {
display: inline-block;
}
.search-wrapper {
position: relative;
/*transform: translate(-50%, -50%);
top:50%;
left:50%;*/
display: inline-block;
}
.search-wrapper.active {}
.search-wrapper .input-holder {
height: 70px;
width: 70px;
overflow: hidden;
background: rgba(255, 255, 255, 0);
border-radius: 6px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width: 450px;
border-radius: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width: 100%;
height: 50px;
padding: 0px 70px 0 20px;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
background: transparent;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width: 70px;
height: 70px;
border: none;
border-radius: 6px;
background: #FFF;
padding: 0px;
outline: none;
position: relative;
z-index: 2;
float: right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height: 50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
position: relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before,
.search-wrapper .input-holder .search-icon span::after {
position: absolute;
content: '';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
left: 9px;
top: 18px;
border-radius: 2px;
background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
left: 0px;
top: 0px;
border-radius: 16px;
border: 4px solid #FE5F55;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top: 24px;
right: 20px;
width: 25px;
height: 25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right: -50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before,
.search-wrapper .close::after {
position: absolute;
content: '';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="htr-top">
MENU
</div>
<ul class="cart-area">
CART
</ul>
<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>function searchToggle(obj, evt) {
var container = $(obj).closest(".search-wrapper");
if (!container.hasClass("active")) {
container.addClass("active");
$(".cart-area,.htr-top").toggle();
$(".search-input").focus();
evt.preventDefault();
} else if (container.hasClass("active") && $(obj).closest(".input-holder").length == 0) {
container.removeClass("active");
// clear input
container.find(".search-input").val("");
$(".cart-area,.htr-top").toggle();
}
}
$("html").on("click", function(e) {
var container = $(".search-wrapper");
if (container.hasClass("active") && $(e.target).closest(".search-wrapper").length == 0) {
container.removeClass("active");
container.find(".search-input").val("");
$(".cart-area,.htr-top").toggle();
}
});body {
background: #212129;
}
::selection {
background: #212129;
}
.htr-top,
.cart-area {
display: inline-block;
}
.search-wrapper {
position: relative;
/*transform: translate(-50%, -50%);
top:50%;
left:50%;*/
display: inline-block;
}
.search-wrapper.active {}
.search-wrapper .input-holder {
height: 70px;
width: 70px;
overflow: hidden;
background: rgba(255, 255, 255, 0);
border-radius: 6px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width: 450px;
border-radius: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width: 100%;
height: 50px;
padding: 0px 70px 0 20px;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
background: transparent;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width: 70px;
height: 70px;
border: none;
border-radius: 6px;
background: #FFF;
padding: 0px;
outline: none;
position: relative;
z-index: 2;
float: right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height: 50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
position: relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before,
.search-wrapper .input-holder .search-icon span::after {
position: absolute;
content: '';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
left: 9px;
top: 18px;
border-radius: 2px;
background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
left: 0px;
top: 0px;
border-radius: 16px;
border: 4px solid #FE5F55;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top: 24px;
right: 20px;
width: 25px;
height: 25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right: -50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before,
.search-wrapper .close::after {
position: absolute;
content: '';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="htr-top">
MENU
</div>
<ul class="cart-area">
CART
</ul>
<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>function searchToggle(obj, evt) {
var container = $(obj).closest(".search-wrapper");
if (!container.hasClass("active")) {
container.addClass("active");
$(".cart-area,.htr-top").toggle();
$(".search-input").focus();
evt.preventDefault();
} else if (container.hasClass("active") && $(obj).closest(".input-holder").length == 0) {
container.removeClass("active");
// clear input
container.find(".search-input").val("");
$(".cart-area,.htr-top").toggle();
}
}
$("html").on("click", function(e) {
var container = $(".search-wrapper");
if (container.hasClass("active") && $(e.target).closest(".search-wrapper").length == 0) {
container.removeClass("active");
container.find(".search-input").val("");
$(".cart-area,.htr-top").toggle();
}
});body {
background: #212129;
}
::selection {
background: #212129;
}
.htr-top,
.cart-area {
display: inline-block;
}
.search-wrapper {
position: relative;
/*transform: translate(-50%, -50%);
top:50%;
left:50%;*/
display: inline-block;
}
.search-wrapper.active {}
.search-wrapper .input-holder {
height: 70px;
width: 70px;
overflow: hidden;
background: rgba(255, 255, 255, 0);
border-radius: 6px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width: 450px;
border-radius: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width: 100%;
height: 50px;
padding: 0px 70px 0 20px;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
background: transparent;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width: 70px;
height: 70px;
border: none;
border-radius: 6px;
background: #FFF;
padding: 0px;
outline: none;
position: relative;
z-index: 2;
float: right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height: 50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
position: relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before,
.search-wrapper .input-holder .search-icon span::after {
position: absolute;
content: '';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
left: 9px;
top: 18px;
border-radius: 2px;
background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
left: 0px;
top: 0px;
border-radius: 16px;
border: 4px solid #FE5F55;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top: 24px;
right: 20px;
width: 25px;
height: 25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right: -50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before,
.search-wrapper .close::after {
position: absolute;
content: '';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="htr-top">
MENU
</div>
<ul class="cart-area">
CART
</ul>
<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>answered Nov 14 '18 at 7:01
Karan
2,9352324
edited Nov 14 '18 at 8:41
answered Nov 14 '18 at 7:01
Karan
2,9352324
answered Nov 14 '18 at 7:01
Karan
2,9352324
answered Nov 14 '18 at 7:01
Karan
2,9352324
2,9352324
Yupeee...Works great. Can we colapse the search and show the 2 elements if we click outside of search (not just the x button)?
– Adyyda
Nov 14 '18 at 7:26
Updated my answer to close search box on click outside of search box.
– Karan
Nov 14 '18 at 8:41
Works in the demo you provided but in my site it makes the header elements dissapear on click outside the page. I am using for desktop mode the search bar as active so expanded and when screen is lower than 600px it has the active class removed and so it shows collapsed till i click on search button. The code for page resize is specified on top of thread. Thank you anyway for your help
– Adyyda
Nov 14 '18 at 9:35
On desktop browsers the menu works ok. On mobile phone, the moment i click on input field to enter the text and the keyboard shows, the search bar closes. Any way to prevent this on mobile phones?
– Adyyda
Nov 19 '18 at 19:44
add a comment |
Yupeee...Works great. Can we colapse the search and show the 2 elements if we click outside of search (not just the x button)?
– Adyyda
Nov 14 '18 at 7:26
Updated my answer to close search box on click outside of search box.
– Karan
Nov 14 '18 at 8:41
Works in the demo you provided but in my site it makes the header elements dissapear on click outside the page. I am using for desktop mode the search bar as active so expanded and when screen is lower than 600px it has the active class removed and so it shows collapsed till i click on search button. The code for page resize is specified on top of thread. Thank you anyway for your help
– Adyyda
Nov 14 '18 at 9:35
On desktop browsers the menu works ok. On mobile phone, the moment i click on input field to enter the text and the keyboard shows, the search bar closes. Any way to prevent this on mobile phones?
– Adyyda
Nov 19 '18 at 19:44
Yupeee...Works great. Can we colapse the search and show the 2 elements if we click outside of search (not just the x button)?
– Adyyda
Nov 14 '18 at 7:26
Yupeee...Works great. Can we colapse the search and show the 2 elements if we click outside of search (not just the x button)?
– Adyyda
Nov 14 '18 at 7:26
Updated my answer to close search box on click outside of search box.
– Karan
Nov 14 '18 at 8:41
Updated my answer to close search box on click outside of search box.
– Karan
Nov 14 '18 at 8:41
Works in the demo you provided but in my site it makes the header elements dissapear on click outside the page. I am using for desktop mode the search bar as active so expanded and when screen is lower than 600px it has the active class removed and so it shows collapsed till i click on search button. The code for page resize is specified on top of thread. Thank you anyway for your help
– Adyyda
Nov 14 '18 at 9:35
Works in the demo you provided but in my site it makes the header elements dissapear on click outside the page. I am using for desktop mode the search bar as active so expanded and when screen is lower than 600px it has the active class removed and so it shows collapsed till i click on search button. The code for page resize is specified on top of thread. Thank you anyway for your help
– Adyyda
Nov 14 '18 at 9:35
On desktop browsers the menu works ok. On mobile phone, the moment i click on input field to enter the text and the keyboard shows, the search bar closes. Any way to prevent this on mobile phones?
– Adyyda
Nov 19 '18 at 19:44
On desktop browsers the menu works ok. On mobile phone, the moment i click on input field to enter the text and the keyboard shows, the search bar closes. Any way to prevent this on mobile phones?
– Adyyda
Nov 19 '18 at 19:44
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294501%2fif-screen-is-lower-than-600-on-click-expand-search-bar-and-hide-the-rest-of-ele%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
