agepilar
12-15-2010, 06:38 PM
hi @ all!
i was searching for 3 days and now i`m totally out of ideas so i hope you guys can help me.
i tried to add the lavalamp menu to wordpress 3.03 with the "wp_nav_menu" and everything works fine but:
i added a category to the main menu and my problem is that the hover picture always jumps back to first menu item (the behaviour of the pages is correct, the picture goes to the last selected page and stay there if i select this page)
this is how i tried to integrated the menu in the boldy theme:
in the header i did this:
1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.lavalamp.js"></script>
2. <script type="text/javascript">
jQuery(document).ready(function($){
$('.current_page_item').addClass('current');
$('.lavaLampBottomStyle').lavaLamp({
fx: "easeOutBack",
speed: 900,
click: function(event, menuItem) {
return true;
}
});
});
</script>
3. <ul class="lavaLampBottomStyle" id="wp_nav_menu">
<?php if ( function_exists( 'wp_nav_menu' ) ){
wp_nav_menu( array( 'theme_location' => 'main-menu', 'container_id' => 'mainMenu', 'container_class' => 'ddsmoothmenu', 'fallback_cb'=>'primarymenu') );
}else{
primarymenu();
}?>
</ul>
my jquery.lavalamp.js is like this:
(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
return this.each(function() {
var me = $(this), noop = function(){},
$back = $('<li class="back"></li>').appendTo(me),
$li = $("li", this), curr=(($("li.current-cat-parent",this)[0]||
$("li.current-cat",this)[0])||
$("li.current_page_item",this)[0])||
$($li[0]).addClass("current_page_item")[0];
$li.not(".back").mouseover(function() {
move(this);
}, noop);
$(this).hover(noop, function() {
move(curr);
});
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
setCurr(curr);
function setCurr(el) {
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};
function move(el) {
$back.each(function() {
$(this).dequeue(); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};
});
};
})(jQuery);
i added also a lavalamp.css to design
i can`t figure out where the error is, thanks for your help!!
i was searching for 3 days and now i`m totally out of ideas so i hope you guys can help me.
i tried to add the lavalamp menu to wordpress 3.03 with the "wp_nav_menu" and everything works fine but:
i added a category to the main menu and my problem is that the hover picture always jumps back to first menu item (the behaviour of the pages is correct, the picture goes to the last selected page and stay there if i select this page)
this is how i tried to integrated the menu in the boldy theme:
in the header i did this:
1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.lavalamp.js"></script>
2. <script type="text/javascript">
jQuery(document).ready(function($){
$('.current_page_item').addClass('current');
$('.lavaLampBottomStyle').lavaLamp({
fx: "easeOutBack",
speed: 900,
click: function(event, menuItem) {
return true;
}
});
});
</script>
3. <ul class="lavaLampBottomStyle" id="wp_nav_menu">
<?php if ( function_exists( 'wp_nav_menu' ) ){
wp_nav_menu( array( 'theme_location' => 'main-menu', 'container_id' => 'mainMenu', 'container_class' => 'ddsmoothmenu', 'fallback_cb'=>'primarymenu') );
}else{
primarymenu();
}?>
</ul>
my jquery.lavalamp.js is like this:
(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
return this.each(function() {
var me = $(this), noop = function(){},
$back = $('<li class="back"></li>').appendTo(me),
$li = $("li", this), curr=(($("li.current-cat-parent",this)[0]||
$("li.current-cat",this)[0])||
$("li.current_page_item",this)[0])||
$($li[0]).addClass("current_page_item")[0];
$li.not(".back").mouseover(function() {
move(this);
}, noop);
$(this).hover(noop, function() {
move(curr);
});
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
setCurr(curr);
function setCurr(el) {
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};
function move(el) {
$back.each(function() {
$(this).dequeue(); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};
});
};
})(jQuery);
i added also a lavalamp.css to design
i can`t figure out where the error is, thanks for your help!!