Posted on by Jude Pereira

P&P Lava Lamp nav for your WP Blog

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.

23 Replies to “P&P Lava Lamp nav for your WP Blog”

  3. 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?

  5. 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.

  7. Jude :
    @Rafa
    Modify:
    #menu ul li a.current_page_item
    to look like this:
    #menu ul li.current_page_item

    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” :)

  9. 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

  11. 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.

  14. 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.

  15. 2ne :
    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

    I don’t understand what is it you exactly want to do. Can you explain it a bit more in detail?

  17. 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

  19. 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.

  20. 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!

  21. Is it possible to have the sub-menu appear. I have seen this done on some sites with Lava Lamp.

Comments are closed.