Universal CSS Navigation Menu

The Universal CSS Navigation Menu for Dreamweaver allows you to create all kind of great web site navigation menus: Cascading Drop down Menus, Mega Menus, Popup or Context Menus. The menus use great display animations, are CSS based and fully cross browser compatible, which makes them search engine friendly, easy to use and very stylish. Choose from the 13 supplied CSS designs, adjust them or create your own to fully suite your site.

Overview

  Advanced CSS Styling

The Universal CSS Navigation Menu comes with multiple great designs that can be used to fit a menu into a website. However some times you need just a bit more CSS Styling to make them fully fit your site.

This tutorial describes the way to add or edit CSS classes to customize the Universal CSS Navigation Menu.
Features
  • Many Menu Types Supported – With Universal CSS Navigation Menu you can make Dropdown Menus with Sub Menu, create Mega Menu, Popup Menus or even Context Menus!

    • Sticky menus – now you can pin your menu to any side of the browser and it will stay there no matter how your pages scrolls!
    • Floating Menus – the menus are now so smart that if there is no available space to popup they will expand in the opposite direction where there is enough space.
    • Dropdown menu with sub menus

 
    • Mega menu with Sub menus, Menu headings and Separators. Now you can have mega menu with multiple rows and columns!
*Learn more about Mega menus and see examples here.

 
 
  •  13 Stylish CSS Designs Included - Various styles to fit your web site perfectly.
 
 
 
 
 
 
 
 
 
 
 
  •  Vertical and Horizontal Orientation – Menus can be placed vertically as well as horizontally for any type of menus – Dropdown menu, Sub menu, Mega Menu, Popup/Context Menu. Style it the way it fits you design the best.
 
  •  Add custom icon for each menu item – You can add design icons to your menus and style them top or left, so that you can create stunning menus on your web site.

  • Popup direction – You can have the menus open not only downwards and to the right but also upwards and left. This is very handy, for example when your menu is pinned to the bottom.
  • Popup/Context Menu – You can popup the context menu not only on mouse position but also relative to the trigger element, for example on its bottom or right side.

  • Animated display of Main and Sub Level Menus - Adjust the appearance by Effect, Speed and Easing. Your menus can slide, fade and even jump with the amazing animation. 
 
  •  Fully cross browser compatible - The Universal CSS Navigation Menu is a jQuery based, build only with HTML & CSS - no Flash what so ever! It even supports IE6 next to the other major browsers.

  • Search engine friendly – The Universal CSS Navigation menu is pure HTML and CSS based and generates search engine friendly HTML code that can be nicely indexed by all search engines and web spiders.


  • Dynamic from Recordset Menu - Set the site with a server type (PHP, ASP-VB, ASP-JS etc.) and create a database that will serve as a source for your menu items. You can also have a 2 level nested dynamic menu – perfect for Mega menus
  •  Great Dreamweaver Integration - Interactive dialog in Dreamweaver with all the options you'll need.
  •  An inline property inspector so that you can easily change visual options later on.

 
Showcases

Mega Menu Demo

Vertical Menu with Custom Icons Demo

You can add design icons to your menus and style them top or left, so that you can create stunning menus on your web site.


Context Menu Sample Demo

Click inside the gray border to preview the custom context menu. Meanwile the default context menu is disabled on the page.

Universal CSS Navigation Menu Styles Overview

Right-clik anywhere on the page and from the custom context menu (also build with Universal CSS Navigation Menu) choose a different style and/or layout. Click away from the context menu to close it.

 

Controlling Sliding Billboard with Universal CSS Navigation Menu

Christmas Cards & Decoration Demo

This demo combines Universal CSS Navigation Menu and DMXzone Lightbox. Click on the thumbnails inside the two Mega Menus in order to open the original images into a lightbox window.

Golf Club Demo

The page contains a customized Universal CSS Navigation Menu, which also has supplied designs in it, and enhanced images with titles with the help of HTML5 Image Enhancer.

iHome Navigation Demo

In this demo you will see the new feature added in the latest version of Universal CSS Navigation Menu - autoplace of active state to the element that best fits the current page URL.

  

Sticky Navigation Menu Demo

 
Videos

Creating Horizontal Menu with Sub Menus
With this movie we will show you how to create a Horizontal Menu with Sub Menus using Universal CSS Navigation Menu

Watch the movie read more

 

Set up Menus Pinned to the Sides of your Screen
With this movie we will show you how to set up menus pinned to the sides of your screen using Universal CSS Navigation Menu.

Watch the movie read more

 

Creating Dynamic Mega Menu from an Existing Database Table
With this movie we will show you how to create a Dynamic Mega Menu from an existing database table using Universal CSS Navigation Menu.

Watch the movie read more

 

Creating Horizontal Mega Menu
With this movie we will show you how to create a horizontal Menu bar with Mega menu using Universal CSS Navigation Menu.

Watch the movie read more

 

Creating Dynamic Menu from Recordset
With this movie we will show you how to create a dynamic menu from an existing recordset.

Watch the movie read more



Creating Custom Context Menu
With this movie we will show you how to create a custom Context menu, available for any element on your page using Universal CSS Navigation Menu.

Watch the movie read more

 

Using Universal CSS Navigation Menu as an Included File in DW Template
With this movie we will show you how to create a PHP based template using the Universal CSS Navigation Menu as an included file.

Watch the movie read more

 

Customizing the Universal CSS Navigation Menu Font
With this movie we will show you how to change the default Font Family and Size of Universal CSS Navigation Menu.

Watch the movie read more

 

 

  • Customizing the Universal CSS Navigation Menu Font
    – change the default Font Family and Size
  • Using Universal CSS Navigation Menu as an Included File in DW Template
    – Create a PHP based template using the Universal CSS Navigation Menu as an included file
Requirements
Type: Suite
Product: Dreamweaver 8, Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC
Screen Shot: Details...
Tags: css menu, navigation menu, dropdown menu, nested menu, popup menu, mega menu, context menu, dreamweaver menu


History

Version 1.0.8


  • Full Dreamweaver CC and Extension Manager CC support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility
  • Included new Behavior Connector with restyled UI and better Mac OSX Support 

Version 1.0.7

  • Improved CSS styling
  • Improved integration with dynamic data
  • Improved DW integration
  • Better source file compression for smaller file size
  • Latest jQuery 1.7.2 included
  • Improved DMXzone Behavior Connector and other behaviors from DMXzone extensions
  • Improved installer for for DW CS 5.5+ and Mac DW CS6

Version 1.0.6 

  • Latest jQuery 1.6.3 included

Version 1.0.5

  • Improved the context menu behavior
  • Included new jQuery 1.4.4
  • Improved depended file includes
  • Improved includes and cleanup of styles

Version 1.0.4

  • Allow custom frame names to be used as link target
  • Improved menu pin settings 
  • Improved working in Dreamweaver Templates

Version 1.0.3

  • Integration with DMXzone Icon Finder, allows you to quickly add cool icons to your menu
  • Full ARIA support for accessibility, see http://www.w3.org/WAI/PF/aria/
  • Improved keyboard navigation
  • Improved Dreamweaver CS5 installer

Version 1.0.2

  • Now fully Accessible with Keyboard Only - the Universal CSS Navigation Menu complies now to all WAI Web Content Accessibility Guidelines and Section 508 web standards making it fully accessible to people with disabilities
  • New fully automatic menu selected state! – the menu item (and its parent items) pointing at the current page is now “selected” so the user can directly see where he/she is now in the site.
  • Improved generation of valid XHTML code
  • Great improvement for the design preview of the menu in Dreamweaver
  • Fixes for the search form in IE
  • Improved include files linking and update
  • Various bug fixes

Version 1.0.1

  • Sticky menus – now you can pin your menu to any side of the browser and it will stay there no matter how your pages scrolls!
  • Popup direction – now you can have the menus open not only downwards and to the right but also upwards and left. This is very handy, for example when your menu is pinned to the bottom.
  • Floating Menus – the menus are now so smart that if there is no available space to popup they will expand in the opposite direction where there is enough space.
  • Menu alignment – align your menu to left, right or center
  • Multi row Mega Menu – now you can have mega menu with multiple rows and columns!
  • 2 Level nested Dynamic Menu – now you can have a 2 level nested dynamic menu – perfect for Mega menus
  • Context Menu positioning – now you can popup the context menu not only on mouse position but also relative to the trigger element, for example on its bottom or right side.

Update Procedure:

Just open a page using the Universal CSS Navigation Menu. You will see a progress bar indicating new files are being copied. After that a dialog will popup with the list of the new files. Depending on if you have remote site defined and you have site synchronization enabled, the files will be automatically synchronized or you will be presented an option to upload all files.

You will need to reedit your existing menus. Just select each one of them, in the Property Inspector click on the “Edit Menu” button to bring the edit menu dialog. Just click on OK and the Universal CSS Navigation Menu will be regenerated. Make sure you do that for all your menus. Save and upload your pages and you are done.

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com which is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Place your review about Universal CSS Navigation Menu




You must me logged in to write a review
Reviews
new to css beware
November 13, 2012 by rodrigo matt

I recently purchased Universal CSS Navigation Menu and beware that Yacht Service Demo example and others have to be manually built. They do not come ready. You have to use css and customize it. 


there are some that are built, but not what i was expecting.


I hope this was helpful.

Navigation menu - update
May 27, 2011 by Glynis Thomason

Okay, well here's my update. I have been using the IUniversal CSS Navigation Menu on my website which now has about 200 pages plus over a thousand pages on a forum. I use the menu as my main menu (including very successfully a mega menu) and also for our restaurants as part of the free bar & restaurant template and it is really fabulous. The code is good, clear and simple to edit. I have made edits for the forum menu and for the restaurant menu and have found it very easy to work with. Thanks

guys!

Universal CSS Navigation Menu
December 1, 2010 by Glynis Thomason

I have only just bought this product so watch this space for more comment as time goes by, but at the moment I think it is fabulous! It is so easy to understand and use and is very flexible. Not only that, but the end result is very professional looking, by far this best I have used and what really impresses me is the quality of the font on the menu - others (flash and php) that I have tried have a far inferior appearance to this one. And, of course, it is SEO friendly!

Only one slight problem was that when I use the Icon Finder more often than not Dreamweaver hangs - so make sure you save everything before using that.