{"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_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_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}},"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":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pqtyx-38","jetpack-related-posts":[{"id":1659,"url":"https:\/\/judepereira.com\/blog\/clion-and-openframeworks\/","url_meta":{"origin":194,"position":0},"title":"CLion 1.1.1 and openFrameworks 0.8.4","author":"Jude Pereira","date":"October 2, 2015","format":false,"excerpt":"A basic template to start building oF projects using CMake within CLion. It's here on GitHub! All credits go to kureta for the CMake files. I've just pieced it together as a project which can be imported.","rel":"","context":"In "another snippet | code"","block_context":{"text":"another snippet | code","link":"https:\/\/judepereira.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1675,"url":"https:\/\/judepereira.com\/blog\/sending-notifications-via-apples-new-http2-api-using-jetty-9-3-6\/","url_meta":{"origin":194,"position":1},"title":"Sending notifications via Apple’s new HTTP\/2 API (using Jetty 9.3.6)","author":"Jude Pereira","date":"January 9, 2016","format":false,"excerpt":"HTTP\/2 is still very much new to Java, and as such, there are just two libraries who support it - Jetty (from 9.3), and Netty (in alpha). If you're going the Jetty way (as I have), you'll need to add their ALPN library to your boot classpath. Note: Jetty 9.3.x\u2026","rel":"","context":"In "another snippet | code"","block_context":{"text":"another snippet | code","link":"https:\/\/judepereira.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1665,"url":"https:\/\/judepereira.com\/blog\/openframeworks-and-appcode\/","url_meta":{"origin":194,"position":2},"title":"openFrameworks and AppCode","author":"Jude Pereira","date":"November 8, 2015","format":false,"excerpt":"Developing an openFrameworks app with AppCode is pretty easy. However, if you just open and run the project created by the project generator, you might see the following errors: Why doesn't it just work? This is because openFrameworks doesn't support 64 bit builds yet on the Mac, due to a\u2026","rel":"","context":"In "another snippet | code"","block_context":{"text":"another snippet | code","link":"https:\/\/judepereira.com\/blog\/category\/code\/"},"img":{"alt_text":"Building a stock openFrameworks app results in these errors","src":"https:\/\/i0.wp.com\/judepereira.com\/blog\/wp-content\/uploads\/fails_by_default-1024x407.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/judepereira.com\/blog\/wp-content\/uploads\/fails_by_default-1024x407.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/judepereira.com\/blog\/wp-content\/uploads\/fails_by_default-1024x407.png?resize=525%2C300 1.5x"},"classes":[]},{"id":1918,"url":"https:\/\/judepereira.com\/blog\/sending-ota-updates-over-wifi-to-your-esp8266\/","url_meta":{"origin":194,"position":3},"title":"Sending OTA updates over WiFi to your ESP8266","author":"Jude Pereira","date":"December 21, 2020","format":false,"excerpt":"This Christmas, I added a whole bunch of lights powered by 5V power sources. My goal was to switch them on at sunset, and switch them off on sunrise, by using a MOSFET for power control :) While I was doing this, I wanted to send OTA updates of my\u2026","rel":"","context":"In "another snippet | code"","block_context":{"text":"another snippet | code","link":"https:\/\/judepereira.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1696,"url":"https:\/\/judepereira.com\/blog\/mocking-the-http2-apple-push-notification-gateway-in-go\/","url_meta":{"origin":194,"position":4},"title":"Mocking the HTTP\/2 Apple push notification gateway in Go","author":"Jude Pereira","date":"February 17, 2016","format":false,"excerpt":"At CleverTap, we had the need to mock the new HTTP\/2 Apple push gateway API. After trying to do this in Java, and then in Python, I succeeded in getting it to work in Go. Go out of all languages! To me, Go has a completely strange syntax, compared to\u2026","rel":"","context":"In "another snippet | code"","block_context":{"text":"another snippet | code","link":"https:\/\/judepereira.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1845,"url":"https:\/\/judepereira.com\/blog\/intellij-on-steroids-with-g1-gc\/","url_meta":{"origin":194,"position":5},"title":"IntelliJ on steroids with G1 GC","author":"Jude Pereira","date":"June 15, 2018","format":false,"excerpt":"Lately, I noticed that IntelliJ started to pause for quite some time during it's GC cycles, and that it was very frequent when I was editing three files (over 1.2k LOC each) split vertically. The current version of IntelliJ runs on a bundled version of Java 1.8, who's default garbage\u2026","rel":"","context":"In "another snippet | code"","block_context":{"text":"another snippet | code","link":"https:\/\/judepereira.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/posts\/194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/comments?post=194"}],"version-history":[{"count":20,"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/posts\/194\/revisions"}],"predecessor-version":[{"id":259,"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/posts\/194\/revisions\/259"}],"wp:attachment":[{"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/media?parent=194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/categories?post=194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/judepereira.com\/blog\/wp-json\/wp\/v2\/tags?post=194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}