WordPress Lavalamp Navigation Tutorial

• Nigel Thomson

  Thanks for that Devin it helps a lot
  in your 5th? paragraph (the one that begins “To get started you must have WordPress”)the jquery easing plugin link actually seems to link to a css file.
  Personally i think a link to the css file is a good idea for those of us who are struggling with styling things.

  Also you mention using googles links do they host all the files? or just some

• Jan

  Hi Devin,
  thanks for the post. I had this working in my wordpress site, but then tried to load my jquery the ‘right’ way, or so i’m told.
  what do I need to change in the script to get this to function correctly?

  [/code]
  

  
  <link rel="stylesheet" href="/scripts/nivo-slider.css" type="text/css" media="screen" />

  
  <script src="/scripts/jquery.nivo.slider.pack.js" type="text/javascript">

  <script src="/scripts/jquery.lavalamp-1.3.4a4.js" type="text/javascript">
  <script src="/scripts/jquery.easing.1.3.js" type="text/javascript">

  jQuery(window).load(function() {
  jQuery('#slider').nivoSlider();
  });

  $(function() {
  $("#1, #2, #3").lavaLamp({
  fx: "backout",
  speed: 700,
  click: function(event, menuItem) {
  return false;
  }
  });
  });
  [/code/

• http:/www.dlocc.com Devin Walker

  You need to load the jQuery Library also, that’s the most important part. Know what I’m sayin’?

• Jan

  Hi Again,
  one more question, I have it working, but it doesn’t stick when you click a link. I’m guessing there is a step I missed?
  any suggestions?

• http://www.krishnasolanki.co.uk Krishna

  Exactly what I was looking for! bookmarked and will be implemented soon!
  Thanks a bunch!

• http:/www.dlocc.com Devin Walker

  Awesome, glad you got what you’re looking for.

• sanksr

  on load of page the menu hover lavalamp orange color is extending to the full length of the screen. it must remain within the home tab/link.
  It happens only when the page is loaded. But when mouse-over it disappears

• http://dkpat.net dkpat

  Thanks for this tutorial! I can only hope I can get it to work when I get the chance. I haven’t had much luck so far with LavaLamp menu… I’ll report back when I get a chance to try it!

• http://www.frankmorin.org Frank Morin

  Thanks for the tutorial.

  I’m working on another web page using a theme that uses this type of lavalamp menu. The only problem is I have some submenu links I want to show up in a dropdown menu. Do you know how to add that functionality? It’s not natively supported in the theme I’ve chosen.

  Thanks

  Frank

• Kjetterman

  Hi Devin!  I actually just found this tutorial.  Unfortunately, it isn’t working for me.  Please let me know your thoughts.

  Here is the code that I have inserted in header.php:

  <script language=""javascript"" type=""text/javascript"src="wp-content/themes/metric/scripts/jquery-1.4.1.min.js"></script>
  <link rel="stylesheet" href="wp-content/themes/metric/lavalamp.css" type="text/css" media="screen" />
  <script type=""text/javascript"" src="wp-content/themes/metric/scripts/jquery.easing.min.js"></script>
  <script type=""text/javascript"" src="wp-content/themes/metric/scripts/jquery.lavalamp.min.js"></script>
  <!-- this script initiates the function change the #nav to your unordered list's ID -->
  <script type=""text/javascript"">
  $(function() {
  $("#nav").lavaLamp({
  fx: "backout",
  speed: 700,
  click: function(event, menuItem) {
  return true;
  }
  });
  });
  </script>
  

  Is there anything additional that I need to do in order to get it to work?

Support

Topics

DLOCC Socials