Styling the Universal CSS Navigation Menu

May 7, 2012

Learn the Basics of Universal CSS Navigation Menu Styling

DMXzone's Universal CSS Navigation menu is an amazing Dreamweaver tool that lets you create all kind of awesome web site navigation menus such as cascading drop down, mega, popup and context menus. In this article we will teach you how to style them in a way that will fit your web site perfectly. All you need is some basic CSS knowledge.

The Story

Styled Universal CSS Navigation Menu

In order to to change Fonts, Colors, Margins and Paddings of the menu you need to set the Universal CSS Navigation menu design to: Default and open the dmxNavigationMenu.css file, that is located in the Styles folder of your site. To be sure you won't lost your customizations after updating the Universal CSS Navigation menu please copy and paste the properties you want to change from dmxNavigationMenu.css into a new customMenu.css file and include it on your page.

.dmxNavigationMenu {
    position: relative;
    background-color: #eee; /*Sets the background color of the menu bar*/
    min-height: 1%;
}

.dmxNavigationMenu * {
    font-family: Arial; /*Sets the font family of the whole menu*/
    font-size: 12px; /*Sets the font size of the whole menu*/
    color: #333; /*Sets the font color of the whole menu*/
}


 

 .dmxNavigationMenu ul {/*This property affects all of the menu item containers - Top, Sub and Mega menus*/
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmxNavigationMenu li {/*This class affects all of the menu items - located in the Top, Sub and Mega menus*/
    display: block;
    position: relative;
    white-space: nowrap;
    zoom: 1;
}

 .dmxNavigationMenu ul.horizontal {/*This class affects the Horizontal Menu items container only */
    float: left;
}

 


 

 .dmxNavigationMenu ul.horizontal > li {/*This class affects the Horizontal Menu Top items only*/
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: bottom;
    float:left;
}

 


 

 .dmxNavigationMenu ul.mega,
.dmxNavigationMenu ul.sub {/*This class affects the Sub and Mega Menu item containers only */
    position: absolute;
    top: 0;
    left: 97%;
    display: none;
    background-color: #eee;
    border: 1px solid #999;
    width: 150px;
    z-index: 99;
}

 


 

 .dmxNavigationMenu li a {/*This class affects all of the Links of the menu*/
    display: block;
    padding: 5px;
    text-decoration: none;
    overflow: hidden;
    outline: none;
    zoom: 1;
}

 .dmxNavigationMenu ul.horizontal > li > a {/*This class affects the Horizontal Top Menu Items Links only*/
    *display: inline;
}

 


 

.dmxNavigationMenu li a.selected,
.dmxNavigationMenu li a:hover,
.dmxNavigationMenu li a.hover {/*This classes affect all of the Links of the menu*/
    background: #09c;
    color: #fff;
}

Extensions

Related Blog Posts

Mentioned Extensions

Lubov Cholakova

Lubov CholakovaLubov has been with DMXzone for 8 years now, contributing to the Content and Sales departments. She is bringing high quality content in the form of daily blog updates, reviews, tutorials, news, newsletters,update emails and extensions' manuals. If you have a product that needs publicity or any other questions about the entire DMXzone community, she is the one you can contact.

See All Postings From Lubov Cholakova >>

Comments

Be the first to write a comment

You must me logged in to write a comment.