EndPreviousNextEnd EndPrint This TopicEnd

Navigation.css

1.This file is used for the Bread Crumb, Unique Navigation, and Primary Navigation and Sub Navigation modules. Do not change class names. Alter attributes as required. Prefix with Container ID to apply style to individual containers.
 

2.The Primary Navigation module and Sub Navigation module use the same Navigation function. But default Module settings instruct the database to start at level 2. Prefix with Container ID to apply style to individual containers.
 

3.The default style of Navigation uses class’s named .navitem1, .navitem2, .navitem3 and so on. The classes must be written in order in the code, (i.e. .navitem1, .navitem2, etc). If the navigation requires deeper levels than the styles allows for, the extra levels will inherit the last navigation listed. In the default code the last level is .navitem4.
 

4.Two new classes have been introduced to allow styles for Selected states. MenuSelected and SelectedParent can be appended to the end of the class. If a different style is required at each sub level, number the SelectedParent as SelectedParent1, SelectedParent2 etc.

 

 

Default Code

 

/* === [ UNIQUE NAVIGATION ] === */

.navunique {

}

 span.navunique {

 }

         .navunique a:link, 

         .navunique a:visited, 

         .navunique a:hover, 

         .navunique a:active {

         }

         .navunique a:hover {

         }

 

                  /* === [ Selected state ] === */

                         .navunique a:link.MenuSelected, 

                 .navunique a:visited.MenuSelected, 

                 .navunique a:hover.MenuSelected, 

                 .navunique a:active.MenuSelected {

                 }

 

/* === [ PRIMARY NAVIGATION - GLOBAL STYLE ] === */

 

/* === [ Level 1 ] === */

.navitem1 {

}

         .navitem1 a:link, 

         .navitem1 a:visited, 

         .navitem1 a:active {

         }

         .navitem1 a:hover{

         }

 

                  /* === [ Selected state ] === */

                 .navitem1 a:link.MenuSelected, 

                 .navitem1 a:visited.MenuSelected, 

                 .navitem1 a:active.MenuSelected {

                 }

                 .navitem1 a:hover.MenuSelected {

                 }

 

                  /* === [ Selected Parent state ] === */

                 .navitem1 a:link.SelectedParent1, 

                 .navitem1 a:visited.SelectedParent1, 

                 .navitem1 a:active.SelectedParent1 {

                 }

                 .navitem1 a:hover.SelectedParent1 {

                 }

Topic Link