I modified the menu animation code from this page ...
https://codepen.io/designcouch/pen/Atyop
... and have the button open and close my menu (on click, it should show and hide #mainmenu ... by toggling the class .menuview on and off). However, it's not working. Not sure what happened ... and need some help. I've been racking my brain over this for awhile...
My code is below...
JAVASCRIPT. I don't see anything wrong...
// Menu Button
$(document).ready(function(){
$('#nav-icon3').click(function(){
$('#mainmenu').toggleClass('menuview');
$(this).toggleClass('open');
});
});
HTML (I'm using WordPress to show the menu)
<div id="mainmenu">
<?php wp_nav_menu( array( 'theme_location' => 'main-navigation', 'container' => '', 'items_wrap' => '<ul id="menu" class="%2$s">%3$s</ul>' ) ); ?>
</div>
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
STYLES (this is the responsive section of the stylesheet. Full stylesheet at http://www.silkvodka.com/wp-content/themes/silkvodka/style.css )
#mainmenu { position: absolute; top: -59999px; left: -59999px; /* Hide Menu */}
#mainmenu.menuview { position:absolute; top:60px; left:10px; display:block; float:none; width:146px; z-index:99; }
#nav-icon3 { display:block;
width: 60px;
height: 60px;
float:none;
position: absolute;
top:0; left:200px;
background-color:#494949;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 3px;
width: 40px;
margin:0 10px;
background: #FFF;
border-radius: 1px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon3 span:nth-child(1) { top: 17px; }
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) { top: 30px; }
#nav-icon3 span:nth-child(4) { top: 43px; }
#nav-icon3.open span:nth-child(1) { top: 14px; width: 0%; left: 50%;}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) { top: 14px; width: 0%; left: 50%; }
You can view the entire page here: http://www.silkvodka.com/cocktails/ (use a small browser window, otherwise, the responsive button wont be visible)
you are loading your javascript.js file before jquery. Your javascript.js file attempts to use jquery... switch these script tags around like:
<script type="text/javascript" src="http://www.silkvodka.com/wp-content/themes/silkvodka/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.silkvodka.com/wp-content/themes/silkvodka/js/javascript.js"></script>
This was evident by the console error "Uncaught ReferenceError: $ is not defined" which indicates you are attempting to use jquery berfore it's available.
When using wordpress, use jQuery instead of $
jQuery(document).ready(function(){
jQuery('#nav-icon3').click(function(){
jQuery('#mainmenu').toggleClass('menuview');
jQuery(this).toggleClass('open');
});
});
That should run :)
Related
Im stuck on toggeling a class when there is a click event on either the parent or child item. It is about a navigation menu that can be clickable on the entire bar or just the icon.
Current situation: (according to the fiddle)
When you click on the red block, the class is-active will be toggled on the .hamburger-menu class. Allowing the icon to transition via CSS.
But when you click on the hamburger icon it does not toggle the class.
How can the class is-active be toggled when there is a click event on either the #menuContainer or the .hamburger-menu div?
jQuery(function($) {
$(document).ready(function() {
$("#menuContainer, .hamburger-menu").click(function() {
$(".hamburger-menu").toggleClass("is-active");
});
});
});
.menu_container {
display: block;
position: absolute;
left: 45%;
top: 45%;
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}
.menu_container .menu-active {
background-color: blue;
}
.hamburger-menu {
display: inline-block;
position: absolute;
left: 35%;
top: 45%;
margin: 0 auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger-menu:hover {
cursor: pointer;
}
.hamburger-menu span {
display: block;
width: 40px;
max-width: 100%;
height: 3px;
background-color: #414042;
margin-bottom: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger-menu.is-active span:nth-child(2) {
display: none;
}
.hamburger-menu.is-active span:nth-child(1) {
-webkit-transform: translateY(4.5px) rotate(45deg);
-ms-transform: translateY(4.5px) rotate(45deg);
-o-transform: translateY(4.5px) rotate(45deg);
transform: translateY(4.5px) rotate(45deg);
}
.hamburger-menu.is-active span:nth-child(3) {
-webkit-transform: translateY(-4.5px) rotate(-45deg);
-ms-transform: translateY(-4.5px) rotate(-45deg);
-o-transform: translateY(-4.5px) rotate(-45deg);
transform: translateY(-4.5px) rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuContainer" class="menu-trigger menu_container">
<div class="hamburger-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
The issue is because you've added the click event handler to two elements, #menuContainer and .hamburger-menu. The latter is a child of the former, so when you click that the handler fires twice. This means that the class is toggled on, then immediately off again (or vice versa)
To fix this issue, call stopPropagation() on the event. This stops the event bubbling up the DOM and being handled twice.
jQuery(function($) { // Note you only need one document.ready handler here
$("#menuContainer, .hamburger-menu").click(function(e) {
e.stopPropagation();
$(".hamburger-menu").toggleClass("is-active");
});
});
.menu_container {
display: block;
position: absolute;
left: 45%;
top: 45%;
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}
.menu_container .menu-active {
background-color: blue;
}
.hamburger-menu {
display: inline-block;
position: absolute;
left: 35%;
top: 45%;
margin: 0 auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger-menu:hover {
cursor: pointer;
}
.hamburger-menu span {
display: block;
width: 40px;
max-width: 100%;
height: 3px;
background-color: #414042;
margin-bottom: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger-menu.is-active span:nth-child(2) {
display: none;
}
.hamburger-menu.is-active span:nth-child(1) {
-webkit-transform: translateY(4.5px) rotate(45deg);
-ms-transform: translateY(4.5px) rotate(45deg);
-o-transform: translateY(4.5px) rotate(45deg);
transform: translateY(4.5px) rotate(45deg);
}
.hamburger-menu.is-active span:nth-child(3) {
-webkit-transform: translateY(-4.5px) rotate(-45deg);
-ms-transform: translateY(-4.5px) rotate(-45deg);
-o-transform: translateY(-4.5px) rotate(-45deg);
transform: translateY(-4.5px) rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuContainer" class="menu-trigger menu_container">
<div class="hamburger-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
The problem is that the event is propagating up to the parent when you click on the hamburger menu causing the class to toggle twice and make it look like it's not working. To fix this, you need to add e.stopPropagation(); to the click function.
jQuery(function($) {
$(document).ready(function() {
$("#menuContainer, .hamburger-menu").click(function(e) {
$(".hamburger-menu").toggleClass("is-active");
e.stopPropagation();
});
});
});
.menu_container {
display: block;
position: absolute;
left: 45%;
top: 45%;
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}
.menu_container .menu-active {
background-color: blue;
}
.hamburger-menu {
display: inline-block;
position: absolute;
left: 35%;
top: 45%;
margin: 0 auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger-menu:hover {
cursor: pointer;
}
.hamburger-menu span {
display: block;
width: 40px;
max-width: 100%;
height: 3px;
background-color: #414042;
margin-bottom: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger-menu.is-active span:nth-child(2) {
display: none;
}
.hamburger-menu.is-active span:nth-child(1) {
-webkit-transform: translateY(4.5px) rotate(45deg);
-ms-transform: translateY(4.5px) rotate(45deg);
-o-transform: translateY(4.5px) rotate(45deg);
transform: translateY(4.5px) rotate(45deg);
}
.hamburger-menu.is-active span:nth-child(3) {
-webkit-transform: translateY(-4.5px) rotate(-45deg);
-ms-transform: translateY(-4.5px) rotate(-45deg);
-o-transform: translateY(-4.5px) rotate(-45deg);
transform: translateY(-4.5px) rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuContainer" class="menu-trigger menu_container">
<div class="hamburger-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
I am doing a "hamburger" menu, responsive style, with a menu that will cover the page the viewer is at.
I got all HTML/CSS figured out, but I wanted to add fade in and fade out effects.
Fade in works with jquery code but the menu isn't fading out. Already tried some ideas that were on SO but none works.
Any help? Fiddle: https://jsfiddle.net/f19kz640/
Sorry for bad eng...
HTML
<header>
<div id="topbar"> <!-- top bar -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="menu">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
</div>
</header>
CSS
body{
background-color: #000;
}
#menu{
z-index: 5;
width: 100%;
height: 100%;
background-color: rgba(0,0,0, 0.95);
position: fixed;
font-size: 1.5em;
text-align: center;
right: 0px;
top: 0px;
opacity: 0;
display: table;
}
.hidden{
display: none;
visibility: none;
}
#menu ul{
margin: 0;
padding: 0;
z-index: 10;
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
#menu ul li{
cursor: pointer;
text-decoration: none;
}
#menu ul li:hover{
background-color: #006973;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu ul a{
letter-spacing: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #fff;
list-style: none;
text-transform: uppercase;
padding: 0px;
line-height: 75px;
padding: 10px 700px;
text-decoration: none;
}
#menu ul a:hover{
text-decoration: none;
color: #fff ;
}
#nav-icon {
z-index: 20;
width: 50px;
height: 35px;
position: relative;
margin: 35px 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 40px;
background: #bada33;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 12px;
}
#nav-icon span:nth-child(4) {
top: 24px;
}
#nav-icon.open span:nth-child(1) {
top: 8px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 8px;
width: 0%;
left: 50%;
}
Javascript/JQuery
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
if($('#menu').css('opacity') == '0'){
$('#menu').css('opacity','1');
$('#menu').fadeIn(300).css('display','table');
}else{
$('#menu').css('opacity','0');
$('#menu').fadeOut(300).css('display','none');
}
});
});
You could easily simplify things a great deal:
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
$('#menu').fadeToggle(300);
});
});
Updated Fiddle
There's no reason to play with opacity properties or display properties, it's all part of the jQuery fade() function, which you can merely toggle.
I am trying to learn a bit of Javascript/JQuery for school and got stuck on something I don't quite understand.
Everything in my function "works" as I wanted it to, but it feels odd that I have to list each of my selectors on a different line in order to remove all classes from each.
I've tried .merge and .add as suggestions i read on other posts, but I couldn't make it work (possibly not implementing it right) and I was hoping someone can show me how to do it and maybe explain why something like this doesn't work:
$(menuWrapper, menuTrigger, menuIcon, contentWrapper).removeClass();
This is my entire function, along with it working(just desktop css) on jsFiddle
// JavaScript Document
function toggleNavSettings(swipeDirection) {
menuWrapper = $("#menu-wrapper");
menuIcon = $('#menu-icon');
menuTrigger = $("#menu-trigger-wrapper");
contentWrapper = $("#custom-wrapper");
if(menuWrapper.width() > 199){//if nav expanded
if($( document ).width() > 480){//if screen is not mobile
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-collapsed");//collapse the emenu
menuTrigger.addClass("menu-trigger-wrapper-d-closed");//swing the trigger
menuIcon.addClass("open-d");
contentWrapper.addClass("closed-d");//collapse the content pane
}
else{//if screen is Mobile
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-collapsed-m");//expand menu for desktop
menuTrigger.addClass("menu-trigger-wrapper-d-closed");//swing the trigger
menuIcon.addClass("open-d");
contentWrapper.addClass("closed-d");
}
}
else{//if NAV is collapsed
if($( document ).width() > 480){//if screen is not mobile
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-expanded");//expand menu
contentWrapper.addClass("open-m");//expand the content pane
}
else{//if window screen is MOBILE
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-expanded-m");//expand the menu
menuTrigger.addClass("menu-trigger-wrapper-m-open");//swing the trigger
menuIcon.addClass("open-m");
contentWrapper.addClass("open-d");//expand the content pane
}
}
}
$(document).ready(function() {
var menuTrigger = $("#menu-trigger-wrapper");
menuTrigger.click(function() {
toggleNavSettings(null);
});
});
https://jsfiddle.net/o5ogex6q/1/
Thanks in advance!
You could use something like this
$('#menu-wrapper, #menu-icon, #menu-trigger-wrapper, #custom-wrapper').removeClass();
EDIT
You can keep your variables and use following syntax object.selector to get the ID value. The only "messy" thing are the string commas.
$(menuWrapper.selector+","+ menuTrigger.selector+","+menuIcon.selector+","+ contentWrapper.selector).removeClass();
This is riding the line of a duplicate question to: How to combine two jQuery results
One slight difference is you'd have to pass each collection individually, eg:
var allMenuObjects = menuWrapper.add(menuIcon).add(menuTrigger).add(contentWrapper);
Hopefully this helps and I appreciate your efforts in understanding how to use jQuery efficiently. (eg without engaging the selector engine repeatedly)
Try the below code,
You can use toggleClass
Find more information about toggleClass
function toggleNavSettings(swipeDirection) {
menuWrapper = $("#menu-wrapper");
menuIcon = $('#menu-icon');
menuTrigger = $("#menu-trigger-wrapper");
contentWrapper = $("#custom-wrapper");
if ($(document).width() > 480) { //if screen is not mobile
menuWrapper.toggleClass("menu-collapsed");
menuTrigger.toggleClass("menu-trigger-wrapper-d-closed");
menuIcon.toggleClass("open-d");
contentWrapper.toggleClass("closed-d");
} else { //if screen is Mobile
menuWrapper.toggleClass("menu-collapsed-m");
menuTrigger.toggleClass("menu-trigger-wrapper-d-closed");
menuIcon.toggleClass("open-d");
contentWrapper.toggleClass("closed-d");
}
}
$(document).ready(function() {
var menuTrigger = $("#menu-trigger-wrapper");
menuTrigger.click(function() {
toggleNavSettings(null);
});
});
#charset"utf-8";
/* CSS Document */
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #121212;
color: #00c4e2;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.template-wrapper {
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
#custom-wrapper,
#custom-wrapper.open-d {
padding-left: 210px;
transition: all 0.4s;
}
#custom-wrapper.closed-d {
padding-left: 10px;
}
.content-page {
position: relative!important;
}
#menu-wrapper {
background: url(../images/menu_pattern_1.png);
background-repeat: repeat;
border-right: #00c4e2 10px solid;
position: fixed;
display: block;
top: 0;
left: 0;
width: 200px;
overflow-y: auto;
height: 100%;
transition: all 0.4s;
z-index: 1001;
}
.menu-expanded {
width: 200px;
}
.menu-collapsed {
width: 0px!important;
}
.menu-collapsed-m {
width: 0px!important;
}
.menu-wrapper.scroll {
width: 210px;
border-right: none;
}
#menu-trigger-wrapper {
transition: all 0.4s;
position: fixed;
display: block;
top: 0px;
left: 209px;
background: #00c4e2;
width: 48px;
height: 48px;
color: #fff;
cursor: pointer;
z-index: 1002;
}
.menu-trigger-wrapper-d-closed {
left: 9px!important;
}
.menu-trigger {
width: 100%;
height: 100%;
position: relative;
}
/*MENU ANIMATIONS*/
/* Icon 1 */
#menu-icon {
width: 86%;
height: 100%;
position: relative;
margin: 10px 0px 0px 1px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#menu-icon span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#menu-icon span:nth-child(1) {
top: 0px;
}
#menu-icon span:nth-child(1),
#menu-icon.open-d span:nth-child(1) {
top: 12px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#menu-icon span:nth-child(2) {
opacity: 0;
top: 12px;
}
#menu-icon.open-d span:nth-child(1) {
opacity: 100;
}
#menu-icon span:nth-child(3),
#menu-icon.open-d span:nth-child(3),
#menu-icon.open-m span:nth-child(3) {
top: 12px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#menu-icon.open-d span:nth-child(1) {
top: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
transform: rotate(-0deg);
}
#menu-icon.open-d span:nth-child(2) {
top: 12px;
opacity: 100;
}
#menu-icon.open-d span:nth-child(3) {
top: 24px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
transform: rotate(-0deg);
}
.content-page {
margin-left: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu-trigger-wrapper">
<div id="menu-icon"> <span></span>
<span></span>
<span></span>
</div>
</div>
<div id="menu-wrapper" data-mcs-theme="inset">
<div class="menu-container"> Link 1
<br> Link 2
<br> Link 3
<br>
</div>
</div>
<div id="custom-wrapper">blah blah</div>
I'm having a little problem with my push menu.
Here is my HTML code for the menu:
<nav id="menu">
Text
<ul>
<span style="vertical-align:middle;">Pyronobic <img src="pyronobic-logo-v2.png" style="height: 16px; width: 16px;" /></span>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
The problem is, the .menu-link link can't be clicked, and I don't know why.
Here is my CSS for it:
.menu-link {
position: absolute;
top: 15px;
left: -50px;
height: 35px;
width: 35px;
background: no-repeat;
background-image: url(Assets/menu.svg);
background-position-x: 50%;
background-position-y: 50%;
background-size: 50%;
background-color: rgba(255,255,255,0.3);
background-position: center center;
z-index: 99;
opacity: 0.9;
-webkit-transition: opacity 0.15s ease;
-moz-transition: opacity 0.15s ease;
-o-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
}
And here's my jQuery:
$(".menu-link").click(function() {
$("#menu").toggleClass("active");
$(".container").toggleClass("active");
});
menu.active CSS:
#menu.active {
-webkit-transform: translate(-13.755em, 0px);
-moz-transform: translate(-13.755em, 0px);
-o-transform: translate(-13.755em, 0px);
-ms-transform: translate(-13.755em, 0px);
transform: translate(-13.755em, 0px);
}
.container.active {
-webkit-transform: translate(-13.725em, 0px);
-moz-transform: translate(-13.725em, 0px);
-o-transform: translate(-13.725em, 0px);
-ms-transform: translate(-13.725em, 0px);
transform: translate(-13.725em, 0px);
}
I have tested it before by taking the link OUT of the Nav tag, but when it is inside the nav tag, it doesn't seem to work...
Thanks in advance for your help!
jsFiddle Link.
You have the property left assigned -50px. May be this cause the issue. You need to work on position.
Apply your css like blow.
.menu-link {
position: absolute;
top: 15px;
left: 50px;
height: 35px;
width: 35px;
background: no-repeat;
background-image: url(Assets/menu.svg);
background-position-x: 50%;
background-position-y: 50%;
background-size: 50%;
background-color: rgba(255,255,255,0.3);
background-position: center center;
z-index: 99;
opacity: 0.9;
-webkit-transition: opacity 0.15s ease;
-moz-transition: opacity 0.15s ease;
-o-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
}
http://jsfiddle.net/7jYN2/1/
Replace
With
Some Text
I have a navbar. On hover of any of it menu item I want to have the exact same effect of border-bottom animation as in here (See how the border or menu items at the top-left animates when you hover them.)
I tried to find similar asked questions on stackoverflow and also on google but I didn't find anything helpful.
Any help is really appreciated.
Well, it was as easy as inspecting the web with the developer tools. What they do in that page is to create an element inside the menu using the :before pseudo-element. On hover they use CSS transforms (scale) to change the length.
jsfiddle.
span
{
display: inline-block;
padding: 6px 0px 4px;
margin: 0px 8px 0px;
position: relative;
}
span:before
{
content: '';
position: absolute;
width: 100%;
height: 0px;
border-bottom: 1px solid black;
bottom: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
}
span:hover:before
{
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
You can't have the border a different length to the element that it surrounds. However you can achieve a similar effect using just CSS - with a pseudo element. How about something like the following:
div:after{
position:absolute;
bottom:0;
left:50%;
height:1px;
width:0%;
background-color:#444;
display:block;
content:'';
transition:0.3s;
}
div:hover:after{
left:0;
width:100%;
}
JSFiddle
Its not border-bottom, it is done using css pusedo element :before
.navigation li a::before {
position: absolute;
bottom: -1px;
left: 0;
content: "";
width: 100%;
height: 1px;
background-color: #fff;
display: block;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
transform: scaleX(0);
}
.navigation li a::before {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
transform: scaleX(1);
}