After two days of having intense jolts given to my head, I finally got the lava lamp navigation working! The orignal idea is from G. Marwaha’ Blog and Cory’s Place. By compiling the two articles, I have a clean way to implement it in probably any wordpress theme. I struggled at this one… but where there is a will, there is a way. This has been tested on the wordpress default theme and the subtleflux theme. You can see it live at my developmental theme. This is also for the lazy man, the quick “copy & paste” method.
So let’s get started, shall we?
Download this zip file containing the jQuery files for Lava Lamp Menu Unzip the files in your theme direcrory.
Put the following code in your header.php before the head tag closes:
<script type="text/javascript" src="http://YOUR_SITE.com/blog/wp-content/themes/YOUR_THEME/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="http://YOUR_SITE.com/blog/wp-content/themes/YOUR_THEME/jquery.easing.min.js"></script>
<script type="text/javascript" src="http://YOUR_SITE.com/blog/wp-content/themes/YOUR_THEME/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#nav").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
Replace “your_site” and “your_theme”.
Then put the following wherever your navigation part is(generally in header.php):
<!-- Begin Lava Lamp Navigation -->
<div id="catnav">
<ul id="nav" class="lavaLamp">
<li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
<?php wp_list_pages('title_li=&depth=1'); ?>
<?php wp_list_categories('title_li=&depth=1'); ?>
<li><?php if (is_user_logged_in()) { ?><a href="<?php echo get_option('home'); ?>/wp-admin/">Site Admin</a><?php } ?></li>
</ul>
</div> <!-- End Lava Lamp Navigation -->
Then put the following in your style.css:
#catnav {
margin:0 auto;
clear:both;
height:14px;
}
#nav {
list-style:none;
overflow:visible;
}
#nav ul {
margin:0;
padding:0;
}
#nav li {
margin:0;
height:14px;
padding:0;
text-align:center;
}
#nav a {
display:block;
line-height:12px;
margin:0 10px;
padding:0;
font-size:11px;
font-weight:bold;
color:#000;
text-align:center;
}
#nav li a:hover {
color:#000;
text-decoration:none;
display:block;
}
#nav li ul {
list-style:none;
position:absolute;
width:150px;
left:-999em;
}
#nav li li {
width:150px;
left:auto;
}
#nav li li a {
width:150px;
line-height:12px;
color:#FFF;
}
.lavaLamp {
position:relative;
height:14px;
overflow:hidden;
}
.lavaLamp li {
float:left;
list-style:none;
}
#nav li.back {
border-bottom:solid 1px #cdd;
height:14px;
z-index:1;
position:absolute;
}
.lavaLamp li a {
z-index:1;
}
Save all files and refresh your blog page! What the above does is that it creates an line sliding below the menu.
Have fun! You can post any related problems.
Comments
23 responses to “P&P Lava Lamp nav for your WP Blog”
Supper Bro, i was on this for half a day, now it is done in 5 min :) :) supper
Glad it worked for you :)
@LHT, this has worked for many, can you please try this with a fresh and clean install of a wordpress theme?
I tried this out of many but it still can’t get it work. Firebug says that “$(“#nav”).lavaLamp is not a function”. I tried to replace $ with “jquery” but nothing worked. Any idea?
this one is cool! I been looking for this simple steps months ago! finally it works on my theme! thanks for sharing and more power!
The javascript and CSS are completely standard. It shouldn’t be a problem much in Safari. As on my machine, I run GNU/Linux and it renders well on all browsers I have installed.
Hi Jude, I’ve putted a background image and made everything from scratch. Now works correctly in all browsers except in Safari under OSX, it loads rare but then goes well. Take a look http://www.rnlagos.com/dev/
I made the changes but is still bad. I’m thinking to put an image in background and then don´t need the changes of the text. Maybe is a little bug.
Thanks for the help, if you come to Madrid I will give you a couple of beer and “tapas” :)
@Rafa
Modify:
#menu ul li a.current_page_item
to look like this:
#menu ul li.current_page_item
Ops!, after various tests I uploaded the local version and had not realized the changes of the path, sorry. Now I fixed it and goes ok in all browsers and only have the original issue with the current page. Probably is simple but I’m not a programmer and I am getting crazy with test and error ;)
I insert the ul tag like you told me but don’t work. Maybe is the file jquery.lavalamp.min.js, in that file there are references to the current page.
Here is the css file:
http://www.rnlagos.com/dev/wp-content/themes/ForScreencast/style/css/layout.css
Hmmm, I took a look at the source and the javascript isn’t correct. Notice that the script is pulling it from localhost at port 8888 in
when it should be http://www.rnlagos.com/dev/wp-content/themes/ForScreencast/style/js/jquery.easing.1.3.js That will and should solve the problem of the jquery javascript.I tested in XP and don’t work neither in Firefox or IE. Excuse my limit english, i’m from Spain and work on Mac. Now is 9:00 PM. Tomorrow early I’ll started from scratch and then test all again. I will post tomorrow the result when finished.
Thanks for your speed in answering.
Nop, I tried it but don’t works. I upload the siteand now also do not autostart. Here is the url; http://www.rnlagos.com/dev/
@Jude
@Rafa
Try it with #menu ul li a.current_page_item
Thank’s Jude for your tutorial. It works fine for me but I have a little issue, the “class current_page_item” don’t work. I don´t have the site on line, just working in local so you can’t see yet.
This is the CSS code:
#menu li a.current_page_item {text-decoration: none;
color: #ccc;
}
I don’t understand what is wrong.
I don’t understand what is it you exactly want to do. Can you explain it a bit more in detail?
http://2ne.co.uk/ – example
Hello, cheers for this, ive got it working for calling categories for pages but i don’t want to use all of the categories. Is there any way of telling the menu to only use certain categories? Cheers
Robin:
Yes you can add an image as the sliding background. Kindly refer to G. Marwaha’s Blog. He describes the howto on the image very clearly. :)
Chris:
For the sub-menu I think you would have to do the same thing as the main-menu. Name the sub-menu div as the main-menu div id. That should work. Let me know how it works out.
Could this solution be implemented to have an image as a background to an element instead of a border? I tried switching the border out for an image, but it covered the element altogether and prevented the user from clicking it. Any suggestions? Thanks!
Is it possible to have the sub-menu appear. I have seen this done on some sites with Lava Lamp.
Hey, I’m glad you finally got it working :)