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.

Be Sociable, Share!

•