Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Menu & Navigation’ Category

MenuMatic, a MooTools 1.2 class, makes creating dropdown menus easier, flexible & SEO friendly.

For users without JavaScript, it switches back on a CSS menu system.

MooTools DropDown Menu

Some features of MenuMatic:

  • SEO Friendly: Manipulates ıonly the existing links.
  • User Friendly: Hide-delay speed can be adjusted.
  • Accessible: Tab key navigates through main menu items & arrow keys can be used for dropdowns..
  • Fails Gracefully: When no JavaScript is available, switcches to suckerfish CSS based drop down menu system.
  • Stylish: Total style control with CSS.
  • Flexible: Many other controls like the opacity of menus…

The class can be used for both horizontal & vertical menus .It is also compatible with all major browsers.

P.S. Thanks to Jason from GreenGeckoDesign for the suggestion.

UvumiTools has 4 great & free MooTools plugins that can save your development time.

MooTools Crop

MooTools Crop

This is an easy to use cross-browser crop interface that has options like:

  • Setting the minimum size
  • Keeping the aspect ratio
  • Live preview of the area to be cropped
  • Supports HTML resizing

MooTools Image Gallery

MooTools Gallery

This plugin enables you to create good-looking image galleries.

Users can click a thumbnail and watch the gallery transform into a slideshow, which is then navigated by clicking the left column or by scrolling with the mouse wheel. A click on the photo being displayed brings the user back to the contact sheet view.

MooTools Dock Menu

MooTools Dock Menu

This dock menu, similar to a Mac interface, is passive under the screen & gets activated when an item is mouse-overed.

The menu is created from a valid unordered list & can be applied within minutes.

MooTools Dropdown Menu

MooTools Dropdown Menu

A cross-browser, animated dropdown menu with unlimited levels support.

It is created from unordered lists & can be totally customized via CSS.

CSS Menu Builder is an online menu builder which enables you to create 30+ horizontal, 700+ vertical & breadcrumb menus (without the unlimited color combinations).

CSS Menu Builder

With an Ajaxed & simple to use interface, menus can be created on the fly and HTML, CSS & necessary image files can be downloaded easily (or a complete ZIP file can be downloaded).

While creating a filebrowser for a project, I have tried several JavaScript tree menus and found this one the easiest to work with.

dTree is an easy to setup & use classic JavaScript tree menu.

With a XHTML 1.0 strict validated output, this tree menu supports unlimited number of levels and remembers the state between pages.

http://www.destroydrop.com/javascripts/tree/default.html

Other features of dTree:

  • Can be used with or without frames
  • Possible to have as many trees as you like on a page
  • All major browsers supported
  • Alternative images for each node

The items don’t need to be in an order within the code as you can re-order them. This is a functional feature when creating the menu from a database.

The script is well-documented and this example shows how flexible it is.

This is a nice animated menu built with MooTools.

The trick of the menu is a Flashy hover effect of the arrow (or any element you want).

MooTools Animated Menu

To use this menu script, you don’t even have to play with JavaScript except defining the variables:

  • background image container
  • nav elements
  • current nav element’s div id
  • background image’s y coordinate
  • left offset of the image

A well-described usage of the menu including the download of all the necessary files can be found at the script’s website.

FameID Menu is an advanced Flash accordion menu.

It uses XML to store the data, almost every setting is configurable and has a submenu feature which is kinda unique.

Flash Accordion Menu

Configuration options of this Flash XML accordion menu:

  • Background images of any menu items
  • Dimensions of the whole menu
  • Dimensions of the menu items when they are active (unfolded)
  • Transparency animation levels of menu items
  • Almost any setting for each menu item, such as colour, position, size, transparency etc.
  • Menu items’ header texts and link URLs
  • Choice of targeting simple URLs, frames or named windows
  • Addition of submenus to any menu’s item using XML
  • The look of submenu’s background panels
  • Speed of animation
  • Custom images for submenu’s button images
  • Ability to always display menu item’s text headers or only display them when the item is active

Sliding menus are very effective in areas where we have limited space .

This is a sliding top menu built with jQuery which can be fired through the open & close buttons or with any tag with the related class name.

You can also use it as an info box, login area & more.

Click here to see the final working demo of this jQuery sliding menu.

It presents the menu when closed like this:

Sliding Top Menu

And when opened:

jQuery Sliding Menu

Demo
Download

 

Click here to see the final working demo of this jQuery sliding menu.

 

Step 1 – HTML:

<div id="sliderWrap">
    <div id="openCloseIdentifier"></div>
    <div id="slider">
        <div id="sliderContent">
            Isn't this nice?
        </div>
        <div id="openCloseWrap">
            <a href="#" class="topMenuAction" id="topMenuImage">
                <img src="open.png" alt="open" />
            </a>
        </div>
    </div>
</div>

 

Step 2 – CSS:

<style type="text/css">
body {
margin: 0;
font-size:16px;
color: #000000;
font-family:Arial, Helvetica, sans-serif;
}
#sliderWrap {
margin: 0 auto;
width: 300px;
}
#slider {
position: absolute;
background-image:url(slider.png);
background-repeat:no-repeat;
background-position: bottom;
width: 300px;
height: 159px;
margin-top: -141px;
}
#slider img {
border: 0;
}
#sliderContent {
margin: 50px 0 0 50px;
position: absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 10px;
}
#header {
margin: 0 auto;
width: 600px;
background-color: #F0F0F0;
height: 200px;
padding: 10px;
}
#openCloseWrap {
position:absolute;
margin: 143px 0 0 120px;
font-size:12px;
font-weight:bold;
}
</style>

 

With the CSS file there are few major points:

  • #slider has to be positioned absolutely, so it can overlay the other content.
  • #slider has a negative top-margin which hides it.
  • #sliderContent is positioned absolutely to not to crack the open/close buttons
  • #openCloseWrap holding the buttons are positioned absolutely too.

Step 3 – jQuery / JavaScript:

<script type="text/javascript">
$(document).ready(function() {
    $(".topMenuAction").click( function() {
        if ($("#openCloseIdentifier").is(":hidden")) {
            $("#slider").animate({
                marginTop: "-141px"
                }, 500 );
            $("#topMenuImage").html('<img src="open.png"/>');
            $("#openCloseIdentifier").show();
        } else {
            $("#slider").animate({
                marginTop: "0px"
                }, 500 );
            $("#topMenuImage").html('<img src="close.png"/>');
            $("#openCloseIdentifier").hide();
        }
    }); 
});
</script>

The main trick is changing the top margin of #slider and update the open / close images.

We have an empty element named openCloseIdentifier which shows us whether the menu is open or closed. We simply hide it when the menu is open and show when it is closed.

Then all we do is:

if openCloseIdentifier = hidden then close the menu or if openCloseIdentifier = visible then open the menu.

Sliding effect can be fastened by changing the 500 value in JavaScript to a smaller number or else.

P.S. Down & up arrow icons are from the Crystal Clear icon set.

This is a very good looking Flash news slider (AS3 code) which uses XML for fetching the data.

The Flash slider simply displays an image and a descriptive text with a link to the URL wanted. The slider can be controlled via the next-previous & pause buttons.

Flash News Slider

You can find the steps for creating this Flash news slider as a tutorial and download the source files.

Design of the slider is inspired from the LaNacion.com website.

This is another coda slider built with jQuery (check YCodaSlider 2.0 – wrd post). As the use of them are becoming common, it is better we have different choices.

To run this coda slider, along with jQuery you need the following plugins:

jQuery Coda Slider

Some features of this coda slider:

  1. Degrades perfectly without JavaScript enabled
  2. Hitting the page with a specific hash (i.e. page.html#preview) shows the right tab, and highlights the right navigation
  3. Any link on the page that refers back to a panel should trigger the effect and highlight the right navigation – this should happen without any extra work.

Besides the codes, you can find how this coda slider is built in detail.

Dynamic Drive, a great resource for web designers & developers has a nice collection of free CSS menus that you may find handy.

There are several horizontal and vertical menu examples, buttons, pagination samples & more.

Free CSS Menus

Besides these CSS menus, Dynamic Drive is worth to browse deeply & regularly as new resources are added frequently.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com