I have code that switches between menu and submenu on hover, but I want short slide-left animation on mouse-in and slide-right on mouse-out.
My template contain this animations (.mk-vm-animate-out-1 and .mk-vm-animate-in-1) so i'd like to use them (but it's not necessary).
My idea was to add class with animation and some dealy and then add classes that shows submenu... but everything that i tried wasnt working... :/
Here is my code:
$(function() {
$('#menu-item-155').hover(
function(){
$(this).parent().addClass("mk-vm-animate-out-1");
$(this).addClass("mk-vm-subviewopen");
$(this).parent().addClass("mk-vm-subview");
},
function(){
$(this).removeClass("mk-vm-subviewopen");
$(this).parent().removeClass("mk-vm-animate-out-1");
$(this).parent().removeClass("mk-vm-subview");
}
);
});
<ul id="menu-main-menu">
<li id="menu-item-4673"> <a><span>ITEM 1</span></a></li>
<li id="menu-item-155" class="menu-item"><a><span>ITEM with submenu</span></a>
<ul class="sub-menu ">
<li id="menu-item-4792"><a><span>submenu item1</span></a></li>
<li id="menu-item-4718"><a><span>submenu item2</span></a></li>
<li id="menu-item-4718"><a><span>submenu item3</span></a></li></ul>
</li>
<li id="menu-item-159"><a><span>ITEM 3</span></a></li>
<li id="menu-item-159"><a><span>ITEM 4</span></a></li>
</ul>
You can use transform and transition for this
.before-hover {
left:15px;
opacity: 0;
z-index:-1;
visibility: hidden;
transition: all 0.4s;
}
.before-hover:hover {
opacity:1;
z-index:1;
visibility:visible;
transform: translateY(-15px);
}
Related
Like in the topic. My code looks like:
$('li a').mouseover(function () {
var rhomboidImg = $(this).data('rhomboid-img');
$('#img-nav-rhomboid').css('background', 'url(' + rhomboidImg + ') no-repeat ');
$('#img-nav-rhomboid img').delay(2000).fadeIn();
});
And here is html:
<nav class="menu-closed">
<div id="img-nav-rhomboid" class="nav-rhomboid"></div>
<ul class="menu-list">
<li class="menu-accent-border"><img src="img/menu-mrowka.jpg" alt="Materiały Budowlane"/><li>
<li>Mrówka Wszystko dla domu</li>
<li>Sklep instalacyjno-metalowy</li>
<li class="menu-accent-border2"><img src="img/menu-psb.jpg" alt="Materiały Budowlane"/><li>
<li>Magazyn materiałów budowlanych Opalenica</li>
<li>Magazyn materiałów budowlanych Nowy Tomyśl</li>
<li>Magazyn materiałów budowlanych Grodzisk Wlkp.</li>
<li class="menu-accent-border3">Centrum ogrodnicze OPALFLORA</li>
<li>Betoniarnia</li>
<li>Uścięcice</li>
</ul>
</nav>
When I hover on li element it should change the picture, but with some animation.
If you're only trying to create a fade-in animation on hover you might as well want to use CSS
.rhomboid-img{
opacity: 0;
}
.rhomboid-img:hover{
opacity: 1;
transition: 2s all ease-in-out;
}
Since you tagged css, I am going to give you some CSS code that will work for this:
#keyframes fadeIn {
0% {
opacity: 0
}
to {
opacity: 1
}
}
.fadeIn {
animation-name: fadeIn
}
This above is courtesy of https://github.com/daneden/animate.css
.rhomboid-img {
-webkit-transition-delay: 2s;
transition-delay: 2s;
This above will delay the fade in for your desired 2000 or two seconds. Just make sure you use both .fadeIn and .rhomboid-img classes.
First off, just wanted to mention that I have read this thread:
CSS3 transition only when class is added, not when removed
and the solution there does not work for me. I have a nav that is hidden when the browser is within the small breakpoint, and is revealed when an element is clicked. Clicking the element adds a class via jQuery. Once open, there is a close button that when clicked removes the class. The class is adding and subtracting as expected, but for some reason the transition only works when the .open class is added, not when it's removed. Here's my code:
HTML:
<div class="menu-main-nav-container">
<ul id="menu-main-nav" class="menu">
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">What We Do</li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">Team</li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">Case Studies</li>
<li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102">What Next?</li>
<li id="menu-item-104" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-104">Contact</li>
<li id="menu-item-122" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-122">Close</li>
</ul>
</div>
CSS (Compass + Sass):
#menu-main-nav {
#include single-transition(opacity, 0.3s, ease-in-out);
opacity: 0;
position: absolute;
top: -27px;
left: 0px;
height: 0;
overflow: hidden;
z-index: 5000;
&.open {
opacity: 1;
height: auto;
}
}
CSS (Compiled):
#header #menu-main-nav {
transition: opacity 0.3s ease-in-out;
opacity: 0;
position: absolute;
top: -27px;
left: 0px;
height: 0;
overflow: hidden;
z-index: 5000;
}
#header #menu-main-nav.open {
opacity: 1;
height: auto;
}
jQuery:
$('body').on('click', '.menu-main-nav-container', function(e) {
if(!$mobileNav.hasClass('open')) {
$mobileNav.addClass('open');
}
}).on('click', '.nav-close', function(e) {
if($mobileNav.hasClass('open')) {
$mobileNav.removeClass('open');
}
})
});
I'm pretty stumped here. Keep in mind that I am using Compass and that the initial transition is working as expected.
As mentioned in the comments, the issue is that height: 0 immediately hides the element when the class is removed. The opacity still transitions, but you don't see it.
Unfortunately, since height: auto is not a transitionable value, adding a height to the transition is not going to help. You could do it with a fixed height, if you set a delay when the open class is not present, but remove the delay when it is added.
var $menu = $('#menu-main-nav');
setInterval(function() {
$menu.toggleClass('open');
}, 2000);
#menu-main-nav {
background: grey;
overflow: hidden;
height: 0;
opacity: 0;
transition: opacity 1s, height 0s 1s;
}
#menu-main-nav.open {
height: 300px;
opacity: 1;
transition: opacity 1s, height 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu-main-nav-container">
<ul id="menu-main-nav" class="menu">
<li>What We Do</li>
<li>Team</li>
<li>Case Studies</li>
<li>What Next?</li>
<li>Contact</li>
<li>Close</li>
</ul>
</div>
As an alternative to fixed height, if you do not rely on the layout of the element when expanded, you could use visibility which is transitionable (well, you can delay it by a transition anyway), using the same technique above.
var $menu = $('#menu-main-nav');
setInterval(function() {
$menu.toggleClass('open');
}, 2000);
#menu-main-nav {
background: grey;
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 0s 1s;
}
#menu-main-nav.open {
opacity: 1;
visibility: visible;
transition: opacity 1s, visibility 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu-main-nav-container">
<ul id="menu-main-nav" class="menu">
<li>What We Do</li>
<li>Team</li>
<li>Case Studies</li>
<li>What Next?</li>
<li>Contact</li>
<li>Close</li>
</ul>
</div>
However, this means that the element will always the same height. If you do need the element to have a variable height, you could use JavaScript to calculate the target height, and set it to a fixed height for the duration of the animation.
try this, you just forgot the "" in your body element, and put the elements inside ()
Like this:
$(document).ready(function(){
$("body").on('click', '.menu-main-nav-container', function(e) {
if(!$("mobileNav").hasClass('open')) {
$("mobileNav").addClass('open');
}
}).on('click', '.nav-close', function(e) {
if($("mobileNav").hasClass('open')) {
$("mobileNav").removeClass('open');
}
})
});
I need some help with this. Basically I’ve created a menu bar using a combination of JQuery and css and it's not collapsing or hiding the way it should in Safari (I'm using 6.1.6).
I'll start with the code first
CSS Code
#menuHolder
{
width:200px;
height:30px;
background:#CCC;
position:fixed;
top:10px;
border: thin ridge #333;
}
#menuItem1
{
margin:0.15em;
display:table;
float:left;
width:150px;
height:25px;
background:#666;
}
#menuDiv
{
background-color:#FFF;
height:100px;
width:150px;
opacity:1;
visibility:hidden;
-webkit-transition: all 0.5s ease-out-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position:absolute;
top:34px;
margin-left:.1em;
}
#menuItem1:hover
{
background:#06F;
}
#menuItem1:hover #menuDiv
{
opacity:1;
visibility:visible;
background-color:#F00;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#menuContents
{
font-size:10px;
}
.ui-menu
{
width: 150px;
}
HTML
<body>
<div id="menuHolder">
<div id="menuItem1">
Menu 1
<div id="menuDiv">
<ul id="menuContents">
<li>Main Menu 1
<ul>
<li>Mid Menu 1
<ul>
<li>Sub Menu 1.1</li>
<li>Sub Menu 1.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
Javascript
$(function() {
$( "#menuContents" ).menu();
});
The Issue
As you can see from the code, when the mouse pointer goes to the menuItem1 div it will highlight the div and unhide the menuDiv that holds the jQuery menuContents. This works all fine and well, until you click on any of the submenu items.
In other browsers (Opera, Mozilla, Chrome) when you click the submenus, the menus collapse normally, menuDiv fades away, and menuItem1 unhighlights. In Safari, the mid and submenus fade away, but menuDiv never fades away, and menuItem1 remains highlighted as if there is still a mouse pointer triggering the css.
I am unsure if this is a CSS issue, a jQuery issue, or a browser version issue. Any help or guidance would be appreciated.
Looks like the issue was solved when I upgraded to Yosemite which means it was a Safari issue after all. All the menus collapse normally with no issues. –
I made a vertical drop down menu and the menu hides with Jquery, the problem is now that I can not link my pages with my menu in my li items my #href is not clickable, but the link is there.
Thanks in advance
http://68625.glr-imd.nl/motiongraphic.html# <---- url webpage
HTML:
<a id="arrow" href="#"></a>
<div id="sidemenu" class="sidemenu">
<img id="side_menu_img" src="styling/img/logo_no_letters.png" width="auto" height="40" style="margin-left:40px; margin-top:250px;">
<ul id="side_menu" class="menu">
<li style="margin-top:10px;">A b o u t
</li>
<li style="margin-top:10px;"> <a id="portfolio" href="#">P o r t f o l i o</a>
<ul>
<li style="font-size:12px; margin-top:10px;">Web-Design
</li>
<li style="font-size:12px;">Brand Identity's
</li>
<li style="font-size:12px;">Projects
<ul>
<li style="font-size:10px; margin-top:10px;">For the birds: The story continues
</li>
<li style="font-size:10px;">Gia - The biography
</li>
<li style="font-size:10px;">Glr Viral
</li>
<li style="font-size:10px;">The Round Interface
</li>
<li style="font-size:10px; margin-bottom:10px;">Shang Xia - Coming Soon
</li>
</ul>
</li>
<li style="font-size:12px;">+ Motion Graphic Design
</li>
<li style="font-size:12px;">3D Illustration
</li>
</ul>
</li>
<li style="margin-top:10px;"> O f f - B o o k s
<ul class="depth2">
<li style="font-size:12px;">Photography
</li>
<li style="font-size:12px;">Drawings + Paintings
</li>
</ul>
<li style="margin-top:10px;">c o n t a c t
</li>
</li>
</ul>
<div class="iconbar">
<img class="icon" src="styling/Icons/facebook.png">
<img class="icon" src="styling/Icons/linkedin.png">
<img class="icon" src="styling/Icons/tumblr.png">
<img class="icon" src="styling/Icons/Youtube.png">
<img class="icon" src="styling/Icons/meel.png">
</div>
</div>
CSS:
.menu {
width: 300px;
height: 152px;
padding: 0;
position: absolute;
top: 50%;
margin-top: -76px;
margin-left: 25px;
text-transform: uppercase;
}
.menu li {
margin:0;
}
.menu li {
display:block;
color:#000;
overflow:hidden;
}
.menu li a {
display:block;
padding:5px;
text-decoration:none;
font-family:'quicksandlight';
font-weight:900;
color:#000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
cursor:auto;
}
.menu li > ul {
display:none;
overflow:hidden;
padding:10;
}
.menu p ul.depth2 li a {
color:#fff;
display:block;
}
.menu li a:hover {
display:block;
padding:5px;
text-decoration:none;
font-family:'quicksandlight';
font-weight:900;
color:#999;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidemenu {
position:fixed;
height:100%;
left:0px;
top:0;
z-index:1500;
width:375px;
background-color:#FFF;
margin-left:-375px;
}
::-webkit-scrollbar {
width: 0px;
}
#arrow {
width:30px;
height:100px;
background-image:url(../img/arrow_l.png);
position:fixed;
left:0;
top:50%;
margin-top:-50px;
z-index:2000;
margin-left:0px;
rotateZ:0;
}
#font-face {
font-family:'quicksandlight';
src: url('../fonts/quicksand-light-webfont.eot');
src: url('../fonts/quicksand-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/quicksand-light-webfont.woff') format('woff'), url('../fonts/quicksand-light-webfont.ttf') format('truetype'), url('../fonts/quicksand-light-webfont.svg#quicksandlight') format('svg');
font-weight:normal;
font-style:normal;
}
.iconbar {
height:32px;
width:auto;
position:absolute;
top:100%;
margin-top:-32px;
left:25px;
}
.iconbar img {
width:auto;
height:16px;
margin-right:15px;
opacity:0.5;
}
.iconbar img:hover {
opacity:1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
JS:
<script>
$("#portfolio").click(function() {
if ($("#side_menu").css("margin-top") == "-76px") {
$("#side_menu").animate({
"margin-top": "-166px"
}, 2500);
} else {
$("#side_menu").animate({
"margin-top": "-76px"
}, 500);
}
});
$("#portfolio").click(function() {
if ($("#side_menu_img").css("margin-top") == "250px") {
$("#side_menu_img").animate({
"margin-top": "160px"
}, 2500);
} else {
$("#side_menu_img").animate({
"margin-top": "250px"
}, 500);
}
});
$("#arrow").click(function() {
if ($("#sidemenu").css("margin-left") == "0px") {
$("#sidemenu").animate({
"margin-left": "-375px"
}, 500);
} else {
$("#sidemenu").animate({
"margin-left": "-0px"
}, 500);
}
});
$("#arrow").click(function() {
if ($("#arrow").css("margin-left") == "0px") {
$("#arrow").animate({
"margin-left": "335px"
}, 500);
} else {
$("#arrow").animate({
"margin-left": "-0px"
}, 500);
}
});
swfobject.registerObject("FLVPlayer");
</script>
Looking at the source code on your website, below code prevents you from clicking a link inside your menu:
$('.menu a').click(function( e ){
//e.preventDefault(); // disable this to click enable the links
$(this).parent('li').find('ul:first').slideToggle();
});
What you better do, is refine your selector $('.menu a') to a better one, in order to select the items that need to toggle a submenu. about and contact for example needs to remain an ordinary link if I have understood you correctly.
HTML:
<li>
P o r t f o l i o
<!-- optionally add a class or data-attribute here to properly select in jquery -->
<!-- $('.menu ul') -->
<ul>
<li>Brand Identity's</li>
<li>Projects
</ul>
</li>
JS:
Find all the a elements prior to the ul elements inside .menu.
This should avoid selecting about and contact so they keep their default behavior to answer your question.
$('.menu ul').prev("a").click(function(e){
e.preventDefault();
// continue
});
some hints to clean up your code:
On te jquery part, don't select the same items twice and don't bind it twice to the same event. Sounds like overkill, don't you think?
$("#portfolio").click() // 3 times
$("#arrow").click() // 2 times
On the css + jquery part, instead of animating margin-top you might want to try the height of the .submenu or switch to a toggle function in jquery. Submenus are positioned fixed so it's better to avoid margin here and use top, bottom, left, right to adjust the position.
example of improvement
var mainmenu = $("#sidemenu"), // confuses with #side_menu so -> mainmenu
arrow = $("#arrow");
arrow.click(function () {
var mainmenuleft = parseInt(mainmenu.css("left"), 10),
arrowleft = parseInt(arrow.css("margin-left"), 10);
mainmenuleft = mainmenuleft === 0 ? -375 : 0;
arrowleft = arrowleft === 0 ? 335 : 0;
mainmenu.animate({ left: mainmenuleft }, 500);
arrow.animate({ marginLeft: arrowleft }, 500);
});
FIDDLE:
http://jsfiddle.net/tive/ez7WG/
I have the following Jquery script below that adds a the .hover class on rollover and then removes it on rollout. Currently, the background (whether image or color) fades in and out nicely. However, I don't want the menu text to fade in and out.
I'm aware of the CSS3 fade transitions and the Jquery color plugins but would like to have the option of fading in image backgrounds as well (which is why I'd like to fade in a class rather than just background-color.) Any help would be most appreciated:)Thanks in advance.
Jquery
$(document).ready(function () {
//Set the anchor link opacity to 0 and begin hover function
$("#menu-sample-menu li a").hover(function () {
//Fade to an opacity of 1 at a speed of 200ms
$(this).fadeOut(0).addClass('hover').fadeIn(300);
//On mouse-off
}, function () {
//Fade to an opacity of 0 at a speed of 100ms
$(this).fadeOut(300)
.queue(function () {
$(this).removeClass('hover').fadeIn(0).dequeue()
});
});
});
HTML
<nav id="access">
<ul id="menu-sample-menu" class="menu">
<li id="menu-item-198" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-198">Health Care Professional
</li>
<li id="menu-item-197" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-197">Web Designer
<ul class="sub-menu">
<li id="menu-item-199" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-199">Construction Worker
</li>
</ul>
</li>
</ul>
</nav>
Style
#access li {
position:relative;
float:left;
padding:0;
margin:0;
}
#access ul li:first-child {
padding-left:0;
}
#access a {
display:block;
padding:15px 24px;
color:#f0f0f0;
text-decoration:none;
}
#menu-sample-menu li {
color: black;
text-shadow: 0px 1px 4px #777;
background-color: green;
padding: 0 12px 0 12px;
}
#menu-sample-menu li a.hover {
background-color: orange;
background-image: url(images/over.jpg);
}
You can do this without javascript: http://jsfiddle.net/WjrnB/1/
Simply use:
#menu-sample-menu li a:hover {
background-color: orange;
background-image: url(images/over.jpg);
}
instead of
#menu-sample-menu li a.hover {
background-color: orange;
background-image: url(images/over.jpg);
}
and add:
#menu-sample-menu li a {
-khtml-transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
Xarcell's answer is probably the best simplicity-wise. If you are looking to accomplish this with JavaScript, one option would be using JQuery-UI which has addClass and removeClass functions which incorporate transitions.
Basically, the HTML and CSS is the same as above, but the JS would look as follows:
$(document).ready(function () {
//Set the anchor link opacity to 0 and begin hover function
$("#menu-sample-menu li a").hover(function () {
//Fade 'hover' class in at 300ms
$(this).addClass('hover', 300);
//On mouse-off
}, function () {
//Fade 'hover' class out at 300ms
$(this).removeClass('hover', 300);
});
});
And, of course, you would have to include JQuery-UI (I usually use Cloud Flair's CDNJS):
http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
Personally, I would use this method if I was already using JQuery-UI. Otherwise, I would go with Xarcell's solution.