View Full Version : Nav swapping for P with mouseover and fadeout

07-21-2011, 06:33 AM
I'm trying to create a jquery nav that will show up in place of the existing paragraph or div with a ul, then on the mouse out replace the existing paragraph. I'm not not too experienced with javascript, so I'm hoping it's just a simple and easy fix.

This is what I have so far. I managed to get it to work, somewhat, but the paragraph shows up if you mouse off the main button over the ul. And for some reason it doesn't always show the menu on the mouse over, is picky about which ones it does.

var showMenu = function ( el, menu, p )
var o = $(el).offset();
$(menu).css( { "left":o.left-122 + "px", "top":o.top+40 + "px", "z-index":100 } );
$(menu).mouseover( function () {
$(menu).mouseout( function () {
$(el).bind( 'mouseout', {target:menu}, function(e) {
$(el).bind( 'mouseover', function() {
$(el).bind( 'mouseout', function() {
var n=0;
$(document).ready(function() {
$('a#learn').mouseover( function() { showMenu($(this),$('div.subnavlearn'),$('p.learn')); });
$('a#connect').mouseover( function() { showMenu($(this),$('div.subnavconnect'),$('p.connect')); });
$('a#act').mouseover( function() { showMenu($(this),$('div.subnavact'),$('p.act')); });

see it live here: http://dev.joshuadnelson.com/clients/postgrowth/

07-21-2011, 08:45 PM
You could set it up so that onmouseover it does something like this:

document.getElementById('greenParagraph').innerHTML = document.write("<ul><li>Stuff</li><li>Stuff</li><li>Stuff</li><li>Stuff</li></ul>");

That alone will switch a paragraph with a list.

07-21-2011, 09:00 PM

Thanks. So, I want to keep the list if you mouse off the button (above the list/paragraph) to move over the list - like any other drop-down type navigation. Then if you mouseoff either the button/list entirely I want it to go back to the paragraph. Not entirely sure how I can get this to work... My code almost works, but has bugs.

-> Mouse over "button" div, swap the list for the paragraph.
-> Mouse off the button onto the list keep the list shown and the paragraph hidden.
-> Mouse off the button/list then swap the paragraph for the list, as originally displayed.

Right now I have the lists as separate elements wrapped in a div and control their location, z-index and opacity with css.

07-21-2011, 10:20 PM
Ok I understand better now. I think you are super close but it seems like you maybe just have some bugs. For example, when I load your page I can drag my mouse over the green button and the menu shows up, and goes away after I drag off either. However, the blue button wont work after the green one, and the page has to be reloaded to get it to work. Also, I'm not sure if your browser shows the list out of line? Anyways I will play around with it but I am no expert.

*Actually, now that I looked at it a little more, all of the lists stop showing up after I drag over the buttons numerous times. Not sure why, very weird. I am using Chrome.

07-21-2011, 10:23 PM

Thanks for playing around with it! Yea, I think I might have to approach it differently, because I get the same errors.

I'm thinking maybe I'll place the list via absolute position directly over the paragraph, then use jquery to change the display:none css option? Less monkeying around, but I'm on a deadline and this isn't my specialty.

Thanks for the help, let me know if you come up with a solution!


07-21-2011, 10:29 PM
That might be a good idea, also check into jQuery .toggle()


Not sure if you have seen this, I have used it before to do something similar to what you are doing. Plus, you can keep your fading effect! To get it to replace you just make the toggle deactivate one object when it activates the other.

07-21-2011, 10:31 PM
sweet, thanks Jake, I'll check that out!

I just had a thought of using a css option - :hover for the div that surrounds it all. If I get it figured out, I'll post it here.

07-22-2011, 05:39 PM
I see that you fixed it! Did you use hover/css?

07-22-2011, 06:02 PM
Yea, I did fix it! Entirely CSS, too, and works on all browsers. I had an "ah-ha" moment and figured it out. I had to fiddle around with the size and placement of things, to ensure that the list, when visible, would entirely overlap the paragraph (otherwise it flashes back in forth if you hover over the paragraph).

Here's the basic php/html:

<div class="sub_feature">
<a href="act" title="Act" id="act"><div class="button orange"><p>Act</p></div></a>
<p class="description act">
<em>What can I do?</em><br/>Activate your understanding and your connections to challenge the growth mantra!
<div class="subnavact frontnav">
<div class="actnavmenu">
<ul id=\"front_act_menu\" class=\"front_menu\">
<li id="menu-item-fmd" class="orange" style="-webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;"><a href="http://freemoneyday.org">Free Money Day</a></li>
<li id="menu-item-in-action" class="orange"><a href="<?php echo get_option('siteurl'); ?>/post-growth-in-action/">Post Growth In Action</a></li>
<li id="menu-item-self-reflections" class="orange"><a href="<?php echo get_option('siteurl'); ?>/self-reflections/">Self Reflections</a></li>
<li id="menu-item-toolkit" class="orange" style="-webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;"><a href="<?php echo get_option('siteurl'); ?>/toolkit/">Toolkit</a></li>

And the basic CSS:

.home .sub_feature p.description {
font-size:1.65em !important;
letter-spacing:-0.03em !important;
word-spacing:-0.05em !important;
line-height:1.7em !important;
text-align:left !important;
padding:10px !important;
margin:10px auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 4px rgba(0,0,0,.2);
-moz-box-shadow: 0 3px 4px rgba(0,0,0,.2);
box-shadow: 0 3px 4px rgba(0,0,0,.2);
.home .sub_feature .frontnav {display:none; width:273px;} // Hidden by default, match the width of the paragraph
.home .frontnav ul {
.home .frontnav ul li a {
padding: 5px 10px;
text-align: center;
text-shadow: 0 1px 1px rgba(0,0,0,.3);

.sub_feature:hover p.description,
.sub_feature .button:hover p.description {display:none;} // Hides paragraph when hovering over the main div or the paragarph
.sub_feature:hover .frontnav,
.sub_feature .button:hover .frontnav {display:block;} // shows the list when you hover over the main div or the button

.subnavact {position:absolute; left:0; top:82px;} // locates the list directly over the paragraph, to avoid hovering off it and "flickering" of the two back-and-forth
.actnavmenu {float:left;}
.actnavmenu ul {list-style:none;}
.actnavmenu li {font-size:1.6em; line-height:1.85em; text-align:center;}

Thanks for your help, Jake! I'm glad I got it to work with a simply, css-only solution. Though it would be nice to figure out a fadein/fadeout option at some point, I think it looks pretty slick now.

I think I'll put together a blog post on this at some point, I couldn't find anything like it online when I was searching for a solution (of course, I kept thinking I had to do it in javascript, so it's nice to see it work in css)


07-22-2011, 06:45 PM
Looks nice, I'm glad you were able to get it to work! Yeah I thought that javascript would be necessary too but css is so much easier, and it pretty much always works. Thanks!