I am trying to build a slide down search box. I want the search box to slide down once your press the search icon. (I want it exactly like this - http://www.marieclaire.co.uk/). When it slides down I want it to be full width. I have started to build the actual search box, but I can't figure out how to get it to slide down from a search icon. Does anyone have any solutions?
jsfiddle - https://jsfiddle.net/zx06d7vz/ (search box at bottom of screen)
/*--------------------------------------------------------------
## Search
--------------------------------------------------------------*/
.search-site {
float: right;
font-size: 1.2em;
height: 50px;
line-height: 50px;
padding: 0 15px
}
.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;
left: 50%;
opacity: 0;
overflow: hidden;
padding-left: calc((100vw - 1200px) / 2);
padding-right: calc((100vw - 1200px) / 2);
position: absolute;
top: calc(100% + 1px);
transform: translateX(-50%);
width: 100vw;
z-index: 999999
}
.search-form.search-visible {
opacity: 1;
height: 200px
}
.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 {
padding: 0 10px;
position: relative;
top: 72px;
width: 100%
}
.search-form .form-control {
background: #fff;
border: none;
border-bottom: 1px #b4c5cd solid;
border-radius: 0;
box-shadow: none;
float: left;
height: auto;
padding: 0;
outline: none;
width: calc(100% - 36px) !important
}
.search-form .form-control:focus {
background: #fff !important
}
.search-form .button-search {
background: transparent;
border: none;
float: right;
font-size: 1.4em;
padding: 6px 0 0 0;
width: 36px
background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat;
}
<form role="search" method="get" class="search-form form-inline search-visible" action="">
<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>
Test that one.
HTML:
<h1 class="search">S</h1>
<form role="search" method="get" class="search-form form-inline" action="">
<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>
CSS
/*--------------------------------------------------------------
## Search
--------------------------------------------------------------*/
.search-site {
float: right;
font-size: 1.2em;
height: 50px;
line-height: 50px;
padding: 0 15px
}
.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;
left: 50%;
opacity: 0;
overflow: hidden;
padding-left: calc((100vw - 1200px) / 2);
padding-right: calc((100vw - 1200px) / 2);
position: absolute;
top: -100px;
transform: translateX(-50%);
width: 100vw;
z-index: 999999
}
.search-form.search-visible {
opacity: 1;
height: 200px;
top: 0;
}
.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 {
padding: 0 10px;
position: relative;
top: 72px;
width: 100%
}
.search-form .form-control {
background: #fff;
border: none;
border-bottom: 1px #b4c5cd solid;
border-radius: 0;
box-shadow: none;
float: left;
height: auto;
padding: 0;
outline: none;
width: calc(100% - 36px) !important
}
.search-form .form-control:focus {
background: #fff !important
}
.search-form .button-search {
background: transparent;
border: none;
float: right;
font-size: 1.4em;
padding: 6px 0 0 0;
width: 36px
background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat;
}
jQuery:
$('.search').on('click', function () {
$('.search-form').addClass('search-visible');
});
90% of my website is Mobile-Friendly (everything resizes and such), but for some reason my footer is being basically completely cut off on mobile.
The way I have it setup currently is exactly how I would like it to be setup. This is what it looks like on mobile:
$(function() {
$('.navigation .nav-toggle').on('click', function() {
$('.wrapper').toggleClass('open');
});
});
$(function() {
$('.navigation ul li .home a:not(.navigation .nav-toggle)').on('click', function() {
$('.navigation ul li').removeClass('active');
$(this).addClass('active');
});
});
$(function() {
$('.navigation ul li.home a').addClass('active');
});
body {
margin: 0;
padding: 0;
font-family: sans-serif;
align-items: center;
background: url("../images/bg.png") no-repeat;
background-size: cover;
}
html {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
.navigation {
width: 100%;
}
.navigation ul {
overflow: hidden;
color: white;
padding: 0;
text-align: right;
margin: 0;
margin-right: 15px;
}
.navigation ul li {
padding: 17px 12px;
display: inline-block;
}
.navigation ul li a {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
.navigation ul li a:hover {
color: #00D5C2;
}
.navigation ul li a {
text-decoration: none;
color: white;
font-size: 115%;
display: block;
}
.side-nav {
position: fixed;
width: 220px;
height: 150vh;
background-color: #2D2D2D;
transform: translateX(-100%);
transition: transform 0.4s ease;
}
.side-nav ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 0;
}
.side-nav ul li {
border-bottom: 1px solid gray;
border-width: 100%;
margin: 5px;
}
.outerwrapper {
height: 100vh;
display: block;
overflow-x: hidden;
position: relative;
}
.wrapper {
height: 100vh;
display: block;
transform: translateX(-100);
transition: transform 0.6s ease;
min-height: 100%;
position: relative;
}
.wrapper.open {
transform: translateX(220px);
background-color: rgba(84, 84, 84, 0.6);
}
.side-nav ul li a {
padding: 10px;
display: block;
color: gray;
text-decoration: none;
}
.side-nav ul li a:hover {
color: white;
text-decoration: none;
}
.side-nav.open {
transform: translateX(0);
}
.navigation .nav-toggle {
display: none;
float: left;
padding: 20px 30px 20px 30px;
cursor: pointer;
}
.footer {
margin-top: -5em;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(237, 237, 237, 0.2);
position: relative;
height: 70px;
z-index: -1;
}
.footerinfo {
margin-top: 20px;
}
.footerinfo p {
vertical-align: middle;
padding: 25px;
color: white;
text-align: center;
;
}
.navigation ul li a.active {
color: #00F0DB;
}
#logo img {
max-width: 100%;
height: auto;
width: auto\9;
display: block;
margin: 0 auto;
}
.footerlogo img {
margin-bottom: -65px;
margin-left: auto;
margin-right: auto;
}
.about-btn {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
-webkit-transition: border-color 0.4s;
-moz-transition: border-color 0.4s;
-ms-transition: border-color 0.4s;
-o-transition: border-color 0.4s;
transition: border-color 0.4s;
font-size: 135%;
text-transform: uppercase;
text-decoration: none;
vertical-align: middle;
width: auto;
display: block;
}
.about-btn a {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
-webkit-transition: border-color 0.4s;
-moz-transition: border-color 0.4s;
-ms-transition: border-color 0.4s;
-o-transition: border-color 0.4s;
transition: border-color 0.4s;
color: #3A9DA4;
border-radius: 9px;
padding: 10px 20px;
border: solid #3A9DA4 3px;
text-decoration: none;
font-size: 20px;
transition: all 0, 4s;
}
.about-btn li {
list-style-type: none;
margin: auto;
align-items: center;
width: 50%;
text-align: center;
}
.about-btn a:hover {
border-color: white;
color: white;
text-decoration: none;
font-size: 20px;
transition: scale(1, 1)
}
#media screen and (max-width: 700px) {
.navigation ul li {
display: none;
}
.navigation .nav-toggle {
display: inline;
}
.about-btn a {
font-size: 15px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outerwrapper">
<div class="wrapper">
<div class="side-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Repo</li>
<li>Code</li>
<li class="pluginrequests">Request Plugin</li>
</ul>
</div>
<div class="navigation">
<ul>
<li class="nav-toggle">☰</li>
<li class="home">Home</li>
<li class="repo">Repo</li>
<li class="pluginrequests">Request Plugin</li>
</ul>
</div>
<div id="logo">
<img src="images/logo.png" alt="Squallz Logo">
</div>
<div class="about-btn">
<li>About Me</li>
</div>
</div>
<div class="footer">
<div class="footerinfo">
<p>Copyright Squallz 2017. Personal website by <b>Squallz</b></p>
</div>
</div>
</div>
Try adding this in your css and view again in your mobileL
.outerwrapper {
height: 100%!important;
}
You need to set the css of the footer class to:
z-index: 999 !important;
position: fixed !important;
bottom:0 !important;
background-color: rgba(237, 237, 237, 0.2);
I am attempting to ease in/out a white background and bottom border to the navigation bar on scroll when the bottom of panel 1 hits the top of the page. However the animation is occurring to the navigation inside the toggle menu. I'm guessing this is because I have the class "bg navfade" placed incorrectly????
https://jsfiddle.net/5ry7wjx5/
CSS:
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a{
appearance: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: #000000;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
a:focus, a:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}
a:active {
color: #484747;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: #545454;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation background transition*/
.bg {
background: #fff;
width: 100%;
left:0;
border-bottom: 0.5px solid rgba(0,0,0,.2);
opacity: 0;
}
.show {
opacity: 0.4;
}
.navfade {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.down {
top: 150px;
}
.up {
top: 1800px;
}
/*----/----navigation background transition*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
/*background: none;*/
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 0.5px solid rgba(0,0,0,.2);
border-top: 0.5px solid rgba(0,0,0,.2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav li{
display: inline-block;
padding: 30px;
}
#navigation{
padding-top: 40px;
padding-bottom: 40px;
background: #ffffff;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo{
border-top: 0.5px solid rgba(0,0,0,.2);
padding-top: 10px;
padding-bottom: 10px;
background: #ffffff;
}
#instagram{
display: inline-block;
appearance: none;
width:120px;
height:50px;
font-size:1.05em;
background: transparent;
color: #464c4c;
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
#instagram:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}
.nav > li:hover {
left: 0;
padding-top: 0.6em;
padding-bottom: 1em;
cursor:pointer;
list-style-type: none;
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0,0,0,.2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 50%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/*Panels*/
.panel {
width: 100%;
color: #adadad;
height: 15em;
padding: 7em;
box-sizing: border-box;
background: #ffffff;
border-top: 0.5px solid rgba(0,0,0,.2);
text-align: center;
}
#panel1 {
background: #b8b8b8;
height: 30em;
}
.links{
color: #adadad;
}
/*----/----Panels*/
/****landscape****/
#media only screen and (max-width: 555px) {
.nav li{
display: block;
padding: 30px;
}
}
/*----/----Landscape*/
jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/*navigation icon animation*/
var trigger='X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger='X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger=='X')
{
$("#toggle-menu").toggleClass();
trigger='ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*navigation background fade in fade out */
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('.bg').addClass('show');
} else {
$('.bg').removeClass('show');
};
});
$('.scroll').on('click', function(e){
e.preventDefault()
$('html, body').animate({
scrollTop : $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */
});
</script>
HMTL:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path style="fill:#545454;" d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div id="navigation">
<div class="bg navfade"> </div>
<ul>
<li class="navlist">Home</li>
<li class="navlist">About</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
</li><input type='submit' id="instagram" value="instagram"> </li>
</ul>
</div>
</div>
</div>
<div class="maincontent">
<div class="panel" id="panel1">
<div id="hero">
</div>
<div id="scroll">
<span class="arrow-bounce"><svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
<path d="M0-.75h24v24H0z" fill="none"/>
</svg></span>
</div>
</div>
<div class="panel down" id="panel2">
<div class="inner">
Work Title 1
</div>
</div>
<div class="panel" id="panel3">
<div class="inner">
Work Title 2
</div>
</div>
Working JSFiddle
First you'll need to remove the .navfade and .bg classes from your HTML.
Change your .bg CSS to this:
CSS
.bg {
background-color: #fff !important;
border-bottom: 5px solid rgba(0, 0, 0, 0.2);
}
Remove this Javascript
if ($(window).scrollTop() > 100 ) {
$('.bg').addClass('show');
}
else {
$('.bg').removeClass('show');
};
Replace with this
var dist = $('#panel2').offset().top;
console.log(dist);
if ($(window).scrollTop() > dist) {
$('.header').addClass('bg');
$('.header').addClass('navfade');
}
else {
$('.header').removeClass('bg');
}
The dist variable calculates the distance from the top of the page to the end of the panel 1 section. This is the perfect time to add the .bg class and it works on any sized window/browser/etc.
I have a responsive navigation menu, it works as follows: when you resize the window the 'hamburger' (three lines) an icon appears. Clicking this icon makes the menu appear and the icon becomes an 'X' icon by transforming. Clicking the 'X' makes the menu disappear and the icon become three lines again.
It works perfectly in Safari and Firefox, however it doesn't in Chrome.
It makes the transformation of three lines to 'X' and viceversa but the menu never appears.
Why is that?
Here's the code:
HTML:
<nav>
<label for="show-menu" class="show-menu">
<button class="show-menu button-toggle-navigation">
<span>Toggle Navigation</span>
</button>
</label>
<input type="checkbox" id="show-menu" role="button">
<ul>
<li>Conóceme</li>
<li>Servicios</li>
<li>Portfolio</li>
<li>Contacto</li>
</ul>
</nav>
[...]
<script type="text/javascript">
$('button').on('click', function() {
$(this).toggleClass('isActive');
});
</script>
CSS:
/*Style 'show menu' label button and hide it by default*/
.show-menu {
float: right;
width: 0;
height: 0;
text-align: right;
display: none;
margin-right: 15%;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ ul{
border-top-color: black;
float: right;
text-align: center;
display: block;
padding-top: 15%;
}
.button-toggle-navigation {
background-color: transparent;
border: 0;
border-bottom: 0.25em solid black;
border-top: 0.25em solid black;
font-size: 13px;
cursor: pointer;
height: 1.5em;
margin: .75em .375em;
outline: 0;
position: relative;
-webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
transition: border-color 150ms ease-out, transform 150ms ease-out;
width: 2.25em;
}
.button-toggle-navigation::after, .button-toggle-navigation::before {
border-bottom: 0.25em solid black;
bottom: .375em;
content: '';
height: 0;
left: 0;
position: absolute;
right: 0;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.button-toggle-navigation span {
color: transparent;
height: 0;
width: 0;
overflow: hidden;
position: absolute;
}
.isActive {
border-color: transparent;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.isActive::after, .isActive::before {
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.isActive::before {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
Thanks a lot for your help!
P.S: If you could tell me a better way to do this responsive menu, I'd appreciate it! Thanks! :)
Sure!
This is how I solved the problem:
HTML
<nav>
<label for="show-menu"xs class="show-menu">
<button id="pull" class="show-menu button-toggle-navigation"></button>
</label>
<ul>
<li>Conóceme</li>
<li>Servicios</li>
<li>Portfolio</li>
<li>Contacto</li>
</ul>
</nav>
JS
<script type="text/javascript">
var menu = $("nav ul");
$('#pull').on('click', function() {
$(this).toggleClass('isActive');
menu.slideToggle(200);
});
</script>
CSS
/*Style 'show menu' label button and hide it by default*/
.show-menu {
margin-top: 7%;
float: right;
display: block;
}
.button-toggle-navigation {
background-color: transparent;
border: 0;
border-bottom: 0.16em solid black;
border-top: 0.16em solid black;
font-size: 1em;
cursor: pointer;
height: 1.2em;
margin: .75em .375em;
outline: 0;
position: relative;
-webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
transition: border-color 150ms ease-out, transform 150ms ease-out;
width: 2.25em;
}
.button-toggle-navigation::after, .button-toggle-navigation::before {
border-bottom: 0.16em solid black;
bottom: .375em;
content: '';
height: 0;
left: 0;
position: absolute;
right: 0;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive {
border-color: transparent;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.isActive::after, .isActive::before {
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.isActive::before {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
if you non't hide your button with CSS, the code is working perfectly:
.show-menu {
float: right;
text-align: right;
margin-right: 15%;
}
http://jsfiddle.net/4towu13r/
better if you use the -webkit-, -moz, -o- transition prefixes to.
UPDATE:
explanation: somehow chrome unable to activate <button> inside the <label>, if you click only on <label> the checkbox is checked and do the job. Here is a jQuery workaround to do the job:
checkbox=$('input[role=button]');
checkbox.prop('checked', !checkbox.prop('checked'));
working code: http://jsfiddle.net/eapo/4towu13r/3/
I'm trying to vertically center the nav panel responsively, so that it is centered on all screens that are ~940px and up. I found this article CSS-Tricks but I have been unable to implement this with my current code effectively.
html
<body>
<!-- Header -->
<div class="header">
<i id="nav-button" class="fa fa-2x fa-navicon"></i>
<header class="logo">
<img src="../Assets/images/logo.png" alt="">
</header>
<i id="account-control" class="fa fa-2x fa-user"></i>
</div>
<!-- Content Wrapper-->
<div class="wrapper">
<!-- Content -->
<div id="content">
</div>
<!-- Collapsible Menu -->
<div id="nav-sidebar">
<div class="nav-items">
<nav class="mainmenu">
<ul>
<li class="active"><i class="fa fa-dashboard" alt="Dashboard"></i></li>
<li><i class="fa fa-dollar" alt="Billing"></i></li>
<li><i class="fa fa-support" alt="Support"></i></li>
<li><i class="fa fa-cubes" alt="Servers"></i></li>
<li><i class="fa fa-cogs" alt="Settings"></i></li>
<li><i class="fa fa-bar-chart-o" alt="Reports"></i></li>
</ul>
</nav>
</div>
</div>
</div>
css
/* Core */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: block;
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
ul {
margin: 0;
padding: 0;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-padding-start: 0px;
}
.wrapper {
position: fixed;
width: 100%;
height: 100%;
top: 75px;
z-index: 0;
}
#content {
position: relative;
left: 0;
z-index: 0;
height: 100%;
overflow: auto;
}
/* Header */
.header {
background-color: white;
width: 100%;
height: 75px;
position: absolute;
top: 0;
z-index: 2;
box-shadow: 1px 0 1px #bdc3c7;
}
#nav-button {
color: #555c60;
position: absolute;
left: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#nav-button.nav-button-open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#account-control {
color: #555c60;
position: absolute;
right: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
/* Navigation Sidebar */
#nav-sidebar {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
width: 80px;
background: none;
opacity: 1;
z-index: 1;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
#nav-sidebar:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
content: '';
opacity: 1;
}
#nav-sidebar:before {
content: '';
height: 100%;
vertical-align: middle;
}
.nav-sidebar-open #nav-sidebar {
visibility: visible;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
-webkit-transition-speed: 0.2s;
-moz-transition-speed: 0.2s;
transition-speed: 0.2s;
}
.nav-sidebar-open #nav-sidebar:after {
width: 0;
height: 0;
opacity: 0;
}
.nav-items {
position: relative;
box-shadow: 1px 1px 1px #bdc3c7;
vertical-align: middle;
}
.mainmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mainmenu ul li {
display: block;
text-align: center;
}
.mainmenu ul li a {
position: relative;
display: inline-block;
color: #555c60;
text-decoration: none;
font-size: 18px;
line-height: 80px;
height: 80px;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
-webkit-transition-property: color,text;
-webkit-transition-duration: .3s, .3s;
-webkit-transition-timing-function: linear, ease-in-out;
-moz-transition-property: color,text;
-moz-transition-duration: .3s;
-moz-transition-timing-function: linear, ease-in-out;
-o-transition-property: color,text;
-o-transition-duration: .3s, .3s;
-o-transition-timing-function: linear, ease-in-out;
}
.mainmenu ul li a:hover, .mainmenu ul li a:active {
background: #3498db;
color: white;
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
-webkit-transition-property: color,text;
-webkit-transition-duration: .3s, .3s;
-webkit-transition-timing-function: linear, ease-in-out;
-moz-transition-property: color,text;
-moz-transition-duration: .3s;
-moz-transition-timing-function: linear, ease-in-out;
-o-transition-property: color,text;
-o-transition-duration: .3s, .3s;
-o-transition-timing-function: linear, ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.mainmenu ul li a:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.mainmenu ul li a:last-child {
border-bottom: none;
}
.mainmenu ul li a i {
margin: 20px;
}
js
jQuery(document).ready(function($) {
/* Sidebar */
$('#nav-button').click(function() {
$('#nav-button').toggleClass('nav-button-open');
$('body').toggleClass('nav-sidebar-open');
return false;
});
});(jQuery);
P.S. (Don't be afraid of 190 lines of CSS, ~90 lines are CSS transitions that you can ignore.)
Also, here is the jsFiddle for you to play around with. Thank you so much for your help ahead of time.
I am guessing it's the panel that slides out you want to be vertically aligned to the height of the view port if the view port is 940px or wider. I was unsure about other things and so I managed to achieve this but I had to clean it up a bit. Feel free to use parts you need and discard the other. It's not ever a good idea to position:fix the wrapper, not sure why you did this. Also don't know why you had a display:block on the body.
DEMO: http://jsbin.com/zaguzo/1
Same html, same jQuery
You may also want to add a min-height, this is a demo of that: http://jsbin.com/wegow/1
The most relevant is the following but many other things need to be adjusted as well:
/* --- added --- */
#media (min-width:940px) {
#nav-sidebar {
top: 50%;
margin-top: -213px;
/*height of total of this div by 2 minus 1/2 height of header */
}
}
CSS
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
margin: 0; /* -- added -- */
padding: 0; /* -- added -- */
}
body {
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
ul {
margin: 0;
padding: 0;
}
/* -- wrapper not needed .wrapper {} -- */
#content {
position: relative;
z-index: 0;
padding:95px 20px 20px 20px;
transition: padding .5s ease-in-out;
}
.nav-sidebar-open #content {padding-left:100px;}
/* Header */
.header {
background-color: white;
height: 75px;
position: absolute;
top: 0;
z-index: 2;
box-shadow: 1px 0 1px #bdc3c7;
width: 100%;
}
#nav-button {
color: #555c60;
position: absolute;
left: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#nav-button.nav-button-open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.logo {
position: absolute;
top: 50%;
left: 50%;
}
#account-control {
color: #555c60;
position: absolute;
right: 40px;
top: 35%;
}
/* Navigation Sidebar */
#nav-sidebar {
position: fixed;
top:75px;
left: -88px;
width: 80px;
background: none;
z-index: 1;
transition: all .5s ease-in-out;
}
.nav-sidebar-open #nav-sidebar {
left:0;
}
.nav-items {
position: relative;
box-shadow: 1px 1px 1px #bdc3c7;
}
.mainmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mainmenu ul li {
display: block;
text-align: center;
}
.mainmenu ul li a {
position: relative;
display: block;
color: #555c60;
text-decoration: none;
font-size: 18px;
line-height: 80px;
height: 80px;
width: 100%;
background:#fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
/* --- added --- */
#media (min-width:940px) {
#nav-sidebar {
top: 50%;
margin-top: -213px;
/*height of total of this div by 2 minus 1/2 height of header */
}
}