Animated menu is opened in background - javascript

I have a problem with animated menu.
<header role="banner">
<a class="nav-btn">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
</header>
<nav role="navigation" class="site-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
css
#import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
#keyframes fadeInLeft {
0% {
transform:translateX(-100%);
}
100% {
transform:translateX(0);
}
}
#keyframes fadeInRight {
0% {
transform:translateX(100%);
}
100% {
transform:translateX(0);
}
}
.nav-btn {
display:inline-block;
float:right;
position:relative;
top:5px;
cursor:pointer;
transition:all 0.5s ease;
right:0;
}
.bar {
display:block;
height:5px;
width:35px;
background-color:#111;
margin-top: 6.5px;
transition:all 0.5s ease;
&:nth-of-type(1) {
margin-top:0;
}
}
.b-open {
&:nth-of-type(1){
transform:rotate(-45deg);
transform-origin: right top;
}
&:nth-of-type(2){
opacity:0;
}
&:nth-of-type(3){
transform:rotate(45deg);
transform-origin:right bottom;
}
}
.site-nav {
opacity:0;
position:absolute;
right:0;
top:160px;
left:0;
bottom:0;
text-align: center;
font-weight: 700;
transition:all 0.5s ease;
li {
background-color:rgba(#fff, 0.8);
transition:all 0.5s ease;
}
a {
display:block;
text-decoration: none;
color:#111;
text-transform: uppercase;
transition:all 0.5s ease;
padding:40px;
margin:0 30%;
border-top:1px dashed lighten(#111, 60%);
}
}
.nb-open {
transform:rotate(-180deg);
right:50%;
margin-right:-23.5px;
}
.sn-open {
opacity:1;
li:nth-of-type(odd) {
a { animation:fadeInLeft 0.5s ease; }
}
li:nth-of-type(even) {
a { animation:fadeInRight 0.5s ease; }
}
}
JS
$(".nav-btn").click(function(){
$(this).toggleClass("nb-open");
$(".site-nav").toggleClass("sn-open");
$(".bar").toggleClass("b-open");
});
This menu is opened in background. It is hidden, but the mouse cursor "see" as if it was open.
How do I change it ?
it is menu from codepin http://codepen.io/emcarru/pen/bxehd


Instead of toggling the visibility using the opacity property, why not use the display: none; property instead?
New CSS (notice the new 'hidden' class):
#import url(http://fonts.googleapis.com/css?family=Roboto:400, 700);
#keyframes fadeInLeft {
0% {
transform:translateX(-100%);
}
100% {
transform:translateX(0);
}
}
#keyframes fadeInRight {
0% {
transform:translateX(100%);
}
100% {
transform:translateX(0);
}
}
.nav-btn {
display:inline-block;
float:right;
position:relative;
top:5px;
cursor:pointer;
transition:all 0.5s ease;
right:0;
}
.bar {
display:block;
height:5px;
width:35px;
background-color:#111;
margin-top: 6.5px;
transition:all 0.5s ease;
&:nth-of-type(1) {
margin-top:0;
}
}
.b-open {
&:nth-of-type(1) {
transform:rotate(-45deg);
transform-origin: right top;
}
&:nth-of-type(2) {
opacity:0;
}
&:nth-of-type(3) {
transform:rotate(45deg);
transform-origin:right bottom;
}
}
.site-nav {
position:absolute;
right:0;
top:160px;
left:0;
bottom:0;
text-align: center;
font-weight: 700;
transition:all 0.5s ease;
li {
background-color:rgba(#fff, 0.8);
transition:all 0.5s ease;
}
a {
display:block;
text-decoration: none;
color:#111;
text-transform: uppercase;
transition:all 0.5s ease;
padding:40px;
margin:0 30%;
border-top:1px dashed lighten(#111, 60%);
}
}
.nb-open {
transform:rotate(-180deg);
right:50%;
margin-right:-23.5px;
}
.sn-open {
li:nth-of-type(odd) {
a {
animation:fadeInLeft 0.5s ease;
}
}
li:nth-of-type(even) {
a {
animation:fadeInRight 0.5s ease;
}
}
}
.hidden {
display: none;
}
New HTML (hidden class is applied by default to menu):
<header role="banner"> <a class="nav-btn">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
</header>
<nav role="navigation" class="site-nav hidden">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Clients
</li>
<li>Contact Us
</li>
</ul>
</nav>
New JS (the hidden class is toggled):
$(".nav-btn").click(function () {
$(this).toggleClass("nb-open");
$(".site-nav").toggleClass("sn-open").toggleClass("hidden");
$(".bar").toggleClass("b-open");
});
JSFiddle demo here.

Related

Javascript mouseout if got id show, if not write "no id"

I've got 2 divs with two different id ;
mainid
infoid
I need that when I mouseout #mainid div innerHTML text on #infoid with first divs would show up.
Full code
function myFunction() {
var x = document.getElementById("dom").id;
document.getElementById("info").innerHTML = x;
}
html, body {height:100%;
margin:0;
padding:0;}
h2, h3 {
margin:0px;
text-align:center;
padding-top:25px;
}
.cc:nth-child(odd) .first-line {background-color: #CCC;
color:red;}
p {text-align:center;
margin:0;
padding:5px;
color:#fff;}
.box5 {text-align:center;
}
.box5 .first-line {
padding:0px;
margin:0px;
}
.box5 .second-line {
padding:0px;
margin:0px;
}
.box5 img {
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
padding-left:10px;
margin:5px;
border: 3px solid #0B0B3B;
outline:3px solid #F4FA58;
display:inline-block;
}
.imgs {width:50px;height:50px;}
#media screen and (min-width: 769px){
.box1 {height:50%;
width:30%;
float:left;
background-color:#81DAF5;}
.box2 {height:10%;
width:70%;
float:right;
background-color:#81F781;}
.box3 {height:20%;
width:15%;
float:left;
background-color:#5858FA;}
.box4 {height:20%;
width:55%;
float:right;
background-color:#F4FA58;}
.box5 {height:20%;
width:70%;
float:right;
background-color:#FAAC58;}
.box6 {height:40%;
width:15%;
float:left;
background-color:#A0522D;}
.box7 {height:40%;
width:35%;
float:left;
background-color:#FA5858;}
.box8 {height:40%;
width:50%;
float:right;
background-color:#fff;}
.box9 {height:10%;
width:100%;
float:left;
background-color:#000;}
}
#media screen and (max-width: 768px) {
.box2:hover {
animation-name:scale;
-webkit-animation-name: scale;
-webkit-animation: scale 0.5s linear infinite;
-webkit-animation-duration: 0.5s;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
#-webkit-keyframes scale {
from {
webkit-transform:scale(1)
}
to {
webkit-transform:scale(0);
webkit-background-color:red;
}
}
#keyframes scale {
from {
transform:scale(1)
}
to {
transform:scale(0);
background-color:red;
}
}
.box5:hover {
animation-name:rotate;
-webkit-animation-name: rotate;
-webkit-animation: rotate 0.5s linear infinite;
-webkit-animation-duration: 0.5s;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
#-webkit-keyframes rotate{
from {
webkit-transform:rotatex(0deg);
}
to {
webkit-transform:rotatex(360deg);
}
}
#keyframes rotate {
from {
transform:rotatex(0deg);
}
to {
transform:rotatex(360deg);
}
}
.box3 h3 {
animation-name:scaletext;
-webkit-animation-name: scaletext;
-webkit-animation: scaletext 0.5s linear infinite;
-webkit-animation-duration: 0.5s;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
#-webkit-keyframes scaletext{
from {
0% {webkit-font-size:12px;}
25% {webkit-font-size:8px;}
50% {webkit-font-size:16px;}
100% {webkit-font-size:11px;}
}
}
#keyframes scaletext {
0% {font-size:12px;}
25% {font-size:8px;}
50% {font-size:16px;}
100% {font-size:11px;}
}
.box1 {height:50%;
width:50%;
float:left;
background-color:#81DAF5;}
.box2 {height:10%;
width:50%;
float:right;
background-color:#81F781;}
.box3 {height:20%;
width:50%;
float:left;
background-color:#5858FA;}
.box4 {
display:none;
height:0px;
width:0px;}
.box5 {height:20%;
width:50%;
float:right;
background-color:#FAAC58;}
.box6 {display:none;}
.box7 {height:40%;
width:20%;
float:left;
background-color:#FA5858;}
.box8 {height:40%;
width:80%;
float:right;
background-color:#fff;}
.box9 {height:10%;
width:100%;
float:left;
background-color:#000;}
}
<div class="box1 cc" id="info">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>
<div class="box2 cc">
<h3 class="first-line">Pirma eilutė</h2>
</div>
<div class="box3 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>
<div class="box4 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>
<div class="box5 cc">
<img class="imgs">
<img class="imgs">
<img class="imgs">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>
<div class="box6 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>
<div class="box7 cc" id="dom" onmouseout='myFunction()'>
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="second-line">Antra eilutė</h3>
</div>
<div class="box8 cc">
<h3 class="first-line">Pirma eilutė</h2>
<h3 class="first-line">Antra eilutė</h3>
</div>
<div class="box9 cc">
<h3 style="color:#fff;" class="first-line">Pirma eilutė</h2>
The problem is that I can't make something that would write if there is no id.
Maby someone can help me making if else statement in this javascript ?
If got div {code}
Else {write : no id}

function mouseOutFunc(element) {
document.getElementById('info').innerHTML = element.id || "No Id";
}
<div id="info"></div>
<div id="div1" onmouseout="mouseOutFunc(this)">ONE</div>
<div id="div2" onmouseout="mouseOutFunc(this)">TWO</div>
<div onmouseout="mouseOutFunc(this)">NO ID</div>
Try this

Why must I click twice to open and close my menu

Hello I got a situation which I do not understand quite well. I have the following setup:
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$(this).toggleClass('act');
if($(this).hasClass('act')) {
$('.mobileMenu').addClass('act');
//$('body').addClass('positionfixed');
}
else {
$('.mobileMenu').removeClass('act');
//$('body').removeClass('positionfixed');
}
});
});
.mobile-menu-button{
display:block;
position:fixed;
top:20px;
left:20px;
z-index:99;
background-color:#19b698;
padding:5px 10px;
color:#fff;
font-family: Open Sans;
font-weight:bold;
}
.mobile-menu-button i{
font-size:26px;
background-color:#00adee;
padding:5px 10px;
color:#fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow:hidden;
}
.mobileMenu img{
max-width:90%;
margin:0 auto;
margin-top:20px;
margin-bottom:10px;
border-bottom:1px dotted #717274;
padding-bottom:20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display:block !important;
}
.mobileMenu ul {
display: block;
vertical-align: middle;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<span class="mobile-menu-button menuBtn">Close</span>
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
Why should I press two times on the open / close button to open / close the menu?
Anyone any idea / fix?

The problem is that you checking for .act on the button instead of the menu. There are two buttons so you need to toggle twice.
Changing:
$(this).toggleClass('act');
if($(this).hasClass('act')) {
to
$('.mobileMenu').toggleClass('act');
if($('.mobileMenu').hasClass('act')) {
fixes it:
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$('.mobileMenu').toggleClass('act');
if($('.mobileMenu').hasClass('act')) {
$('.mobileMenu').addClass('act');
//$('body').addClass('positionfixed');
}
else {
$('.mobileMenu').removeClass('act');
//$('body').removeClass('positionfixed');
}
});
});
.mobile-menu-button{
display:block;
position:fixed;
top:20px;
left:20px;
z-index:99;
background-color:#19b698;
padding:5px 10px;
color:#fff;
font-family: Open Sans;
font-weight:bold;
}
.mobile-menu-button i{
font-size:26px;
background-color:#00adee;
padding:5px 10px;
color:#fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow:hidden;
}
.mobileMenu img{
max-width:90%;
margin:0 auto;
margin-top:20px;
margin-bottom:10px;
border-bottom:1px dotted #717274;
padding-bottom:20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display:block !important;
}
.mobileMenu ul {
display: block;
vertical-align: middle;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<span class="mobile-menu-button menuBtn">Close</span>
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>

May I offer a solution where you have a single button controlling the display of the menu instead of two buttons?
Main changes were to increase the z-index of .mobile-menu-button so it's always on top of your menu and to check in the text value of the button and decide whether to open or close it. You could also check if the menu has .act on it instead of checking the text of the button; tomayto, tomahto.
$( document ).ready( function () {
var $mobileMenu = $( '.mobileMenu' );
$('.menuBtn').on( 'click touch', function () {
var $this = $( this ),
isOpen = 'Close' === $this.text();
$this.text( isOpen ? 'Open' : 'Close' );
$mobileMenu.toggleClass( 'act', !isOpen );
} );
} );
.mobile-menu-button {
display: block;
position: fixed;
top: 20px;
left: 20px;
z-index: 105;
background-color: #19b698;
padding: 5px 10px;
color: #fff;
font-family: Open Sans;
font-weight: bold;
cursor: pointer;
}
.mobile-menu-button i {
font-size: 26px;
background-color: #00adee;
padding: 5px 10px;
color: #fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow: hidden;
}
.mobileMenu img {
max-width: 90%;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 10px;
border-bottom: 1px dotted #717274;
padding-bottom: 20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display: block !important;
}
.mobileMenu ul {
display: block;
list-style: none;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
I also added list-style: none; to .mobileMenu ul as I noticed some bullet points. I'm assuming you didn't want those.
Why Two Clicks?
As far as why you had to click twice, you were using toggleClass() on two different buttons to open/close the menu. The first button (Open) would get .act added and the menu would show. Now we're seeing the second button (Close) which doesn't have .act yet, so you click it and toggleClass() adds .act to it (instead of removing .act from the first button (Open) like you might have been expecting). Since a button needs .act on it to hide the menu, you now need to click the second button (Close) a second time to for toggelClass() to remove .act and hide the menu. Now the first button (Open) is shown, which still has .act. But clicking it removes .act, thus necessitating one more click to add .act back to the button and now the menu can be show because the button has .act.
It's more simple to use a single button.

You should use below jQuery code instead of using yours::
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$(this).toggleClass('act');
if(!$('.mobileMenu').hasClass('act')) {
$('.mobileMenu').addClass('act');
//$('body').addClass('positionfixed');
}
else {
$('.mobileMenu').removeClass('act');
//$('body').removeClass('positionfixed');
}
});
});
Working URL:: https://jsfiddle.net/Lxz9v34L/2/

You have 2 .menuBtn.
You could simplify your code to something like this:
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$('.mobileMenu').toggleClass('act');
$(this).text($(this).text() === 'Open' ? 'Close' : 'Open')
});
});
.mobile-menu-button{
display:block;
position:fixed;
top:20px;
left:20px;
z-index:101;
background-color:#19b698;
padding:5px 10px;
color:#fff;
font-family: Open Sans;
font-weight:bold;
cursor: pointer;
}
.mobile-menu-button i{
font-size:26px;
background-color:#00adee;
padding:5px 10px;
color:#fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow:hidden;
}
.mobileMenu img{
max-width:90%;
margin:0 auto;
margin-top:20px;
margin-bottom:10px;
border-bottom:1px dotted #717274;
padding-bottom:20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display:block !important;
}
.mobileMenu ul {
display: block;
vertical-align: middle;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>

$(this).toggleClass('act');
to
$('.menuBtn').toggleClass('act');
because this will return the only span which is clicked not other. Hence it is not going toggle class on both div.
please find working snippet below
$(document).ready(function(){
$('.menuBtn').on('click touch', function () {
$('.menuBtn').toggleClass('act');
if($(this).hasClass('act')) {
$('.mobileMenu').addClass('act');
//$('body').addClass('positionfixed');
}
else {
$('.mobileMenu').removeClass('act');
//$('body').removeClass('positionfixed');
}
});
});
.mobile-menu-button{
display:block;
position:fixed;
top:20px;
left:20px;
z-index:99;
background-color:#19b698;
padding:5px 10px;
color:#fff;
font-family: Open Sans;
font-weight:bold;
}
.mobile-menu-button i{
font-size:26px;
background-color:#00adee;
padding:5px 10px;
color:#fff;
}
.mobileMenu {
background-color: #fff !important;
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100vh;
width: 100vw;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
overflow:hidden;
}
.mobileMenu img{
max-width:90%;
margin:0 auto;
margin-top:20px;
margin-bottom:10px;
border-bottom:1px dotted #717274;
padding-bottom:20px;
}
.mobileMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mobileMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
display:block !important;
}
.mobileMenu ul {
display: block;
vertical-align: middle;
}
.mobileMenu li {
padding: 10px 0 !important;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mobileMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mobileMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mobileMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mobileMenu a {
color: #00adee !important;
display: inline-block;
font-size: 18px;
}
.mobileMenu a.suBtn {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
<span class="mobile-menu-button menuBtn">Close</span>
<ul>
<li>Home</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>

In fact, there are two buttons (1 for open, 1 for close).
The 1 first click on "open" works, but then, it doesn't because the close button does not have the act class.
I think you should toggle class on both :
$('.menuBtn').on('click touch', function () {
**$('.menuBtn')**.toggleClass('act');
...
}

Using % as height for grid system

Guys im having big problems with a site i created i can't get heights in % to make everything equal. Instead i used px and i feel like it is inadequate. I tried changing all the items to % but the div collapse to the containing elements and don't actually use the % of space given. I have sectioned my page into 2 part with a couple of rows in each and i can't set the row height in % only in px it works. any ideas? i will upload the parts of the script here and the rest of Jfiddle.
HTML:
<div class="table-container">
<div class="table-block footer-push"><!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row header">
<div class="one columns"><input class="bbar" placeholder="search"></div>
<div class="eleven columns person"><span><a>Rajat Sharma</a><i class="fa fa-angle-down fa-fw op"></i></span> <img class="loginimg" src="logout.png"></div>
</div>
<div class="row">
<div class="twelve column">
<div class="pbox"><img alt="Paragon" class="pimg" src="paragon_sqaure.png"></div>
</div>
</div>
<div class="row">
<div class="ten columns PP"><a>Paragon Portal</a></div>
<div class="two columns PP"><input class="more-button" type="button" value="MORE..."></div>
</div>
</div>
<!-- end primary div.container --></div>
<!-- end primary div.table-block -->
<div class="table-block cont">
<div class="container">
<footer class="twelve columns" id="footer">
<div class="four columns steps">
<div class="active-cases"><a>Active Cases</a></div>
<div class="newcomments"><a>New Comments</a></div>
<div class="active-open-cases"><a>Active Open Cases</a></div>
<div class="newcomments2"><a>New Comments</a></div>
<div class="stats">
<div class="guages">
<div class="c100 p12 small dark orange"><span>90</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="c100 p12 small dark green"><span>20</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="c100 p12 small dark"><span>12%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
<div class="four columns jonarand">
<div class="box1">
<figure><img src="http://www.npnrmanagement.com/Portal/img/White%20jonar%20logo.png">
<figcaption>Jonar & You</figcaption>
</figure>
</div>
<div class="box2">
<figure><img src="http://www.npnrmanagement.com/Portal/img/person%20(1).png">
<figcaption>Customer & You</figcaption>
</figure>
</div>
<div class="box3">
<figure><img src="http://www.npnrmanagement.com/Portal/img/Community%20Icon%20(1).png">
<figcaption>Paragon Community</figcaption>
</figure>
</div>
<div class="box4">
<figure><img src="http://www.npnrmanagement.com/Portal/img/White%20Paragon%20Logo.png">
<figcaption>Paragon Software</figcaption>
</figure>
</div>
</div>
<div class="four columns menuitem">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
</div>
</footer>
</div>
<!-- end footer div.container -->
<!-- end footer div.table-block --></div>
</div>
the part of the css that pertains to this problem:
html, body {
height: 100%
}
.table-container {
display: table;
height: 100%;
width: 100%;
}
.table-block {
display: table-row;
height: 1px;
}
.footer-push {
height: 50%;
}
#footer {
/* Placeholder footer styles */
}
.cont { height: 50%;}
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box; }
/* For devices larger than 400px */
#media (min-width: 400px) {
.container {
width: 100%;
padding: 0; }
}
/* For devices larger than 550px */
#media (min-width: 550px) {
.container {
width: 100%; }
.column,
.columns {
margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0; }
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 33.33333333333333%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
/* Paragon Partner Portal Styles
-------------------------------------------------- */
.bbar {
opacity:.81;
font-family:'Roboto',sans-serif;
font-size:16px;
font-style:italic;
color:#FFF;
display:inline-block;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
/*padding: 10px 20px;*/
padding-left:5px;
padding-right:5px;
height:21px;
width:115px;
text-align:center;
border:0 solid rgba(0,0,0,0.22);
-webkit-border-radius:20px;
border-radius:12px;
-o-text-overflow:clip;
text-overflow:clip;
background:rgba(255,255,255,0.13);
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
transition:all 200ms cubic-bezier(0.42,0,0.58,1);
margin-left:20px
}
.person {
text-align:right;
height:inherit
}
.person a {
opacity:.41;
font-family:'Roboto',sans-serif;
font-size:16px;
color:#FFF;
font-weight:500;
text-transform:uppercase
}
.person span {
margin-right:15px
}
.loginimg {
margin-bottom:-6px;
margin-right:15px
}
.pbox {
background:rgba(255,255,255,0.20);
box-shadow:2px 3px 4px 0 rgba(12,12,12,0.05);
margin:0 auto;
display:inline-block;
border-radius:50%;
height:110px;
width:110px;
text-align:center
}
.pimg {
padding-top:21px;
width:70px;
height:60px
}
.PP {
/*margin-top: 133px;*/
text-align:left;
height:50px
}
.PP a {
opacity:.64;
font-family:'Roboto' sans-serif;
font-size:32px;
color:#FFF;
margin-left:20px
}
.more-button {
display:inline-block;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
height:17px;
cursor:pointer;
padding:4px 14px;
border:none;
-webkit-border-radius:21px;
border-radius:21px;
color:rgba(255,255,255,0.9);
-o-text-overflow:clip;
text-overflow:clip;
background:#000;
font-family:'Roboto' sans-serif;
font-size:16px;
color:#FFF;
margin-top:15px;
margin-right:15px;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
transition:all 200ms cubic-bezier(0.42,0,0.58,1)
}
.steps {
font-size:20px;
font-weight:500;
color:#fff
}
.active-cases {
background:rgba(0,0,0,.50);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.newcomments {
background:rgba(0,0,0,.30);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.active-open-cases {
background:rgba(0,0,0,.50);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.newcomments2 {
background:rgba(0,0,0,.30);
height:64px;
overflow:hidden;
border:none;
text-align:center;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.stats {
background:rgba(51,51,51,0.28);
height:172px;
font-size:10px
}
.guages {
padding-left:95px;
padding-top:52px
}
.jonarand {
height:426px;
margin-left:0px;
border-left: 3px solid rgba(0,0,0,0);
border-right: 3px solid rgba(0,0,0,0);
}
.jonarand img {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 41px;
}
.jonarand figcaption {
text-align: center;
padding-top: 10px;
font-size: 20px;
color: #FFF;
opacity: .60;
}
.box1 {
height:49.25%;
width:49.25%;
background:rgba(0,0,0,0.59);
float:left;
margin-right:2px;
margin-bottom:2px;
}
.box2 {
height:49.25%;
width:49.75%;
background:rgba(0,0,0,0.59);
float:left;
margin-bottom:2px;
}
.box3 {
height:50.75%;
width:49.25%;
background:rgba(0,0,0,0.59);
float:left;
margin-right:2px;
}
.box4 {
height:50.75%;
width:49.75%;
background:rgba(0,0,0,0.59);
float:left
}
.menuitem {
height:418px;
margin-left:0;
text-align: center;
font-size:20px;
font-weight:500;
color:#fff
}
.menuitem a:link {
text-decoration: none;
color:#FFF;
}
.item1 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item2 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item3 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item4 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
}
.item5 {
height:16%;
margin-bottom:2px;
background:rgba(0,0,0,0.59);
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
.item6 {
height:20%;
background:rgba(0,0,0,0.59);
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
-webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
-o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}
I am using Skeleton grid system and made some modifications. As you guys can see i tried adding height % to some items to try to make it work but i don't see whats wrong. Can someone point me to the right direction? the rest is on JSFIDDLE.
http://jsfiddle.net/qbj0r5bk/
here is the fullscreen result: https://jsfiddle.net/qbj0r5bk/embedded/result/

Lets take an example. Lets make a div and set it to be height:30%.
Html
<div id="container1"></div>
CSS
#container1 {
background-color:#f00;
width:30%;
height:30%;
}
That won't work, you will end up with a blank page. The reason is, though div is the only component you are going to work with, the page has other components, html and body. When you set the height of the div as 30%, what you are actualy telling is to set the height to be 30% the height of body which is 100% the height of html. However, html does not have any height by default, it is as tall as its content and you initially don't have any content. Lets make a small change to your css.
New CSS
#container1 {
background-color:#f00;
width:30%;
height:30%;
}
html, body {
height:100%;
}
Try out this fiddle: http://jsfiddle.net/r628n48L/1/

I think you shouldn't set html and body height to 100%, because the page will have the same height as the screen height and everything inside it will be an overflow.
If you mean set the height to % instead of fixed unit to create the element responsive to the screen, just write it in vh. For example, height: 50vh or 50% of the viewport height. Try it.
And just delete html, body {height: 100%}.

Jquery Slide Animation on hover

I am trying to implement a Jquery Hover function on my Company Logo. I want to achieve this :
However, I had achieved THIS
I used the following logic :
$(".m1").hover(function() {
dir = !dir;
r = dir? -50 : 0;
t = dir? 50 : 0;
$(".slide").stop().animate({left: r+'px'}, 300);
});
You can check my JS Fiddle here : http://jsfiddle.net/Jiteen/xZ6Hv/
Any sort of Help or Suggestion is Appreciated.

How about the below as a starting point? No need for JS!
Demo Fiddle
HTML
<div>
<div href="#" class="word" data-text="edia">M</div>
<div href="#" class="word" data-text="antra">M</div>
</div>
CSS
.word {
display:inline-block;
font-size:1em;
line-height:1;
position:relative;
font-size:50px;
}
.word:first-child {
color:orange;
}
.word:last-child {
color:grey;
}
.word:after {
content:attr(text);
position:relative;
display:inline-block;
overflow:hidden;
max-width:0;
color:black;
font-size:20px;
transition:max-width .5s ease-in;
}
div:hover .word:after {
max-width:40px;
}

You can achieve this by using a structure like this:
<div class="logo">
<div class="m1">M</div>
<div class="m3">aaa</div>
<div class="m2">M</div>
<div class="m4">aaa</div>
</div>
And animate it by changing the width of .m3 and .m4
jsFiddle

This is what i would do: http://jsfiddle.net/A6vYy/.
Do note though, that if you're using images instead of divs you can skip some of the CSS.
JS
$(document).ready(function () {
$(".logo").on("mouseenter", function () {
$(this).find(".hidden").animate({width: "50px"});
}).on("mouseleave", function () {
$(this).find(".hidden").animate({width: "0px"});
});
});
HTML
<div class="logo">
<div class="part">M</div><div class="hidden">edia</div><div class="part">M</div><div class="hidden">antra</div>
</div>
CSS
.part, .hidden {
width: 50px;
height: 50px;
background: red;
display: inline-block;
font-size: 24px;
text-align: center;
vertical-align: top;
}
.hidden {
width: 0px;
overflow: hidden;
}

Try this out :
<div class="media">
<span class="big">M</span>edia
</div>
<div class="mantra">
<span class="big">M</span>antra
</div>
Css:
.media,.mantra{
width:28px;
overflow: hidden;
float:left;
margin-left:2px;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
cursor: pointer;
}
.media:hover{
display: inline-block;
height:60px;
width:60px;
float:left;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
}
.mantra:hover{
display: inline-block;
height:60px;
width:60px;
float:left;
}
.big{
font-size: 2em;
color: #ff8800;
}
Working Demo :http://jsfiddle.net/Jiteen/xZ6Hv/

Accordion/Drawer menu with Javascript? please advise

Sorry to bother, I want to create a menu like this one: sample menu could you please guide me? point me in the right direction? what would be the correct name of this kind of menu? what kind of language could I use? any similar examples out there? thanks a lot for your time.
Biz

Check this out,
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
Cherry pick the one which suits your need.

try this menu(basic)
markup:
<div class="mainMenu" >
<div class="main-meu-nav" >
<ul>
<li data-id="cat1" >menu 1</li>
<li data-id="cat2">menu 2</li>
<li data-id="cat3">menu 3</li>
<li data-id="cat4">menu 4</li>
</ul>
</div>
<div class="mainmenu-category" >
<div class="category-row" id="cat1" >menu 1 list item</div>
<div class="category-row" id="cat2" >menu 2 list item</div>
<div class="category-row" id="cat3" >menu 3 list item</div>
<div class="category-row" id="cat4" >menu 4 list item</div>
</div>
</div>
Style:
.mainMenu
{
width:1024px;
height:auto;
margin:auto;
}
.main-meu-nav
{
width:100%;
height:auto;
float:left;
}
.main-meu-nav ul
{
width:100%;
height:auto;
float:left;
list-style:none;
}
.main-meu-nav ul li
{
width:auto;
display:block;
height:auto;
float:left;
list-style:none;
margin:0px 10px;
padding:10px ;
border:1px solid red
}
.mainmenu-category
{
width:100%;
height:auto;
float:left;
display:none
}
.category-row
{
width:90%;
height:auto;
float:left;
padding:5%;
background:#cccccc;
}
Script:
$(document).ready(function() {
$(".main-meu-nav > ul >li").on("click" , function() {
$(".mainmenu-category").fadeIn();
var catId = $(this).attr("data-id");
$(".mainmenu-category").find(".category-row").slideUp(100);
$(".mainmenu-category").find("#"+catId).slideDown(1000)
});
});

Try
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>

<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="utf-8">
<title>Teste Menu c Javascript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
nav {
background-color:#414956;
height: 100%;
position: fixed;
right: -220px;
top: 0;
-moz-transition: right 0.2s linear;
-o-transition: right 0.2s linear;
-webkit-transition: right 0.2s linear;
transition: right 0.2s linear;
width: 220px;
z-index: 9001;/* IT'S OVER 9000! */
padding-top: 4em;
}
#menuToggle {
background: #e3117c;
display: block;
position: fixed;
height: 40px;
right: 15%;
top: 33px;
width: 46px;
z-index:9999;
border-radius: 5px;
}
#menuToggle span {
background: white;
display: block;
height:6%;
left: 20%;
position: absolute;
top: 45%;
width: 60%;
}
#menuToggle span:before,
#menuToggle span:after {
background: white;
content: '';
display: block;
height: 100%;
position: absolute;
top: -250%;
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
width: 100%;
}
#menuToggle span:after { top: 250%; }
nav a {
color: #fff;
display: block;
font-size: 20px;
margin: 0 0 0 30px;
font-weight: 300;
letter-spacing: 1px;
}
nav a:after {
background: #e3117c;
content: '';
display: block;
height: 2px;
-moz-transition: width 0.5s;
-o-transition: width 0.5s;
-webkit-transition: width 0.5s;
transition: width 0.5s;
width: 0;
margin-top: 0.2em;
}
n
.menu nav a:hover,.menu nav a:focus {
color: #e3117c;
}
.open nav {
right: 0;
}
.open #menuToggle span {
background: transparent;
left: 20%;
top: 45%;
}
.open #menuToggle span:before,
.open #menuToggle span:after {
background: white;
top: 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.open #menuToggle span:after {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menuToggle .navClosed {
-moz-transition: background 0.1s linear;
-o-transition: background 0.1s linear;
-webkit-transition: background 0.1s linear;
transition: background 0.1s linear;
}
#menuToggle .navClosed:before,
#menuToggle .navClosed:after {
-moz-transition: top 0.2s linear 0.1s, -moz-transform 0.2s linear 0.1s;
-o-transition: top 0.2s linear 0.1s, -o-transform 0.2s linear 0.1s;
-webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;
-webkit-transition-delay: 0.1s, 0.1s;
transition: top 0.2s linear 0.1s, transform 0.2s linear 0.1s;
}
#menuToggle .navOpen {
-moz-transition: background 0.1s linear 0.2s;
-o-transition: background 0.1s linear 0.2s;
-webkit-transition: background 0.1s linear;
-webkit-transition-delay: 0.2s;
transition: background 0.1s linear 0.2s;
}
#menuToggle .navOpen:before,
#menuToggle .navOpen:after {
-moz-transition: top 0.2s linear, -moz-transform 0.2s linear;
-o-transition: top 0.2s linear, -o-transform 0.2s linear;
-webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;
transition: top 0.2s linear, transform 0.2s linear;
}
/*-- //menu-navigation --*/
</style>
<script>
$('#show-hide-menu').click(function() {
if ($('#sidebar').hasClass('visible')) {
$('#sidebar').removeClass('visible');
} else {
$('#sidebar').addClass('visible');
}
});
</script>
</head>
<body>
</head>
<body>
<div class="menu">
<span class="navClosed"></span>
<nav>
Home
About
Services
Gallery
News
price
Contact
</nav>
</div>
<script>
(function($){
// Menu Functions
$(document).ready(function(){
$('#menuToggle').click(function(e){
var $parent = $(this).parent('.menu');
$parent.toggleClass("open");
var navState = $parent.hasClass('open') ? "hide" : "show";
$(this).attr("title", navState + " navigation");
// Set the timeout to the animation length in the CSS.
setTimeout(function(){
console.log("timeout set");
$('#menuToggle > span').toggleClass("navClosed").toggleClass("navOpen");
}, 200);
e.preventDefault();
});
});
})(jQuery);
</script>
<!--// navbar-->
</body>
</html>
</body>
</html>

**<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="utf-8">
<title>Teste Menu c Javascript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body{padding:0; margin:0; font-family: 'Roboto', sans-serif;}
h1{margin:0; color:#ddd; padding:10px; border-bottom:1px solid #666;}
button:focus{outline:none}
aside{background:#1a1d23; width:250px;height:100vh; position:fixed; transition:.3s;left:-250px;top:0;transition-timing-function: cubic-bezier(0.9,0,1,1);}
aside.close{left:0;transition:.3s;transition-timing-function: cubic-bezier(0.9,0,1,1);}
nav a{display: block; color:#ddd; text-decoration:none;padding:10px;}
nav a:hover{background:#313640;}
aside button{border:none; background:none; position: absolute;right:-40px; top:7px; font-size:30px; transform:rotate(90deg); display:inline-block; cursor:pointer}/style>
<body>
<header></header>
<div class="container">
<aside>
<button class="toggle">|||</button>
<h1>Menu</h1>
<nav>
<ul>
<li>
Home
<div class="collapse" id="menu1">
Subitem 1
<div class="collapse" id="menu1sub1">
Subitem 1 a
Subitem 2 b
Subitem 3 c
<div class="collapse" id="menu1sub1sub1">
Subitem 3 c.1
Subitem 3 c.2
</div>
Subitem 4 d
Subitem 5 e
<div class="collapse" id="menu1sub1sub2">
Subitem 5 e.1
Subitem 5 e.2
</div>
</div>
Subitem 2
Subitem 3
</div>
</li>
</li>
About Us
Services
Portfolio
<a `href`="#">Contact Us</a>
</nav>
</aside>
</div>
</ul>
<script>
$(document).ready(function(){
$(".toggle").click(function(){
$("aside").toggleClass("close")
});
});
// click outside
$(document).mouseup(function(e){
var container = $("aside");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
$("aside").remove Class("close")
}
});
</script>**

Categories