{"id":194,"date":"2009-05-04T12:15:41","date_gmt":"2009-05-04T08:15:41","guid":{"rendered":"http:\/\/judepereira.com\/blog\/?p=194"},"modified":"2009-05-11T19:46:12","modified_gmt":"2009-05-11T15:46:12","slug":"pp-lava-lamp-nav-for-your-wp-blog","status":"publish","type":"post","link":"https:\/\/judepereira.com\/blog\/pp-lava-lamp-nav-for-your-wp-blog\/","title":{"rendered":"P&P Lava Lamp nav for your WP Blog"},"content":{"rendered":"

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<\/a> and Cory’s Place<\/a>. 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.<\/a> This is also for the lazy man, the quick “copy & paste” method.<\/p>\n

So let’s get started, shall we?<\/strong><\/p>\n

Download this zip file containing the jQuery files for Lava Lamp Menu<\/a><\/strong> Unzip the files in your theme direcrory.<\/p>\n


\nPut the following code in your header.php before the head tag closes:<\/p>\n

\r\n<script type=\"text\/javascript\" src=\"http:\/\/YOUR_SITE.com\/blog\/wp-content\/themes\/YOUR_THEME\/jquery-1.2.3.min.js\"><\/script> \r\n<script type=\"text\/javascript\" src=\"http:\/\/YOUR_SITE.com\/blog\/wp-content\/themes\/YOUR_THEME\/jquery.easing.min.js\"><\/script> \r\n<script type=\"text\/javascript\" src=\"http:\/\/YOUR_SITE.com\/blog\/wp-content\/themes\/YOUR_THEME\/jquery.lavalamp.min.js\"><\/script> \r\n<script type=\"text\/javascript\">\r\n$(function() {\r\n$(\"#nav\").lavaLamp({\r\nfx: \"backout\",\r\nspeed: 700\r\n});\r\n});\r\n<\/script>\r\n<\/pre>\n
Replace “your_site” and “your_theme”.<\/p>\n
Then put the following wherever your navigation part is(generally in header.php):<\/p>\n
\r\n<!-- Begin Lava Lamp Navigation -->\r\n<div id=\"catnav\">\r\n<ul id=\"nav\" class=\"lavaLamp\">\r\n <li><a href=\"<?php echo get_settings('home'); ?>\">Home<\/a><\/li>\r\n <?php wp_list_pages('title_li=&depth=1'); ?>\r\n <?php wp_list_categories('title_li=&depth=1'); ?>\r\n <li><?php if (is_user_logged_in()) { ?><a href=\"<?php echo get_option('home'); ?>\/wp-admin\/\">Site Admin<\/a><?php } ?><\/li>\r\n<\/ul>\r\n<\/div> <!-- End Lava Lamp Navigation -->\r\n<\/pre>\n
Then put the following in your style.css:<\/p>\n
\r\n#catnav {\r\nmargin:0 auto;\r\nclear:both;\r\nheight:14px;\r\n}\r\n\r\n#nav {\r\nlist-style:none;\r\noverflow:visible;\r\n}\r\n\r\n#nav ul {\r\nmargin:0;\r\npadding:0;\r\n}\r\n\r\n#nav li {\r\nmargin:0;\r\nheight:14px;\r\npadding:0;\r\ntext-align:center;\r\n}\r\n\r\n#nav a {\r\ndisplay:block;\r\nline-height:12px;\r\nmargin:0 10px;\r\npadding:0;\r\nfont-size:11px;\r\nfont-weight:bold;\r\ncolor:#000;\r\ntext-align:center;\r\n}\r\n\r\n#nav li a:hover {\r\ncolor:#000;\r\ntext-decoration:none;\r\ndisplay:block;\r\n}\r\n\r\n#nav li ul {\r\nlist-style:none;\r\nposition:absolute;\r\nwidth:150px;\r\nleft:-999em;\r\n}\r\n\r\n#nav li li {\r\nwidth:150px;\r\nleft:auto;\r\n}\r\n\r\n#nav li li a {\r\nwidth:150px;\r\nline-height:12px;\r\ncolor:#FFF;\r\n}\r\n\r\n.lavaLamp {\r\nposition:relative;\r\nheight:14px;\r\noverflow:hidden;\r\n}\r\n\r\n.lavaLamp li {\r\nfloat:left;\r\nlist-style:none;\r\n}\r\n\r\n#nav li.back {\r\nborder-bottom:solid 1px #cdd;\r\nheight:14px;\r\nz-index:1;\r\nposition:absolute;\r\n}\r\n\r\n.lavaLamp li a {\r\nz-index:1;\r\n}\r\n<\/pre>\n
Save all files and refresh your blog page! What the above does is that it creates an line sliding below the menu.<\/p>\n
Have fun! <\/p>\n
You can post any related problems.<\/p>\n","protected":false},"excerpt":{"rendered":"
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<\/a> and Cory’s Place<\/a>. 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, releasing soon.<\/a> This is also for the lazy man, the quick “copy & paste” method.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[52],"tags":[59,56,57,58],"class_list":["post-194","post","type-post","status-publish","format-standard","hentry","category-code","tag-jquery","tag-lava-lamp","tag-nav","tag-slide"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t