Mif.Menu Demos
Nice animated menu using CSS and Mootools
This tutorial illustrates how to implement a nice animated menu using Mootoolsand some lines of CSS and HTML code ready to reuse in your project. This is the basic version with a basic design, but you can customize it how you prefer modifying the CSS related source code. Download this tutorial Live PreviewStep 1: HTML Code HTML code is very simple. You have a layer with ID mymenu which is your menu container, section header (H3 tag) and section content (ul list) which contains some sub-links for each section: ... so, HTML code is something like this: <div id="mymenu"><h3 class="toggler menusection">Menu Section 1</h3> <div class="element menusection"> <ul> <li><a href="1">Link 1</a></li><li><a href="2">Link 2</a></li><li><a href="3">Link 3</a></li><li><a href="4">Link 4</a></li> <h3 class="toggler menusection">Menu Section 2</h3> <div class="element menusection"> <ul> <li><a href="1">Link 1</a></li><li><a href="2">Link 2</a></li> ...and add this code in the <head> tag of the page: It's all!
Coda Popup Bubbles
In particular, Jorge Mesa writes to ask how to re-create their ‘puff’ popup bubble shown when you mouse over the download image. In essence the effect is just a simple combination of effect, but there’s a few nuances to be wary of. How to Solve the Problem To create the puff popup bubble effect, we need the following: Markup that assumes that JavaScript is disabled. The biggest trick to be wary of is: when you move the mouse over the popup, this triggers a mouseout on the image used to trigger the popup being shown. I’ve provided a screencast to walk through how create this functionality. Watch the coda bubble screencast (alternative flash version) (QuickTime version is approx. 23Mb, flash version is streaming) View the demo and source code used in the screencast HTML Markup For the purpose of reusability, I’ve wrapped my ‘target’ and ‘popup’ in a div. There’s very little to the minimum required CSS. The minimum I recommend for the example is: jQuery Mouse Over Mouse Out The ‘Trick’
Accessible expanding and collapsing menu
Everybody makes mistakes, so occasionally things go wrong. One example is when Swedish design magazine Cap&Design recently published a tutorial on creating a collapsing and expanding menu. While reading the article my jaw dropped as I realised that the tutorial uses invalid, non-semantic HTML, inline CSS and event handlers, bloated (but, amazingly, valid) CSS, and obtrusive JavaScript. In 2007. I sent an email to the magazine’s editor, who agreed that the article shouldn’t have been printed and took the example code offline. Instead of just complaining about the lousy code and deriving satisfaction from making them take the code offline, I decided to recreate the menu from the tutorial in a more modern way, using leaner and more efficient HTML and CSS, and unobtrusive JavaScript. The HTML The HTML that appeared in the article is this (shortened, and with id values translated from Swedish): This markup is problematic for several reasons: I replaced the HTML with this: The CSS The JavaScript
Processing XML with jQuery
Before you start While this tutorial is useful to seasoned developers looking to pick up or sharpen their jQuery and XML processing skills, it also provides a practical overview of essential DOM scripting concepts, which can bring even the most junior JavaScript coders up to speed and allow them to grasp the full scope of the tutorial. About this tutorial As advanced media- and data-rich web applications grow in population within the browser, technologies such as XML and jQuery become important components in their architecture due to their wide adoption and flexibility. The tutorial covers these specific topics: Introduction to the DOMXML and JavaScript in the browserjQuery and XMLCase study: LiveXMLEditor Prerequisites This tutorial assumes that you have a basic understanding of HTML and JavaScript. Your favorite text editor for writing and editing code.The jQuery library. See Resources for links to all the tool downloads. Back to top Introduction to the Document Object Model (DOM) Listing 1.
LavaLamp for jQuery lovers! | Ganesh
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
A VSDoc for jQuery 1.5 - Encosia
I’ve noticed several people looking for a jQuery 1.5 VSDoc this week. After looking around myself, I didn’t see one anywhere either. So, I updated Damian Edwards’ VsDocBuilder for jQuery 1.5 and generated a new VSDoc. It doesn’t handle the new jqXHR and Deferred return types quite right, so you won’t get Intellisense for the new chained $.ajax() callbacks. You can download it here: jQuery-1.5.0-vsdoc.js Update: Damian has just made a fully functional version of the 1.5 VSDoc available (that was quick): jquery-1.5-vsdoc.js. Important: This new VSDoc makes use of <para> tags to display line breaks inside documentation tooltips.
jQuery LavaLamp menu plugin
About 2 years ago I was looking for an animated menu plugin for jQuery using the sliding-doors CSS effect, figuring I would write my own if I couldn't find one. During my search I found Ganesh Marwaha's original jQuery 1.1 series LavaLamp plugin based on the work of Guillermo Rauch and his MooTools PowerMenu plugin . It was simple and straightforward - just what I was looking for. After working with it for a few days I wanted more flexibility so I added some features: both horizontal vertical re-sizing, the ability to set default starting location and a few other customizations. Since the release of this 'new-and-improved' LavaLamp plugin in March of 2008 I've had hundreds of emails from around the world requesting features and providing bug fixes and patches which I've done my best to apply in the 1.3 releases. By large the most requests were related to CSS and why certain CSS and HTML markup wasn't working for them with LavaLamp. target - default: 'li' Example: container - default: ''
