Mootools menu with accordeon and hover effects. Slashdot Menu. Proto.Menu :: prototype based context menu. Projects. Mozilla Firefox. 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. Thank you very much for doing that – hopefully it will limit the number of people using the code in their projects. 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 This markup is problematic for several reasons: I replaced the HTML with this: The CSS. 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!
jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready. Posted by Maggie on 04/02/2009 Topics: css jQuery jQuery UI ThemeRoller ui design Update: We contributed this menu plugin to the jQuery UI library. We got lots of fantastic feedback on our earlier iPod-style menu, and decided to upgrade it for jQuery 1.3. As noted in our original post, the iPod-style menu provides easy navigation of complex nested structures with any number of levels.
Much of the functionality that controls the iPod style menu, like positioning and option selection, is shared by dropdown and flyout menus which are better suited for smaller data sets, so we extended the script to include support for these additional menu types. We also built in the ability to customize a menu's appearance, including active and hover states, by passing in classes as options.
By default, the menu script will transform an unordered list of links into a simple dropdown menu: Demo Page When the menu content contains nested lists, by default it creates an iPod-style menu: Demo Page Demo Page How it works. BDC DrillDown Menu, an iPod-style menu. Mootools animated sidebar menu. 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. Just for a change, i am going to give my credits at the beginning. 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 In the markup above, “ul” represents the menu, and each “li” represents a menu-item.
That’s it. 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: '' Dropdown Menu. The UvumiTools Dropdown Menu is the menu featured on this website. It is a very simple multi-level menu built from an HTML unorderd list, using Mootools Javascript Framework. We needed a simple and lightweight menu that can be easily updated by simply editing a <ul> HTML element. Horizontal menus are great because they are small, but the number of items they can contain is limited to the document's width. Dropdown menus allow you to squeeze many items in a thin horizontal menu by using sub-menus; The main menu (the top-level <ul>) is rendred horizontally, while the sub-menus (inner <ul> elements) are displayed as verticle sub-menus when hovered.
All you need is an unordered list, with links to sections of your site, and our Dowpdown script. Initialization var myMenu = new UvumiDropdown(menuId,options); Arguments menuId: The id of the <ul> to transform. Options duration: Animation effect duration, in milliseconds, when the a sub-menu opens. How To <a href="home.html">Home</a> Much better. Superfish - Suckerfish on 'roids. e24TabMenu – Drop down AJAX menu - AJAX24. Using jQuery for Background Image Animations. After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too.
Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm not the first to think so: see the examples at the end of this article). jQuery is a great library for this type of task but out of the box, it can't animate background position properly because of the need to animate two values instead of just one (too bad not all browsers implemented the non-standard background-position-x and -y like Internet Explorer). You'll have to use the Background-Position plugin that is linked in the demo (the original plugin is no longer available on the jQuery site). Previous versions didn't support negative or decimal values properly.
The HTML The Basic CSS The Image. Get Into This » My First jQuery Plugin, a Sliding Menu.