Awesome Bubble Navigation with jQuery

In this tutorial we are going to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. We will use the jQuery Easing Plugin for a even nicer effect. View demoDownload source In this tutorial we are going to create a bubbly navigation with jQuery. Ok, so let’s get started. The Markup The HTML will consist of a main div that we will give the class navigation and the id nav. As an example, we just show the first two items here. Further elements inside of the item element are the image for the bubble, the icon as link element, the heading and the list of links. The CSS Let’s take a look at the styling. Now, we will use absolute positioning for the item: Since we gave the div two classes, we will now define the respective positions for each navigation item. The link elements of the icons will have the following general style: And we can again define each icon of the respective element: The JavaScript And that’s it!

Garage Door Style Menu Originally published on July 21, 2008 as only a jQuery technique. Now updated to include CSS3 and a combo technique which is mo' betta. A garage door style menu is where an image (the "door") slides up to reveal something behind it. We'll do this in two ways, with CSS3, and with jQuery. Then we'll combine them into a progressive enhancement way to handle it. The jQuery Method Right out of the box, jQuery provides the animate function, which allows us to morph some CSS attributes over time. Thankfully, there is a plugin to help with this, the Background-Position Animation Plugin by Alexander Farkas. View Demo Download Files 1. We are going to need three different types of images here. Notice my guides. Second, we'll need to create the garage doors which we will call the "shutters". Lastly, we need a window which will act as the garage frame. 2. Here is the menu markup: The ID on the menu will give us all the specificity we need. 3. The menu background is applied to the UL itself. 4. if (!

Animated Content Menu with jQuery Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked. The main idea is to […] View demoDownload source Today we will create a slick animated content menu with jQuery for a restaurant theme. The main idea is to have a restaurant menu with the different menu categories displayed. So, let’s get started. The Markup The HTML structure is going to contain some elements for the background image, the grid overlay, the loading icon and the main menu. As a default background image when the page loads, we will have the image Default.jpg. The menu content will be wrapped by a div with the class “ac_content”. For each menu item, we will have a div “ac_subitem” which will contain the submenu content box. Let’s take a look at the style. The CSS @import url('reset.css'); The JavaScript

How To Create a Cool Animated Menu with jQuery In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design. The design we’ll be building features a cool label image that slides into place under each navigation item on hover. We’ll build the design to work without jQuery first of all to ensure it’s widely accessible to users without Javascript enabled, then enhance the effect with jQuery for the majority of users. View the animated menu demo Create a new document and fill the background with a light beige. Use a subtle grunge Photoshop brush to add a little extra texture to the top centre of the canvas. Draw and fill a rectangle to create the base of the label graphic. Use the Polygonal Lasso tool to draw a small triangle. All the menu needs now is a series of text links. <! jQuery

jQuery Plugin: Sliding picture menu | iSenne.com Basic HTML code The menu requires some specific HTML code in order to work correctly. First you need a container where you want to put the menu. After that it’s just a matter of putting some menu items in the container. Add a sub menu To add a sub menu, just put an unordered list in the div with the class “submenu”. <div class="MainMenu"><div><img src="img/menu-1.png" /><img src="img/text-1.png" /><ul class="submenu light"><li><a href="#">Submenu 1.1</a></li><li><a href="#">Submenu 1.2</a></li></ul></div><div><img src="img/menu-2.png" /><img src="img/text-2.png" /></div></div> Add a link If you don’t want to use a sub menu, but just 1 link, just put an <a href=”#”> in your menu item! jQuery code And that’s it for the markup. <script type="text/javascript"> $(document).ready(function() { $(".MainMenu").pictureMenu(); }); </script> The options! Here is a list of options with the default value. animateTime: 350The time in miliseconds it takes to complete the sliding animation! New feature: