LavaLamp for jQuery lovers! Hover above and feel for yourself, the nifty effect of Lava Lamp. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light weight. Just so you know, it weighs just 700 bytes(minified)! Often I have noticed, that the credits are usually granted towards the end. As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”.
I hope you agree that a typical HTML widget consists of 3 distinct components. A semantically correct HTML markupA CSS to skin the markupAn unobstrusive javascript that gives it a purpose Now lets follow the above steps and implement the LavaLamp menu for your site. Step 1: The HTML Since most UI developers believe that an unordered list(ul) represents the correct semantic structure for a Menu/Navbar, we will start by writing just that. Bonus. Dock and Stack Examples. Untitled. Creating a Fancy menu using CSS3 and jQuery Fancy menu was made popular by devthought, it is develop on top of the Mootools library.
And later a jQuery version of this menu called lavalamp was made popular by Ganesh. This time I will show you how to achieve the same effect using the CSS3 new features. Note: Best viewed in a WebKit Browser (Safari and Chrome). This sample is just to demonstrate the capabilities of the new CSS3 features. The HTML Markup <div class="lavalamp" ><ul><li class="active"><a href="">Home</a></li><li><a href="">About</a></li><li><a href="">Blog</a></li><li><a href="">Services</a></li><li><a href="">Portfolio</a></li><li><a href="">Contacts</a></li><li><a href="">Back to Article</a></li><li><a href="">How it Works?
As best practice we have to use the list elements for the menu item. The CSS The following block of code is used for styling our div with the class of lavalamp. The CSS code for the menu item. The CSS code for our floating/animated div element. Transition property syntax: Sliding menu using jQuery. Time for round #2!
This time we’ll be building a sleek menu using jquery and some styles. What’s beautiful about jquery is how you can change a few bits and you get an entirely new effect. Last time we built some rollovers and tooltips using jquery and this time we’ll be building our slide menu on top of the same code. This tutorial assumes that you have a basic knowledge of jquery. Before we start, you might want to go ahead and try our example of sliding menus using jquery.
UPDATE: July 20. The markup This is exactly the same than before, but for the newcomers here it goes again: As you can see is just a row of li’s with an anchor and two blocks inside it: an image, who triggers the hover event, and a span that is revealed when the event launches. The idea here is to horizontally expand the li width, thus revealing the hidden span that at the same time will be animated in opacity fading in. The styling Basic as it is, it’s all we need. The code You might want to check these related posts: