Universal CSS Navigation Menu

DMXzone.com

Table of contents
About Universal CSS Navigation Menu ............................................................................................................................ 2
Before you begin ................................................................................................................................................................. 9
Installing the extension........................................................................................................................................................ 9
Reference: Universal CSS Navigation Menu Designs................................................................................................... 10
Reference: Universal CSS Navigation Menu Animation.............................................................................................. 14
The Basics: Creating Universal CSS Navigation Menu with Sub Menus..................................................................... 17
Advanced: Creating Mega Menu ................................................................................................................................. 21
Advanced: Creating Dynamic Menu from Database................................................................................................ 27
Video: Creating Horizontal Menu with Sub Menus ...................................................................................................... 32
Video: Creating Horizontal Mega Menu ....................................................................................................................... 32
Video: Creating Dynamic Menu from Database ........................................................................................................ 32
Video: Creating Context Menu ...................................................................................................................................... 32

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 1 of 32
 Universal CSS Navigation Menu
DMXzone.com

About 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.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 2 of 32
 Universal CSS Navigation Menu
DMXzone.com

Features in Detail

• Many Menu Types Supported - With Universal CSS Navigation Menu you can make Dropdown
menus with Sub Menus, create Mega Menus, Popup Menus or even Context Menus!

o Dropdown menu with sub menus

o Mega Menu with Sub menus, Menu headings and Separators.

*Learn more about Mega Menus and see examples here.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 3 of 32
 Universal CSS Navigation Menu
DMXzone.com

• 13 Stylish CSS Designs Included - Various styles to fit your web site perfectly.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 4 of 32
 Universal CSS Navigation Menu
DMXzone.com

• 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.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 5 of 32
 Universal CSS Navigation Menu
DMXzone.com

• Popup/Context Menu – You can show your menu in a Popup/Context Menu by adding a CSS
selector for the element which will activate the menu when clicked on.

• 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.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 6 of 32
 Universal CSS Navigation Menu
DMXzone.com

• 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.

• Great Dreamweaver Integration - Interactive dialog in Dreamweaver with all the options you’ll need.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 7 of 32
 Universal CSS Navigation Menu
DMXzone.com

• An inline property inspector so that you can easily change visual options later on.

• Full Support for the DMXzone Behavior Connector - You can easily bind other DMXzone extensions
such as Sliding Billboard, DMXzone Lightbox and Flash MP3 Player that can be controlled through the
Behavior Connector.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 8 of 32
 Universal CSS Navigation Menu
DMXzone.com

Before you begin

Make sure to setup your site in Dreamweaver first before creating a page. If you don’t know how to do that
please read this.

Installing the extension

Read the tutorial at http://www.dmxzone.com/go?4671

Login, download the product, and look up your serial at

http://www.dmxzone.com/myZone.asp?Section=purchases

Get the latest extension manager from Adobe at

http://www.adobe.com/exchange/em_download/

Open the .mxp file (the extension manager should start-up) and install the extension.

If you experience problems please read the FAQ at http://www.dmxzone.com/index?7/1028 before

contacting support.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 9 of 32
 Universal CSS Navigation Menu
DMXzone.com

Reference: Universal CSS Navigation Menu Designs

There are 13 CSS designs supplied in the extension but you can always edit them and create your own.

Default

Apple Inspired Dark

Apple Inspired Light

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 10 of 32
 Universal CSS Navigation Menu
DMXzone.com

Basic Tabs

Brushed Metal

Dark Black

Dark Blue

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 11 of 32
 Universal CSS Navigation Menu
DMXzone.com

Dark Green

Dark Red

DMXzone Inspired

Elegant Blue

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 12 of 32
 Universal CSS Navigation Menu
DMXzone.com

Simple Tabs Blue

Sony Inspired

Tabbed Blue

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 13 of 32
 Universal CSS Navigation Menu
DMXzone.com

Reference: Universal CSS Navigation Menu Animation

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 14 of 32
 Universal CSS Navigation Menu
DMXzone.com

Main/Sub Level Animation

• Show/Hide Effect – The type of effect to use when opening/closing a menu from the main/sub level

• Default - The menu opens when clicked or on mouse over.

• Slide –
• Fade – The menu fades while opening or closing.

• Jump – The menu jumps while opening or closing.

• Speed – You can choose between Slow, Normal and Fast Animation for your menus.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 15 of 32
 Universal CSS Navigation Menu
DMXzone.com

• Easing – The Easing effect is used to fine tune the type of animation appearance. To see a
more detailed explanation of the types of graph-like effects click here.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 16 of 32
 Universal CSS Navigation Menu
DMXzone.com

The Basics: Creating Universal CSS Navigation Menu with Sub Menus
In this tutorial we will show you how to create a horizontal menu with sub menus using Universal CSS
Navigation Menu
*You can also check out the video here.

How to do it
1. Define your site in Dreamweaver and create a new page.

2. Applying the extension – Choose the icon from the DMXzone object bar to apply the extension.

The Universal CSS Navigation Menu dialog appears:

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 17 of 32
 Universal CSS Navigation Menu
DMXzone.com

3. Adding menus – Click the Add New Menu Item button to add a menu item. (1) Enter a name and
choose a link for this sub menu. (2)

4. Adding custom icon – In order to add a custom icon for the menu click Browse for file icon. (1) You
can also style the icon left or top, and add an ID to the element.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 18 of 32
 Universal CSS Navigation Menu
DMXzone.com

4. Adding Sub menus – Select a menu (1) and click the Move Menu Item Right button (2) in order to
make the sub item a child of the Sub Menu. You can add Title, Link or a custom Icon for each Sub
Menu.
• If you need any sub sub level items follow the same procedure using the Move Items arrows.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 19 of 32
 Universal CSS Navigation Menu
DMXzone.com

5. Design and Orientation – Open the Advanced tab in the Universal CSS Navigation Menu dialog. For
our menu we choose the Horizontal menu with Dark Blue Design.

6. Menu appearance, Navigation and Animations – From the options in the Menu Panel you can set the
menu Width, Menu Title or add a Search Page. Choose whether or to show the sub menu on Hover or
on Click from the Navigation Menu and select an animation.

7. When you’re done click OK to save your work and preview the result in your favorite browser.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 20 of 32
 Universal CSS Navigation Menu
DMXzone.com

Advanced: Creating Mega Menu

In this tutorial we will show you how to create a horizontal Mega menu using Universal CSS Navigation Menu
*You can also check out the video here.

How to do it
1. Define your site in Dreamweaver and create a new page.

2. Applying the extension – Choose the icon from the DMXzone object bar to apply the extension.

The Universal CSS Navigation Menu dialog appears:

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 21 of 32
 Universal CSS Navigation Menu
DMXzone.com

3. Adding Menus – Like we did in the previous tutorial first we’ll add our menu items from the Add Menu
Item button. (1) For each menu item we add Title, Link and Image. In our case we named our menus
Mega Menu, Menu Heading and Menu Item 1.
*You can add as many sub items and headings as you needed.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 22 of 32
 Universal CSS Navigation Menu
DMXzone.com

4. Adding Menu Type – Now, when our menu items are added, we’re going to set a menu type to each
one.
• Select the Menu Heading item (1), click the Move Menu Item Right button to make it child of
the Mega Menu (2) and select the Menu Heading from the Menu Type dropdown menu.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 23 of 32
 Universal CSS Navigation Menu
DMXzone.com

The result should look like this:

• Now, choose the first sub item (1), click the Move Menu Item Right button twice (2) in order to
make this item a child of the Menu Heading. We do the same for the other menu items.

The result should look like this:

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 24 of 32
 Universal CSS Navigation Menu
DMXzone.com

5. Setting the Mega Menu - We’re done with structuring our menu and now, we’re going to set the
Mega Menu as a menu type for the upper item in the menu tree.

• Select the Mega Menu item (1) in the menu tree and choose Mega Menu from the Menu Style
tab. (2)

The result should look like this:

• You add more Menu Headings with sub items the same way we did the Adding Menus and
Adding Menu Types.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 25 of 32
 Universal CSS Navigation Menu
DMXzone.com

6. Design and Orientation – Open the Advanced tab in the Universal CSS Navigation Menu dialog. For
our menu we choose the Horizontal menu with Dark Blue Design.

7. Menu appearance, Navigation and Animations – From the options in the Menu Panel you can set the
menu Width, Menu Title or add a Search Page. Choose whether or to show the sub menu on Hover or
on Click from the Navigation Menu and select an animation.

8. When you’re done click OK to save your work and preview the result in your favorite browser.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 26 of 32
 Universal CSS Navigation Menu
DMXzone.com

Advanced: Creating Dynamic Menu from Database

In this tutorial we will show you how to create dynamic menu from a recordset.
*You can also check out the video here.

How to do it
1. Define your site in Dreamweaver and create a new page.
2. Creating a new file in your already defined site - You need to 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.

3. Applying the extension – Choose the icon from the DMXzone object bar to apply the extension.

The Universal CSS Navigation Menu dialog appears:

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 27 of 32
 Universal CSS Navigation Menu
DMXzone.com

4. Adding menu - Add new menu item and choose from Menu Type - Dynamic from Recordset.

5. Creating dynamic menu – Click the thunderbolt in order to bring up the recordset menu.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 28 of 32
 Universal CSS Navigation Menu
DMXzone.com

• Choose the column that you want to populate the menu items for the root level from. From
dropdown menu we choose the root (1) that we’ll use and click OK (2).

• In Link click on Folder icon and in the pop-up window check the Data Source radio button in
top center.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 29 of 32
 Universal CSS Navigation Menu
DMXzone.com

• Choose the column from your recordset that you want to populate links from.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 30 of 32
 Universal CSS Navigation Menu
DMXzone.com

• You can have only root level dynamic menu without sub-levels. In our case the Title matches
the Link but you can always have any column from the recordset set in both fields.

• Here is the result.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 31 of 32
 Universal CSS Navigation Menu
DMXzone.com

Video: 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.

Video: 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.

Video: Creating Dynamic Menu from Database

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

Video: Creating 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.

Copyright © 2009 DMXzone.com All Rights Reserved

To get more go to DMXzone.com
Page 32 of 32