Back to Top
The nuts and bolts for
Creative web development

Universal CSS Navigation Menu

“Create all kind of great web site navigation menus”

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

Features Highlights:

  • 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!
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
* For complete Features overview press the Features in Detail.

  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.

Yacht Service Demo

In this demo we used Universal CSS Navigation Menu, which was styled through the CSS to fit the page design.

Music Store Demo

For this demo we used Universal CSS Navigation Menu in order to create a Mega menu, which displays the products, divided into several rows and columns, and a separators to highlight the titles of the different categories.


Web Design Studio Showcase

For this showcase we used customized menu for the navigation (Universal CSS Navigation Menu) and Sliding Panels with custom buttons that navigate the panels through the Behavior connector.


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

 
  • Used Motorcycles Store Showcase

    For this showcase we used Universal CSS Navigation Menu in order to create the page menu with submenu items and image icons for easy navigation.

  • Online PayPal Store Template Showcase

    For this showcase we used the Online PayPal Store Template in order to create web merchant for sports equipment, with great product presentation and easy navigation.

  • Responsive Mobile Store Showcase

    In this showcase, we built a web store for smart phones that has a responsive design and is easily navigated even on mobile devices and tablets. The images are previewed in the DMXzone Nivo Slider, ...

  • Watches Shop with Different Options Showcase

    In this showcase we used Universal CSS Navigation Menu for the website navigation, DMXzone Tabs for the additional information and the Sliding PayPal Shopping Cart for the purchase process. The ...

  • Luxury Travel Showcase

    In this showcase we used four awesome DMXzone extension to create a beautiful landing page for reservations. The page navigation is created with the Universal CSS Navigation Menu, the sliding ...

  • 3D Artist Portfolio Showcase

    In this showcase we featured the amazing work from the inspiring 3D Artist - Christian Ludmiloff in order to show you a finished Porfolio website, designed with the Portfolio Design Template & ...

  • Portfolio Showcase

    For this showcase we used the Portfolio Design Template to create a simple front page showing some past projects. The slideshow on the top is built with the DMXzone Nivo Slider and the menu with the ...

  • Dresses Online Store Showcase

    For this showcase we used our Simple Online Store Template. On the Home Page we made two slides with an image and a text created with the HTML5 Parallax Slider and below them added some images for ...

  • Flower Shop Showcase

    For this showcase we used only two DMXzone extensions in order to create a simple front page for an online flower shop. The HTML5 Parallax Slider is presenting images with content and the Universal ...

  • Feature Destinations Showcase

    For this showcase we used the DMXzone Supersized for the background image, DMXzone Responsive Text in order to create both text lines scalable, and DMXzone CSS3 Drop Shadows for the content shadow. ...

  • Responsive Portfolio Showcase

    For this showcase we used the DMXzone Responsive Text extension so you can explore it on any desktop resolution as well as on various devices.

  • Property For Sale Showcase

    For this showcase we used the Universal Responsive Design Template. The CSS customized Universal CSS Navigation Menu serves as a website navigation through the pages and has curved shadow added with ...

  • Yacht For Sale Showcase

    We created a menu with the Universal CSS Navigation Menu. To show the location we used DMXzone Google Maps. With the DMXzone CSS3 Drop Shadows we added various shadow effects: for the menu and the ...

  • Facebook Recipes Page Showcase

    For this showcase we used the Facebook Fan Page to create a facebook page. On the top we have a menu made with the Universal CSS Navigation Menu. With the DMXzone CSS3 Drop Shadows we added different ...

  • Restaurant Website Showcase

    For this showcase page we customized the Universal CSS Navigation Menu through the CSS and added the restaurant location with the help of DMXzone Google Maps.

  • Cars For Sale Showcase

    In this showcase we used our Universal CSS Navigation Menu in order to create the menu. With the HTML5 3D Flipping Gallery we created an image gallery. For the description on the back we used img ...

  • Facebook QRcode Store Showcase

    For this showcase we used our Facebook Fan Page to create a Facebook page. On the top we built a navigation menu with the Universal CSS Navigation Menu. Using the free Universal CSS Transforms: ...

  • Responsive Mobile Device Template Showcase

    For this showcase page, we supplied the HTML5 Slideshow with awesome images that have title and description, added a DMXzone Google Maps for the office location and customized the CSS of the ...

  • HTML5 3D Flipping Gallery Store Showcase

    For this showcase page we used HTML5 3D Flipping Gallery in order to create a flipping image for the selected product. The trigger is on click and the flip direction is set to right. On the back we ...

  • Wine List Page Showcase

    For this showcase page we used a CSS customized Universal CSS Navigation Menu and DMXzone Supersized for the awesome fullscreen background slideshow. In order to see an overview of each wine ...

  • Responsive Interior Design Layout Showcase

    The showcase features 2 DMXzone extensions - the DMXzone Supersized, which is used for the full screen background and the customized Universal CSS Navigation Menu for the site navigation.

  • Universal Responsive Design Showcase

    For this showcase we used the already customized Universal CSS Navigation Menu, awesome images to supply the HTML5 Slideshow in the header, great images for the thumbnails and DMXzone Google Maps ...

  • Radio Coverage Showcase

    For this showcase we used 3 tools - DMXzone Google Maps, Drawing Add-on and Universal CSS Navigation Menu. We picked up the place on the map that we need to work on. With the help of the Google Maps ...

  • Golf Equipment Store Showcase

    For this showcase we used DMXzone Supersized for the background images, Sliding Billboard to present the different sections of the store and Universal CSS Navigation menu for the site navigation.

  • Pinned CSS Menu Showcase

    For this showcase we used the pin option in order for our menu to be placed on the side of the page.

  • Yacht Service Showcase

    In this showcase we used Universal CSS Navigation Menu, which was styled through the CSS to fit the page design.

  • Music Store Showcase

    For this showcase we used Universal CSS Navigation Menu in order to create a Mega menu, which displays the products, divided into several rows and columns, and a separators to highlight the titles ...

  • Responsive Design Showcase

    The demo is created in Dreamweaver CS6 Fluid Grid feature for the layout and DMXzone Universal CSS Navigation menu for the navigation. You can explore its responsive design in the browser as well as ...

  • Destination Availability Showcase

    In this showcase we used CSS edited and customized Universal CSS Navigation Menu, DMXzone Lightbox that the images are opening in and DMXzone Google Maps that shows the hotel's location. The Ajax ...

  • Web Design Studio Showcase

    For this showcase we used customized menu for the navigation (Universal CSS Navigation Menu) and Sliding Panels with custom buttons that navigate the panels through the Behavior connector.

  • Product Features Page Showcase

    For this showcase page we used a customized Universal CSS Navigation Menu, Universal CSS Transforms: Translate(free extension) to slide up the HTML5 Video Player upon page load and the HTML5 Video ...

  • Car Service Showcase

    In this showcase we will show you how you can combine DMXzone Accordion, Universal CSS Navigation Menu and DMXzone Supersized in order to create an awesome Car Service website. For an amazing ...

  • Real Estate Page Showcase

    In this real estate showcase page you can see how we combined awesome website navigation(Universal CSS Navigation Menu), stunning image slideshow(HTML5 Slideshow) and a right sidebar divided in ...

  • Online Shoes Store Showcase

    In this showcase we will show you a detailed product page with amazing preview of images, created with the CSS Image Gallery and awesome site navigation from the Universal CSS Navigation Menu.

  • Watches Shop Showcase

    Here, you can see how we combined DMXzone Tabs and Universal CSS Navigation Menu in a website showcase. Both the tabs and the menu are customized through the CSS to match the website design and in ...

  • Restaurant & Bar Showcase

    For this showcase web site there were only 3 extensions used. The slider is created with the updated HTML5 Slideshow that changes the images, Universal CSS Navigation Menu to navigate through the ...

  • Night Club Facebook Page Tab Showcase

    In this showcase you can see a simple, yet really beautiful Facebook Fan Page Tab, created with Facebook Fan Page, that displays a latest video and great navigation (Universal CSS Navigation Menu) to ...

  • Winter Sports Equipment Showcase

    In this showcase you can see how we combined both extensions in order to create a Winter Sports Equipment website. The fantastic navigation is created with the Universal CSS Navigation Menu, which ...

  • Tech Store Showcase

    For this showcase the navigation is created with the Universal CSS Navigation Menu, the mouse over effect on the images with Advanced CSS Animator, the menus within the images with Sliding Menu and ...

  • Art Walk Showcase

    The showcase combines Universal CSS Navigation menu which navigates the Sliding Billboard items and the images are displayed in a DMXzone Lightbox.

  • Logistic Website Showcase

    This design is created with our amazing Universal CSS Navigation Menu, HTML5 Image Enhancer, Advanced HTML Editor 3 and Online Page Editor Add-on! Please note that the use of the Online Page Editor ...

  • Wedding Photographer Website Showcase

    In order to create such website, all you need is DMXzone Universal CSS Navigation Menu, Advanced HTML Editor 3 ,Online Page Editor Add-on and Picasa Gallery Add-on. *You can edit (CTRL+SHIFT+2) the ...

  • Skatepark Showcase

    The showcase has been created with HTML5 Slideshow, which slide your pictures with description possibilities, the customized Universal CSS Navigation Menu is taking care of the top navigation and the ...

  • HTML5 Image Enhancer & Universal CSS Navigation Menu Showcase

    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.

  • Fashion Website

    This website home page has been designed with the help of Universal CSS Navigation Menu , HTML5 Slideshow and HTML5 Image Enhancer. All extensions can be viewed in our Extensions section.

  • Hotel Template

    The design is created with some of the finest DMXzone extension: HTML5 Slideshow, Universal CSS Navigation Menu, Sliding Panels, DMXzone Calendar and HTML5 Image Enhancer. You can download this ...

  • Building an Interior Design Page

    As you might already noticed we've been publishing some amazing showcases recently, using DMXzone extensions. Now it's time to pack all the needed files and share them with the world. All Templates ...

  • HTML5 Suite

    In this showcase we've used seven out of nine extensions packed in the HTML5 Suite to create a Website. We've also added tips, so you can explore each detail how it's been made and which extensions ...

  • Sliding Out CSS Menu Showcase

    In this demo we will show you how to slide out the menu on move over.

  • Mega Menu Showcase

    In this showcase we will show you an example of a mega menu with multiple rows and columns!

  • Sliding Site Showcase

    In this showcase we've combined all the extensions included in the bundle. The site is designed in Sliding Panels with a Universal CSS Navigation Menu. The products open in a stylish Lightbox window ...

  • iHome Navigation

    In this showcase 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.

  • Active Slideshow Pro Universal CSS Navigation Menu Showcases

    The showcases show a great case how you can have a drop down menu even on top of a flash content

  • Sticky Navigation Menu Showcase

    In this showcase 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 Menu with Different Positioning Showcase

    The showcase we will show you how to navigate the Sliding Billboard, that opens in a stylish Lightbox window, from four different positions of the menu.

  • Vertical Menu with Custom Icons Showcase

    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.

  • Christmas Cards

    The showcase combines Universal CSS Navigation menu which navigates the Sliding Billboard items and the images are displayed in a DMXzone Lightbox.

  • Christmas Cards Decoration Showcase

    This showcase 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.

  • Universal CSS Navigation Menu Styles Overview

    Right-click 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.

  • Context Menu

    Right click inside the gray border to preview the custom context menu. Meanwhile the default context menu is disabled on the page.

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

 

 

Requirements

Type: Suite
License: External link
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 >>

Share this Article

Reviews

new to css beware

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

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

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.