I'm making a search bar but I dont want it like this. It is broken atm.
I should only see the span icon and when i hover it, the input should slide aligned with the span.
The problem is that I can't seem to hide the input. Why width: 0; doesn't work for the input?
.navbar {
background-color:#aaa
}
.search {
width: 230px;
height: 30px;
position: relative;
line-height: 22px;
}
.search button {
height: 30px;
position: absolute;
right: 0;
margin: 0;
background-color: transparent;
border: 0;
}
.search button span {
font-size: 1.2rem;
color: #fff;
}
.search input {
position: absolute;
width: 0;
float: Left;
margin-left: 180px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
height: 30px;
line-height: 18px;
padding: 0 2px 0 2px;
border-radius: 3px !important;
}
.search:hover input,
.search input:focus {
width: 200px;
margin-left: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="navbar">
<div class="search">
<input type="text" class="form-control input-sm float-left" maxlength="64" placeholder="Search">
<button type="submit"><span class="fa fa-search"></span></button>
</div>
</div>
You can go with visibility hidden and visible after hover.
Example for you code
.search input {
visibility: hidden;
}
.search input:hover{
visibility: visible;
}
You can solve it easy by adding the opacity 0/1 opacity:0; for .search input and opacity:1; for .search:hover input . See the result below
.navbar {
background-color:#aaa
}
.search {
width: 230px;
height: 30px;
position: relative;
line-height: 22px;
}
.search button {
height: 30px;
position: absolute;
right: 0;
margin: 0;
background-color: transparent;
border: 0;
}
.search button span {
font-size: 1.2rem;
color: #fff;
}
.search input {
position: absolute;
width: 0;
float: Left;
margin-left: 180px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
height: 30px;
line-height: 18px;
padding: 0 2px 0 2px;
border-radius: 3px !important;
opacity:0; // <-- this
}
.search:hover input,
.search input:focus {
width: 200px;
margin-left: 0px;
opacity:1; // <-- and this
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="navbar">
<div class="search">
<input type="text" class="form-control input-sm float-left" maxlength="64" placeholder="Search">
<button type="submit"><span class="fa fa-search"></span></button>
</div>
</div>
You could create this effect using flexbox instead of absolute positioning.
For the input to be completely hidden, you need to hide the border and padding initially, and add them back on hover.
.navbar {
background-color: #aaa
}
.search {
width: 230px;
height: 30px;
position: relative;
line-height: 22px;
display: flex;
}
.search button {
margin: 0;
background-color: transparent;
border: 0;
}
.search button span {
font-size: 1.2rem;
color: #fff;
}
.search input {
box-sizing: border-box;
width: 0;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
line-height: 18px;
padding: 0;
border: 0;
margin-left: 180px;
}
.search:hover input,
.search input:focus {
width: 180px;
margin-left: 0px;
padding: 0 2px 0 2px;
border: 2px inset;
border-radius: 3px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="navbar">
<div class="search">
<input type="text" class="form-control input-sm float-left" maxlength="64" placeholder="Search">
<button type="submit"><span class="fa fa-search"></span></button>
</div>
</div>
I had the same issue input tag width:0px still showed the input tag with 1 or 2 pixel width.
It worked in some browsers but not Chrome or new Edge Chromium.
For my solution if I put the input in a div and set the div width:0px.
It hid the input but still allow it to receive events (I need this because events do not work if you set the input to display:hidden, but want the input not to show)
Use keyframes and animations instead.
https://www.w3schools.com/css/css3_animations.asp
.navbar {
background-color:#aaa
}
.search {
width: 230px;
height: 30px;
position: relative;
line-height: 22px;
}
.search button {
height: 30px;
position: absolute;
right: 0;
margin: 0;
background-color: transparent;
border: 0;
}
.search button span {
font-size: 1.2rem;
color: #fff;
}
.search input {
position: absolute;
display:none;
width: 0px;
float: left;
margin-left: 180px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
height: 30px;
line-height: 18px;
padding: 0 2px 0 2px;
border-radius: 3px !important;
}
.search:hover input,
.search input:focus {
margin-left: 0px;
display:inline-block;
animation-name: expand-search;
animation-duration: 0.7s;
width:200px;
}
#keyframes expand-search {
from {width: 0px;}
to {width: 200px;}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="navbar">
<div class="search">
<input type="text" class="form-control input-sm float-left" maxlength="64" placeholder="Search">
<button type="submit"><span class="fa fa-search"></span></button>
</div>
</div>
Related
I've created a "loading page" which should be the first page that users see when they connect. It's a simple page with a central bouton that people have to click. Once they do, they access to the rest of the website. All the pages including the loading page are in the same folder. Each page of the site has its own : "XXXXX.html".
So I've created a loader.html page, and implemented a javascript function, that is here :
let introBox = document.getElementById('intro');
introBox.addEventListener('click', function(){
document.location.href = "main.html";
});
#keyframes sectionAnimation{
0%{
transform:scale(1);
}
50%{
transform:scale(1.5);
}
100%{
transform: scale(1);
}
}
html {
border: 0;
margin: 0;
padding: 0;
width: 100%;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,*:before,*:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body {
background-color: #fff;
padding: 0;
margin: 0;
height: auto;
width: 100%;
background-repeat: no-repeat;
& img{
width: 50%;
}
}
.loaderbody{
background-image: url('../../Assets/R.png');
}
b {
position: relative;
display: block;
font-family: helvetica neue, helvetica, sans-serif;
line-height: 1.15em;
margin-top: -1.15em;
top: 2.3em;
font-size: 0.67em;
font-weight: 400;
letter-spacing: 0.025em;
opacity: 0.75;
text-align: center;
}
b span {
font-size: 0.785em;
font-weight: 400;
opacity: 0.4;
}
#intro {
width: 200px;
margin:auto;
margin-top:25%;
animation: sectionAnimation 1.5s both infinite;
transform:scale(1);
}
.button {
display: inline-block;
text-decoration: none;
position: relative;
margin-top: 40px;
}
.button .bottom {
position: absolute;
left: 7px;
top: 7px;
width: 100%;
height: 100%;
background-color: #2acdc1;
display: block;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.button .top {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 24px 34px 22px 34px;
border: 2px solid #04049d;
}
.button-dark .top {
border: 2px solid #fff;
}
.button .top .label {
font-family: sans-serif;
font-weight: 600;
color: #04049d;
font-size: 12px;
line-height: 110%;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.button-dark .top .label {
color: #fff;
}
.button:hover .bottom {
left: 0;
top: 0;
background-color: #f3f3f3;
}
.button:hover .top .label {
color: #2acdc1;
}
.button-border {
position: absolute;
background-color: #2acdc1;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.button:hover .top .button-border-left,.button:hover .top .button-border-right {
height: calc(100% + 2px);
}
.button:hover .top .button-border-top,.button:hover .top .button-border-bottom {
width: calc(100% + 2px);
}
.button-border-left {
left: -2px;
bottom: -2px;
width: 2px;
height: 0;
}
.button-border-top {
left: -2px;
top: -2px;
width: 0;
height: 2px;
}
.button-border-right {
right: -2px;
top: -2px;
width: 2px;
height: 0;
}
.button-border-bottom {
right: -2px;
bottom: -2px;
width: 0;
height: 2px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../Css/main copie.css">
<title>TP</title>
</head>
<body class="loaderbody">
<script type="text/javascript" src="../Js/loader.js"></script>
<section id="intro">
<div id="intro-content" class="center-content">
<div class="center-content-inner">
<div class="content-section content-section-margin">
<div class="content-section-grid clearfix">
<a href="#" class="button nav-link">
<div class="bottom"></div>
<div class="top">
<div class="label">Let's go !</div>
<div class="button-border button-border-left"></div>
<div class="button-border button-border-top"></div>
<div class="button-border button-border-right"></div>
<div class="button-border button-border-bottom"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
The element "intro" is my bouton on my loading page. However, when I click on it, I stay on the same URL. I've noticed that when I click on the box it automatically add a "#" at the end of my URL. So I assume the function is kinda working, and my click is detected.
It seems the problem is about the .location.href but I can't get it.
Thank you so much.
There is a missing slash /, your code should look like this:
introBox.addEventListener('click', function(){
document.location.href = "/main.html";
});
If you want to redirect outside your website, you have to add double slash //.
document.location.href = "//google.com";
EDIT: The actual error is on the tag with href="#", change it to "/main.html".
You can remove the listener if you will, it's no longer needed.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I follow this youtube tutorial (https://www.youtube.com/watch?v=sy9OI-ndKnc). I don't understand HTML, CSS, and JS that much (to be honest i had no experience in it), but I really need this page to work. I think the .img-btn span.m-in should be the one responsible to translate the button when it get clicked(?).
document.querySelector('.img-btn').addEventListener('click', function()
{
document.querySelector('.cont').classList.toggle('s-signup')
}
);
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700;800&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
*, *:before, *:after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.heading li,a,button{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10%;
background-color: #000000;
}
.heading .logo{
cursor: pointer;
height: 80px;
width: 80px;
transition: all 0.3s ease 0s;
-webkit-transition: image 0.2s ease-in-out;
transition: image 0.2s ease-in-out;
}
.navigation{
list-style: none;
}
.navigation li{
display: inline-block;
padding: 0px 20px;
}
.navigation li a{
transition: all 0.3s ease 0s;
}
.navigation li a:hover{
color: #0088a9;
}
.heading button{
padding: 9px 25px;
background-color: rgb(224, 173, 19);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.heading button:hover{
background-color: rgba(0,136,168,0.8);
}
.joinus{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: -webkit-linear-gradient(left, #000000, #FF0000);
font-family: 'Nunito', sans-serif;
}
.joinus input, button{
border: none;
outline: none;
background: none;
}
.cont{
overflow: hidden;
position: relative;
width: 900px;
height: 550px;
background: #fff;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.form{
position: relative;
width: 640px;
height: 100%;
padding: 50px 30px;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.joinus h2{
width: 100%;
font-size: 30px;
text-align: center;
font-family: 'Nunito', sans-serif;
}
.joinus label{
display: block;
width: 260px;
margin: 25px auto;
text-align: center;
}
.joinus label span{
font-size: 14px;
font-weight: 600;
color: #505f75;
text-transform: uppercase;
font-family: 'Nunito', sans-serif;
}
.joinus input{
display: block;
width: 100%;
margin-top: 5px;
font-size: 16px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(109, 93, 93, 0.4);
text-align: center;
font-family: 'Nunito', sans-serif;
}
.joinus button{
display: block;
margin: 0 auto;
width: 260px;
height: 36px;
border-radius: 50px;
color: #fff;
font-size: 15px;
cursor: pointer;
}
.submit{
margin-top: 40px;
margin-bottom: 30px;
text-transform: uppercase;
font-weight: 600;
font-family: 'Nunito', sans-serif;
background-color: rgb(224, 173, 19);
}
.submit:hover{
background-color: rgba(0,136,168,0.8);
}
.forgot-pass{
margin-top: 15px;
text-align: center;
font-size: 14px;
font-weight: 600px;
color: #0c0101;
cursor: pointer;
}
.forgot-pass:hover{
color: rgba(0,136,168,0.8);
}
.social-media{
width: 100%;
text-align: center;
margin-top: 20px;
}
.social-media ul{
list-style: none;
}
.social-media ul li{
display: inline-block;
cursor: pointer;
margin: 25px 15px;
}
.social-media img{
width: 40px;
height: 40px;
}
.sub-cont{
overflow: hidden;
position: absolute;
left: 640px;
top: 0;
width: 900px;
height: 100%;
padding-left: 260px;
background: #fff;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out;
}
.cont.s-signup .sub-cont{
-webkit-transform: translate3d(-640px, 0, 0);
transform: translate3d(-640px, 0, 0);
}
.img{
overflow: hidden;
z-index: 2;
position: absolute;
left: 0;
top: 0;
width: 260px;
height: 100%;
padding-top: 360px;
}
.img:before{
content: '';
position: absolute;
right: 0;
top: 0;
width: 900px;
height: 100%;
background-image: url(img/alex.jpg);
background-size: cover;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.img:after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,1);
}
.cont .s-signup .img:before{
-webkit-transform: translate3d(640px, 0, 0);
transform: translate3d(640px, 0, 0);
}
.img-text{
z-index: 2;
position: absolute;
left: 0;
top: 50px;
width: 100%;
padding: 0 20px;
text-align: center;
color: #fff;
-webkit-transition: -webkit-transform 1.2s ease-in-out;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}
.img-text h2{
margin-bottom: 10px;
font-weight: normal;
}
.img-text p{
font-size: 14px;
line-height: 1.5;
}
.cont.s-signup .img-text.m-up{
-webkit-transform: translateX(520px);
transform: translateX(520px);
}
.img-text.m-in{
-webkit-transform: translateX(-520px);
transform: translateX(-520px);
}
.cont.s-signup .img-text.m-in{
-webkit-transform:translateX(0);
transform:translateX(0);
}
.sign-in{
padding-top: 65px;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.cont.s-signup .sign-in{
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: 1.2s;
transition-duration: 1.2s;
-webkit-transform: translate3d(640px, 0 , 0);
transform: translate3d(640px, 0 , 0);
}
.img-btn{
overflow: hidden;
z-index: 2;
position: relative;
width: 100px;
height: 36px;
margin: 0 auto;
background: transparent;
color: #fff;
text-transform: uppercase;
font-size: 15px;
cursor: pointer;
}
.img-btn:after{
content: '';
z-index: 2;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius: 50px;
}
.img-btn span{
position: absolute;
left: 0;
top: 0;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 1.2s;
transition: -webkit-transform 1.2s;
transition: transform 1.2s;
transition: transform 1.2s, -webkit-transform 1.2s;
}
.img-btn span.m-in{
-webkit-transform: translateY(-72px);
transform: translateY(-72px);
}
.sign-up{
-webkit-transform: translate3d(-900px, 0 ,0);
transform: translate3d(-900px, 0, 0);
}
.cont.s-signup .sign-up{
-webkit-transform: translate3d(0, 0 ,0);
transform: translate3d(0, 0, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Join us</title>
<link rel="stylesheet" type="text/css" href="style/joinus.css">
</head>
<body>
<section class="heading">
<header>
<img class="logo" src="img/logo_csc.png" alt="logo">
<nav>
<ul class="navigation">
<li>Home</li>
<li>About us</li>
<li>Research</li>
<li>Our Achievement</li>
</ul>
</nav>
<div>
<button>Join us</button>
</div>
</header>
</section>
<section class="joinus">
<div class="cont">
<div class="form sign-in">
<h2>Sign In</h2>
<label>
<span>Email Address</span>
<input type="email" name="email">
</label>
<label>
<span>Password</span>
<input type="password" name="password">
</label>
<button class="submit" type="button">Sign In</button>
<p class="forgot-pass">Forgot Password?</p>
<div class="social-media">
<ul>
<li><img src="img/instagram.png"></li>
<li><img src="img/youtube.png"></li>
</ul>
</div>
</div>
<div class="sub-cont">
<div class="img">
<div class="img-text m-up">
<h2>New activist?</h2>
<p>Sign up here!</p>
</div>
<div class="img-text m-in">
<h2>Already an activist?</h2>
<p>If you already has an account, sign in here!.</p>
</div>
<div class="img-btn">
<span class="m-up">Sign Up</span>
<span class="m-in">Sign In</span>
</div>
</div>
<div class="form sign-up">
<h2>Sign Up</h2>
<label>
<input type="text" placeholder="Full Name...">
</label>
<label>
<input type="email" placeholder="Email...">
</label>
<label>
<input type="text" placeholder="Majors...">
</label>
<label>
<input type="password" placeholder="Password...">
</label>
<label>
<input type="password" placeholder="Confirm Password...">
</label>
<button type="button" class="submit">Sign Up Now</button>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="script/register.js"></script>
</body>
</html>
Working Codepen https://codepen.io/thisisloop/pen/xxwadPp
I had to add these two codes to the CSS File:
.cont.s-signup .img-btn span.m-in{
-webkit-transform: translateY(0);
transform: translateY(0);
}
.cont.s-signup .img-btn span.m-up{
-webkit-transform: translateY(72px);
transform: translateY(72px);
}
For the image, you need to add quotation marks
instead of:
background-image: url(img/alex.jpg);
do
background-image: url('img/alex.jpg');
I couldnt add it to the codepen, because codepen doesnt allow file upload for free users.
Added a Hamburger Menu to our site. There are no console log errors and the menu refuses to expand.
The page in question - https://www.harpercollege.edu/foundation/alumni-dev/index.php
The Code Pen I'm working from - https://codepen.io/anon/pen/vQNmgx
Everything works fine in codepen and visually it looks fine in the live site. I just can click or expand. The goal is to be able to expand the menu and push over the rest of the page.
{HTML}
<body>
<nav class="side-nav hidden">
<div>
<div class="open-menu-side" id="side">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<ul class="side-nav-ul">
<li class="block">Home</li>
<li class="block">Profile</li>
<li class="block">Blogs</li>
<li class="block">Following</li>
<li class="block">Settings</li>
<li class="block">Logout</li>
</ul>
</div>
</nav>
<header id="pushed">
<nav>
<div class="open-menu" id="main">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<div class="brand">Login!</div>
</nav>
</header>
<section></section>
<p class="hello-text">hello</p>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/index.js"></script>
</body>
{JS}
$(".hamburger").on("click", function(){
$(".hamburger").toggleClass("is-active");
$('body').toggleClass('menu-active');
$(".side-nav").toggleClass("hidden");
if($("#side").hasClass("is-active")){
$("#main").toggleClass("hidden");
} else if(!$("#side").hasClass("is-active")) {
$("#main").toggleClass("hidden");
}
});
{CSS}
html,body{
padding: 0;
margin: 0;
height: 100%;
background-color: black;
box-sizing: border-box;
}
button:focus {outline:0;}
a{
color: #fff;
}
a:hover{
color: #fff;
text-decoration: none;
}
.side-nav{
position: absolute;
background-color: gray;
width: 300px;
height: 100%;
z-index: 1;
right: 0;
}
.open-menu-side{
position: relative;
display: block;
height: 80px;
width: 100%;
text-align: center;
float: right;
}
.side-nav-ul{
position: relative;
display: inline-block;
width: 100%;
height: 100%;
list-style: none;
font-size: 28px;
color: #fff;
}
.block{
height: 40px;
}
header{
height: 80px;
background-color: #fff;
}
.brand{
display: inline-block;
}
.img-menu img{
height: 50px;
width: 50px;
border-radius: 50%;
border: solid 1px black;
float: left;
}
.hidden{
position: absolute;
right: -300px;
}
#pushed{
position: relative;
}
#main{
float: right;
}
.hamburger {
padding: 15px 15px;
height: 100%;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible; }
.hamburger:hover {
opacity: 0.7; }
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative; }
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block; }
.hamburger-inner::before {
top: -10px; }
.hamburger-inner::after {
bottom: -10px; }
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
.hello-text{
text-align: right;
color: #fff;
font-size: 22px;
}
body.menu-active{
padding-right: 300px;
}
You've put the script which adds the click handler in your document's head. At the point that the script is loaded, $('.hamburger') doesn't exist in the DOM, so the click handler is not added, therefore the clicks have no effect.
To fix, consider moving the script to the bottom of the page, or wrapping it in $(document).ready().
I built a sliding down search box. When you press the search icon a search box drops down, and if you press the search icon the search box will disappear again. I want another way for people to exit the search box besides just clicking on the search icon again. I also want to be able to exit the search box by clicking anywhere else on the screen besides the search box. How would I do this?
jsfiddle - https://jsfiddle.net/pkhj0frp/
jQuery('.search-icon').on('click', function() {
jQuery('.search-form').toggleClass('search-visible');
});
/*--------------------------------------------------------------
## Search
--------------------------------------------------------------*/
.search-icon {
float: right;
line-height: 70px;
cursor: pointer;
margin: 0px 34px;
}
.search-form {
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out 250ms ease;
-moz-transition: all .3s ease-in-out 250ms ease;
-ms-transition: all .3s ease-in-out 250ms ease;
-o-transition: all .3s ease-in-out 250ms ease;
transition: all .3s ease-in-out 250ms ease;
background: #fff;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: calc((100vw - 1200px) / 2);
padding-right: calc((100vw - 1200px) / 2);
position: absolute;
top: calc(20% + 1px);
transform: translateX(-50%);
left: 50%;
width: 100vw;
}
.search-form.search-visible {
opacity: 1;
height: 110px;
}
.search-form.search-form-permanent {
border-bottom: none;
height: 100px !important;
left: 0;
opacity: 1 !important;
padding: 0;
position: relative;
transform: none;
width: 100%;
z-index: 5;
}
.search-form.search-form-permanent .input-group {
padding: 0;
top: 0;
}
.search-form.search-form-permanent .button-search {
color: #33f;
outline: none;
}
.search-form.search-form-permanent .button-search:hover {
color: #b4c5cd;
}
.search-form .input-group {
margin-left: 18px;
position: relative;
width: 100%;
margin-top: 10px;
}
.search-form .form-control {
background: #fff;
border: none;
border-bottom: 1px #000 solid;
border-radius: 0;
box-shadow: none;
float: left;
height: auto;
padding: 0;
outline: none !important;
width: calc(100% - 36px) !important;
font-size: 50px;
font-family: 'freightlight';
font-style: italic;
text-transform: uppercase;
color: #000;
box-shadow: none !important;
border-color: inherit !important;
-webkit-box-shadow: none !important;
-webkit-font-smoothing: antialiased;
}
.search-form .form-control:focus {
background: #fff !important;
box-shadow: none !important;
border-color: inherit !important;
-webkit-box-shadow: none !important;
}
.search-form .button-search {
background: transparent;
border: none;
float: right;
font-size: 1.4em;
padding: 6px 0 0 0;
width: 36px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-icon"><img src="https://www.nature.org/cs/groups/webasset/documents/webasset/search-icon.png"></div>
<form role="search" method="get" class="search-form form-inline" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="input-group">
<input type="search" value="" name="s" class="input-sm search-field form-control" placeholder="Search">
<button type="submit" class="button-search icon-search"></button>
</div>
</form>
I create exit the search box by clicking anywhere else on the screen and keypress shortcut.
jQuery('.search-icon').on('click', function(e) {
e.stopPropagation();
jQuery('.search-form').toggleClass('search-visible');
});
$(window).bind('keydown', function(e) {
e.preventDefault()
var keyCode = e.keyCode || e.which;
if (keyCode == 117) {
$('.search-form').toggleClass('search-visible');
}
});
$(document).click(function() {
$('.search-form').removeClass('search-visible');
})
I'm trying to create a nav bar which consists of the regular navigation elements and an indication bar which is located below the current page. My goal is to make this bar move under whichever element the user hovers on and automatically resize itself according to a pre-defined size (according to the word length maybe?). I built the nav bar itself, but I'm kind of clueless how to achieve this effect. Should I always calculate the current position of the mouse and add the difference between the current location and the hover location? Regarding to the resizability, this is a secondary goal, less significant.
This is what I've done so far:
Html:
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples</li>
<li>bananas</li>
<li>tomatos</li>
<li>onions</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
CSS:
#nav_ul a{
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul{
display: inline-block;
list-style-type: none;
}
#nav_ul li{
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover{
color: #4ad1fd;
}
#container{
position: relative;
left: 167px;
height: auto;
width: 530px;
top: 5px;
}
#bar{
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
JSfiddle
Something like in this image:
You're trying to create a lavalamp menu, checkout the example below...
/* ---- reset ------*/
html, body, div, a {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1; }
/* --- basic styles ----*/
body {
font-family: "Unica One";
font-size: 1.5em;
background: #f2f2f2;
text-shadow: 0 1px 0 white; }
/* --- for this example ----*/
.nav {
text-align: center;
overflow: hidden;
margin: 2em auto;
width: 480px;
position: relative; }
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
.effect {
position: absolute;
left: -12.5%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%; }
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%; }
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%; }
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%; }
/* ----- line example -----*/
.ph-line-nav .effect {
width: 90px;
height: 2px;
bottom: 36px;
background: #c6342e;
box-shadow: 0 1px 0 white;
margin-left:-45px;
}
<div class="ph-line-nav nav">
Home
About
Gallery
Contact
<div class="effect"></div>
</div>
Find more here http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/
Here's a jQuery solution: (JSFiddle for if the code snippet doesn't work)
function BarMove(el) {
var bar = $('#bar');
var width = el.outerWidth();
var left = el.offset().left;
bar.animate({
width: width,
left: left
});
}
var Current = $('#nav_ul li a.current'); // Set the current page
BarMove(Current);
$('#nav_ul li a').hover(function () {
BarMove($(this));
}, function () {
BarMove(Current);
});
#nav_ul a {
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul {
display: inline-block;
list-style-type: none;
}
#nav_ul li {
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover {
color: #4ad1fd;
}
#container {
position: relative;
left: 0;
height: auto;
width: 530px;
top: 5px;
}
#bar {
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples
</li>
<li>bananas
</li>
<li>tomatos
</li>
<li>onions
</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
It's not exact, so you'll need to tweak the numbers but functionality is what you're after as far as I'm aware.
In your CSS, you have #nav_ul a:hover so you could add border-bottom-style: solid; border-color:<color> and you would have a bar appear under your items. It wouldn't slide, or be animated. It will, however, put a colored bar under what ever they are hovering over.