Be the first to write a review
Universal CSS Navigation Menu: Advanced CSS Styling
Style your CSS menu the way you want!
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.
4.Changing styles
Changing styles can be done fairly easy. First choose the part that needs to be changed from one of the categories. Copy the Class from the second column an paste it into the new CSS file (or type it). Copy the Property from the third column and place this below the corresponding class in the CSS file. Change the value for the property to set the exact details for the own CSS style.
An example of how the CSS code should look like per class is shown below.
.dmxNavigationMenu {
background-color:
#000;
background-image:url(background.jpg)
background-repeat:
repeat-x;
-webkit-border-radius:
4px;
-moz-border-radius:
4px;
}
Sometimes the placement of custom CSS code may seem to have no effect at all. This is caused by the fact that other settings may overrule the newly created code. When that happens, the addition of !important behind the CSS property will force the code to be applied.
.dmxNavigationMenu > ul > li > a {
font-size: 16px;
color: #C30 !important;
}
4.1.Background color
Part to change |
Selector |
Example of property and value |
Background color of menu bar |
.dmxNavigationMenu |
background-color: #000; |
All menu items background color |
.dmxNavigationMenu li |
background-color: #000; |
Main menu items background color |
.dmxNavigationMenu > ul > li |
background-color: #000; |
Sub menu items background color |
.dmxNavigationMenu ul.sub |
background-color: #000; |
Hover all items background color |
.dmxNavigationMenu li a:hover; |
background-color: # CF6; |
Hover Main menu item background color |
.dmxNavigationMenu > ul > li > a:hover |
background-color: #CF6; |
Hover Sub menu item background color |
.dmxNavigationMenu ul.sub > li > a:hover; |
background-color: #CF6; |
Transparent Sub menu |
.dmxNavigationMenu ul.sub |
opacity:0.4;filter:alpha(opacity=40); |
Mark selected item Main and Sub menu |
dmxNavigationMenu li a:selected; |
background-color: #CF6 |
Mark selected item Main menu |
.dmxNavigationMenu > ul > li > a:selected; |
background-color: #C00 |
Mark selected item Sub menu |
.dmxNavigationMenu ul.sub > li > a:selected; |
background-color: #000 |
4.2.Background image
Part to change |
Selector |
Example of property and value |
Menu bar background image |
.dmxNavigationMenu |
background-image:url(background.jpg) |
Menu bar repeat background image horizontal |
.dmxNavigationMenu |
background-repeat: repeat-x; |
Menu bar repeat background image vertical |
.dmxNavigationMenu |
background-repeat: repeat-y; |
Sub menu background image |
.dmxNavigationMenu ul.sub |
background-image:url(background.jpg) |
Sub menu repeat background image horizontal |
.dmxNavigationMenu ul.sub |
background-repeat: repeat-x; |
Sub menu repeat background image vertical |
.dmxNavigationMenu ul.sub |
background-repeat: repeat-y; |
4.3.Border
Part to change |
Selector |
Example of property and value |
Menu Bar bordere |
.dmxNavigationMenu |
border: 1px solid; |
Menu Bar colored bordere |
.dmxNavigationMenu |
border: 1px solid #F0D; |
Submenu colored border |
.dmxNavigationMenu ul.sub |
border: 1px solid #F0D; |
All items border |
.dmxNavigationMenu li a |
border: 1px solid #F0D; |
All items bottom border |
dmxNavigationMenu li a |
border-bottom:1px solid #F0D; |
Hover all items border |
.dmxNavigationMenu li a:hover, .dmxNavigationMenu li a.hover |
border: 1px solid #F0D; |
Hover all items bottom border |
.dmxNavigationMenu li a:hover, .dmxNavigationMenu li a.hover |
border-bottom:1px solid #F0D; |
Hover Main menu item border |
.dmxNavigationMenu > ul > li > a:hover |
border: 1px solid #000; |
Hover Main menu item bottom border |
.dmxNavigationMenu > ul > li > a:hover |
border-bottom: 1px solid #000; |
Hover Sub menu item border |
.dmxNavigationMenu ul.sub > li:hover, .dmxNavigationMenu ul.sub > li.hover |
border: 1px solid #000; |
Hover Sub menu item bottom border |
.dmxNavigationMenu ul.sub > li:hover, .dmxNavigationMenu ul.sub > li.hover |
border-bottom: 1px solid #000; |
Menu Bar rounded corners |
.dmxNavigationMenu |
-webkit-border-radius: 4px; -moz-border-radius: 4px; |
Menu Bar rounded corners bottom |
.dmxNavigationMenu |
-webkit-border-radius: 0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; |
Sub menu rounded corners |
.dmxNavigationMenu ul.sub |
-webkit-border-radius: 4px; -moz-border-radius: 4px; |
Sub menu rounded corners bottom |
.dmxNavigationMenu ul.sub |
-webkit-border-radius: 0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; |
4.4.Padding and margin
Part to change |
Selector |
Example of property and value |
Menu Title margin all sides |
.dmxNavigationMenu h3 |
margin: 15px; |
Left Menu Title margin |
dmxNavigationMenu h3 |
margin: 5px 5px 5px 25px; |
Top Menu Title margin |
dmxNavigationMenu h3 |
margin: 25px 5px 5px 5px; |
Right Menu Title margin |
dmxNavigationMenu h3 |
margin: 5px 25px 5px 5px; |
Bottom Menu Title margin |
dmxNavigationMenu h3 |
margin: 5px 5px 25px 5px; |
All items padding |
.dmxNavigationMenu li |
padding:5px; |
Main menu items padding |
.dmxNavigationMenu > ul > li |
padding:5px; |
Main menu items padding left and right |
.dmxNavigationMenu > ul > li |
padding-left:5px;; padding-right:5px; |
Main menu items padding top and bottom |
.dmxNavigationMenu > ul > li |
padding-top:5px;; padding-bottom:5px; |
Sub menu items padding |
.dmxNavigationMenu ul.sub > li |
padding:5px; |
Sub menu positioning |
.dmxNavigationMenu ul.sub |
margin-left: 5px !important; |
Sub menu items padding left and right |
.dmxNavigationMenu ul.sub > li |
padding-left:5px;; padding-right:5px; |
Sub menu items padding top and bottom |
.dmxNavigationMenu ul.sub > li |
padding-top:5px;; padding-bottom:5px; |
Main menu items margin |
.dmxNavigationMenu > ul > li |
margin-left:5px; margin-right:5px; |
Sub menu items left margin |
.dmxNavigationMenu ul.sub > li |
margin-left:5px; |
4.5.Text Formatting
Part to change |
Selector |
Example of property and value |
Menu Title font |
dmxNavigationMenu h3 |
font-family: Tahoma; |
All fonts in entire menu |
dmxNavigationMenu * |
font-family: Verdana; |
Main menu font |
.dmxNavigationMenu > ul > li > a |
font-family: Helvetica; |
Sub menu font |
.dmxNavigationMenu ul.sub > li > a |
font-family: Georgia; |
Menu Title color |
dmxNavigationMenu h3 |
color: #0CF; |
All text color in entire menu |
dmxNavigationMenu * |
color: #F00; |
Main menu text color |
.dmxNavigationMenu > ul > li > a |
color: #F0D; |
Sub menu text color |
.dmxNavigationMenu ul.sub > li > a |
color: #F00; |
Hover items text color |
.dmxNavigationMenu li a:hover, .dmxNavigationMenu li a.hover |
color: #F0D; |
Menu Title size |
dmxNavigationMenu h3 |
font-size: 14px; |
All text sizes in entire menu |
dmxNavigationMenu * |
font-size: 11px; |
Main menu font size |
.dmxNavigationMenu > ul > li > a |
font-size: 12px; |
Sub menu font size |
.dmxNavigationMenu ul.sub > li > a |
font-size: 11px; |
Menu width 1) |
.dmxNavigationMenu |
width:450px; |
Menu height |
.dmxNavigationMenu |
height: 60px; |
Sub menu width 2) |
.dmxNavigationMenu ul.sub |
width:200px; |
1) Can also be set in the Properties Inspector
2) Only works when no value is set in the Extension Window
4.6.Positioning
Part to change |
Selector |
Example of property and value |
Right Menu Title position |
.dmxNavigationMenu h3 |
float: right; |
Aligning Search Form from bottom |
.dmxNavigationMenu form.dmxSearchForm |
bottom: 10px; |
Aligning Search Form from top |
.dmxNavigationMenu form.dmxSearchForm |
top: 10px; |
Aligning Search Form from right |
.dmxNavigationMenu form.dmxSearchForm |
right: 25px; |
4.7.Shadow
Part to change |
Selector |
Example of property and value |
Shadow on Sub menu |
. .dmxNavigationMenu ul.sub |
-moz-box-shadow:
5px 5px 5px #000; |
Shadow on Main menu |
.dmxNavigationMenu |
-moz-box-shadow:
5px 5px 5px #000; |
4.8.Miscellaneous
Part to change |
Selector |
Example of property and value |
Horizontal separator color |
.dmxNavigationMenu ul.horizontal > li.separator |
background-color: #000; |
Horizontal separator height |
.dmxNavigationMenu ul.horizontal > li.separator |
height:15px; |
Vertical separator color |
.dmxNavigationMenu li.separator |
background-color: #000; |
Change expendable down image |
.dmxNavigationMenu span.sub_down |
background-image: url('down.png'); |
Change expendable up image |
.dmxNavigationMenu span.sub_up |
background-image: url(up.png'); |
Change expendable left image |
.dmxNavigationMenu span.sub_left |
background-image: url(left.png'); |
Change expendable right image |
.dmxNavigationMenu span.sub_right |
background-image: url(right.png'); |
Patrick Julicher
Patrick started developing websites at the age of 25, only using HTML and building simple websites. Through the years his passion for designing and developing grew, and his career moved in that direction in the year 2004, when he decided to try and get a job in ICT and Web Development.
He got this chance at WE ICT, based in Nijmegen, The Netherlands. For the first couple of years he combined network management for customers with creating database-driven websites in ASP. Since 2008 his main work is on the developing part.
While ASP is still his favorite language, he's slowly trying to dive into ASP.NET and discover all of the possibilities.