I'm building a drop down menu for a project I'm working on, but I don't get it working entirely as is should. I want it to show the sub-menus when I hover the root-level menus, and then close again after a short delay when the menu or sub-menu is not hovered anymore. Most of it works; the sub-menus are showed when root-level items are hovered and it is hidden when I stop hovering the root-level item. The problem is that the sub-menus are also hidden when I move my cursor from the root-level item to a sub-menu item other than the first and hover that. This is obviously not good, so help would be appreciated.
I created a JSFiddle with the code which shows the issue more clearly.
So, here's my code:
menu.htm
<div id=m_wrapper>
<ul id=menu>
<li onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">Item 1
<div id=s0 onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">
<a href=#>Item 1.1</a>
<a href=#>Item 1.2</a>
<a href=#>Item 1.3</a>
</div>
</li>
</ul>
</div>
menu.css
#m_wrapper {
position:relative;
display:table;
}
#menu {
position:relative;
}
#menu li {
width:100px;
position:relative;
float:left;
list-style-type:none;
}
#menu div {
position:absolute;
visibility:hidden;
display:inherit;
width:100%;
z-index:30
}
#menu div a {
position:relative;
display:block;
z-index:35;
}
menu.js
var countdown = 300;
var timer = null;
var menu_item = null;
window.show_sub_menu = function(cath) {
if (menu_item) {
menu_item.style.visibility = 'hidden'; //Make sure to show one menu at a time
}
menu_item = window.document.getElementById("s" + cath);
menu_item.style.visibility = 'visible'; //Show menu
if (timer) {
window.clearTimeout(timer); //Reset timer, so menu is kept open
timer = null;
}
};
window.start_timer = function() {
timer = window.setTimeout(close_sub_menu, countdown);
};
window.close_sub_menu = function() {
menu_item.style.visibility = 'hidden';
};
you don't have to make it that complex.
ofcourse you can do same through javascript, but see how easy, readable and simple it is through jQuery.
See this DEMO
Just use following script
$('#menu li').hover(
function(){
$(this).stop().animate({height: '100px'},1000,function(){});
$(this).find('div').show(600);
}//gets called upon mousehover
,
function(){
$(this).stop().animate({height: '20px'},1000,function(){});
} //gets called upon mouseout
); //hover ends
and also, I don't know why you have written tonns of CSS. Just use these:
#menu
{
list-style:none;
}
#menu li
{
width:100px;
border:1px Solid #CCC;
text-align:Center;
cursor:pointer;
height:20px;
overflow:hidden;
}
#menu li div
{
border:1px Solid #CCC;
}
#s0
{
height:auto;
}
#s0 a
{
display:block;
}
There's plenty you can do through it, like selected dropdown item. selection through arrow key and what not. jQuery makes it simple for you.
first of all You should avoid <div> in <li> tags, because is not semantic.
Quite good is multi level menu build only with html and css styles.
HTML
<div id=m_wrapper>
<ul id=menu>
<li>Item 1
<ul>
<li><a href=#>Item 1.1</a></li>
<li><a href=#>Item 1.2</a></li>
<li><a href=#>Item 1.3</a></li>
</ul>
</li>
<li>Item 2</li>
</ul>
</div>
CSS STYLES
#m_wrapper, #menu, #menu li {
position:relative;
}
#m_wrapper {
display:table;
}
#menu li {
float:left;
width:100px;
list-style-type:none;
}
#menu li ul {
display: none;
}
#menu li:hover ul {
display: block;
margin: 0 10px;
padding: 0;
}
This can quite easily be achieved with HTML and CSS alone. Using CSS transitions we can make the menu fade when we hover off.
Example
I have also put this on JsFiddle
HTML
<nav>
<ul id="menu">
<li>
Home
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
CSS
#menu li
{
position: relative;
display: inline;
list-style: none;
padding-left: 15px;
}
#menu ul
{
margin: 0;
padding: 0;
list-style: none;
opacity: 0;
position: absolute;
top: 20px;
left: 5px;
// Transitions for our fade effect.
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
#menu ul li
{
display: block;
}
#menu li:hover > ul
{
opacity: 1;
// This stops the transition from happening on hover.
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
A pure CSS drop down menu
http://jsfiddle.net/steelywing/GANeX/8/
.nav {
background-color: #def;
height: 20px;
}
.nav * {
transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
}
li {
display: inline-block;
height: 20px;
}
.dropdown li {
display: block;
}
.dropdown ul {
visibility: hidden;
opacity: 0;
margin-top: -2px;
}
.dropdown:hover ul {
visibility: visible;
opacity: 1;
}
Remember that.. if You decide to implement the fade version, You should use crosbrowser opacity, like this:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
Related
In the following code .logo is hidden by default. I want to display it on scroll, so when it appears I want to move the <ul> to the right with some animation (for example sliding to the right). If you see the demo, you can see that when the logo appears or disappears, the <ul> changes its position in quite bad way, I want to make it more smooth.
How that can be achieved?
HTML:
<div class="header">
<div class="logo"><img src="http://i.imgur.com/C0ZR4RK.png" /></div>
<ul class="list">
<li>Lorem ipsum</li>
<li>dolor sit amet</li>
<li>consectetur.</li>
</ul>
</div>
jQuery:
$(function() {
var shrinkHeader = 300;
$(".logo").hide();
$(window).scroll(function() {
var scroll = getCurrentScroll();
if (scroll >= shrinkHeader) {
$('.header').addClass('shrink');
$(".logo").fadeIn("slow");
} else {
$('.header').removeClass('shrink');
$(".logo").fadeOut("slow");
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
Demo:
http://jsfiddle.net/ztdr68aw/
Use absolute positioning for your text you want animated. Then just give it the initial position you want and the one it should have once shrunken:
ul {
list-style: none;
font-size: 22px;
position:absolute;
top:5px;
left:10px;
transition:all .3s;
}
.shrink ul{
left:200px;
top:10px;
}
Demo: Fiddle
Try if this would help you,
http://jsfiddle.net/raaj_obuli/ztdr68aw/1/
.list {
position: absolute;
left: 0;
top: 0;
transition: all 500ms;
}
.header.shrink .list {
left: 200px;
}
I think this will help you. Thanks!
$(function(){
var shrinkHeader = 300;
$( ".logo" ).hide();
$(window).scroll(function() {
var scroll = getCurrentScroll();
if ( scroll >= shrinkHeader ) {
$('.header').addClass('shrink');
$( ".logo" ).show();
}
else {
$('.header').removeClass('shrink');
$( ".logo" ).hide();
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
Use this Code
ul {
list-style: none;
font-size: 22px;
position:absolute;
top:5px;
left:10px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.shrink ul{
left:200px;
top:10px;
}
Hi guys i want to make a menu similar to this site: http://tommasoraspo.com/creativepartners/DesignLovers/index.html
But I don't know how i would animate the Bookmark to show up when i hover a link. I thought in using animate.css (slideInDown animation) but then it would only show up when hover over but wouldn't get back when hover out.
Initiate Animation on Hover:
function animationHover(element, animation){
element = $(element);
element.hover(
function() {
element.addClass('animated ' + animation);
},
function(){
//wait for animation to finish before removing classes
window.setTimeout( function(){
element.removeClass('animated ' + animation);
}, 2000);
});
}
The site you point to isn't using an javascript. Rather, they are using css3 transitions to animate the background position of an image that is "off-canvas" when the site is loaded.
Here's a fiddle with the relevant css/html.
You may have to tweak the values to suit your specific design and image.
HTML:
<ul class="nav">
<li>Menu Item 1
</li>
<li>Menu Item 2
</li>
<li>Menu Item 3
</li>
<li>Menu Item 4
</li>
</ul>
CSS:
ul.nav {
list-style: none;
margin: 0;
}
ul.nav li {
float: left;
margin: 0 0 0 30px;
}
ul.nav li.current a, ul.nav li a:hover {
background-position: 50% 0;
}
ul.nav li a {
height: 50px;
line-height: 50px;
display: block;
padding: 50px 20px 0;
position: relative;
background: url(http://lorempixel.com/50/70/abstract/) no-repeat 50% -90px;
-webkit-transition: background-position 0.2s linear;
-moz-transition: background-position 0.2s linear;
transition: background-position 0.2s linear;
}
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.
i am having some trouble configuring my javascript with my css so that when an image is clicked a little caption bar will appear with icons in it. Currently when i hover over the image the caption bar appears but i want to change this so that it will be usable for users on tablets where they have to touch and don't have the hover feature.
View page
<figure>
<img width="158" height="158" alt="Gravatar"
data-bind="attr:{src: GravatarUrl}" />
<figcaption>
<a title="Email" id="emailIcon" class="icon-envelope icon-white"
data-bind="attr:{'href':'mailto:' + Email()}"></a>
<a title="Profile" id="profileIcon" class="icon-user icon-white"></a>
</figcaption>
</figure>
CSS
figure, figcaption {
display: block;
}
figure {
position:relative;
float:left;
margin:20px;
width:158px;
height:158px;
border:1px solid #333;
overflow:hidden;
background: #fff;
padding: 1px;
}
figure figcaption {
position:absolute;
bottom:0;
left:0;
opacity: .75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
}
figure.open figcaption {
margin-bottom:0px;
}
figcaption {
width:160px;
height:25px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}
Javascript Not sure if there is a way to do it with just css or not.
<script type="text/javascript">
(function ($) {
$.views.Roster.GetRoster('#url');
$('figure').on('click', function (event) {
$(event.currentTarget).toggleClass('open');
});
})(jQuery);
</script>
It's a great idea to just toggle a class and leave the visible elements to CSS.
$('figure').on('click', function (e) {
$(this).toggleClass('open');
});
In that case, style your figcaption the way you want it to look and then add:
figcaption { display: none; }
.open figcaption { display: block; }
This way, when the figcaption is hidden by default but when you click the target and the javascript adds the class "open" the figcaption will be visible. You certainly don't have to have it display block, it could be most anything other than "none."
If this code
figure:hover figcaption {
margin-bottom: 0px;
}
is showing the figcaption and you are putting open class to the figure when you want to show it, you can use:
figure:hover figcaption, figure.open figcaption {
margin-bottom: 0px;
}