jQuery lavaLamp, misbehaving with child <ul>'s
I've been playing around with http://nixboxdesigns.com/projects/jquery-lavalamp/ for a navigation menu on a new site I'm building and it works great with minimal fuss, I then started wondering if I could add some sub navigation options to the menu and set about building that in. The trouble I'm having is making the lavaLamp plugin ignore nested/child ul/li's.
You can see a live example of the issue here: http://www.weleasewodewick.com/redesign2 - hover over the 'Blog' li then over the submenu that pops in.
I won't post the full source for the plugins as it's pretty lengthy but you should be able to view them directly here:
lavaLamp jQuery Plugin
http://www.weleasewodewick.com/redesign2/includes/jquery.lavalamp.js
Menu Markup
<nav>
<article>
<ul>
<li><a href="#Home" alt="#">Root</a></li>
<li><a href="#About" alt="#">Who?</a></li>
<li><a href="#Projects" alt="#">Projects</a></li>
<li><a hr开发者_如何学JAVAef="#Resume" alt="#">Blog</a>
<ul class='children'>
<li class="page_item page-item-18"><a href="http://localhost/wordpress/?page_id=18" title="History">History</a></li>
<li class="page_item page-item-13"><a href="http://localhost/wordpress/?page_id=13" title="Our Company">Our Company</a></li>
<li class="page_item page-item-15"><a href="http://localhost/wordpress/?page_id=15" title="Our Staff">Our Staff</a></li>
</ul>
</li>
<li><a href="#Resume" alt="#">Contact</a></li>
</ul>
</article>
</nav>
lavaLamp Activation
$(function() { $('nav>article>ul').lavaLamp(); });
Would really appreciate your input on this issue :)
** Purpose ** The final resting place of this mockup is a WordPress template, so the nested structure of the menu mostly needs to remain the same.
Much appreciated Foxed
huh, finally I got it work :) here's the Demo : http://jsbin.com/uyali3
It is difficult to achieve this task using <ul> as child node, so I changed it to <div>
go check out the code yourself =)
NOTE : Next time when you post a question please be sure, to provide the proper code/HTML. I took me around 45 min to understand your entire code. At last I found a fix to your problem =)
Code :
<!DOCTYPE html>
<html>
<head>
<title> cssFix </title>
<meta charset=utf-8 />
<style type="text/css">
body { background : #2f2f2f; }
ul li {
display:inline;
float:left;
list-style-type:none;
margin-right:10px;
position:relative;
z-index:5;
}
ul li.backLava {
-moz-border-radius :6px;
background:none repeat scroll 0 0 #009912;
}
ul li a {
color:#B9B9B9;
display:block;
font: bold 14px Arial;
padding:17px 10px 6px;
position:relative;
text-decoration:none;
text-shadow:0 1px 0 #38302F;
}
ul li a:hover {
color:#ff0;
font-size:14px;
}
ul li a:active {
color:#FFFFFF;
}
.children {
background-color:#333333;
left:-999em;
list-style:none outside none;
min-width:100px;
position:absolute;
}
li:hover .children {
-moz-border-radius:6px 6px 6px 6px;
background:none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
left:auto;
margin:0;
padding:10px;
}
</style>
</head>
<body>
<ul style="position: relative;" class="ulclass">
<li class="selectedLava"><a alt="#" href="#Home">Root</a></li>
<li><a alt="#" href="#About">Who?</a></li>
<li><a alt="#" href="#Projects">Projects</a></li>
<li>
<a alt="#" href="#Resume">Blog</a>
<div class="children">
<span><a href="#">History</a></span>
<span><a href="#">Our Company</a></span>
<span><a href="#">Our Staff</a></span>
</div>
</li>
<li><a alt="#" href="#Resume">Contact</a></li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://www.weleasewodewick.com/redesign2/includes/jquery.lavalamp.js" ></script>
<script type="text/javascript" >
$(function() {
$('ul').lavaLamp();
});
</script>
</body>
</html>
I had the same question too, but I didn't want to modify wordpress templates:
Firstly I thought about adding the class "noLava" to every <li> with depth > 1, so I tried to expand the Walker class with a custom one - with no success.
Then I started to modify the lavalamp jquery plugin, and after having tried all day long I found the solution here, so I modified it as below, and it works like a charm :)
{find `var $li = jQuery('li[class!=noLava]', this);` and replace with:}
//var $li = jQuery('li[class!=noLava]', this); //default one
//by Paolo Bergantino, via https://stackoverflow.com/questions/965816/what-jquery-selector-excludes-items-with-a-parent-that-matches-a-given-selector/965962#965962
jQuery.expr[':'].parents = function(a,i,m){
return jQuery(a).parents(m[3]).length < 1;
};
var $li = jQuery('li', this).filter(':parents(.children, .sub-menu)'); //for worpress :) by lelebart
Maybe the best solution is to preserve the original behavior and add this one.
Edit: [online demo]
I forked the LavaLamp plugin, and added a "hoverTarget" option. It uses an element inside the "target" element for the hover detection. (default: "a")
This fixes the issues with child lists.
get it here: GitHub
加载中,请稍侯......
精彩评论