RS-1200 Prototypes DropDown Navigation

We were recently asked for help about adding a third level to the top navigation bar in the RS1200 prototype series of templates.

We were happy to inform this person that a third level is actually already prebuilt into the templates.

Just to ensure clarity - this information is applicable to all of the templates that are called / start with "RS-1200 PTT" e.g. RS-1200 PTT 1 to 51, they all use the same navigation styling and structure.

For those who are not sure what we are rambling on about, the image below shows what is meant.

3 Tier DropDown CSS Navigation Menu

If you want to make use of the third level simply take a look at the code found below, it demonstrates how the third level should be integrated.

<ul class="clear"> <li><a href="#">Level 1</a></li> <li><a class="drop" href="#">Level 1</a> <!-- ####################### FIRST DROP ########################################## --> <ul> <li><a href="#">Level 2</a></li> <li><a class="drop" href="#">Level 2</a> <!-- ####################### SECOND DROP ##################################### --> <ul> <li><a href="#">Level 2A</a></li> <li class="last-child"><a href="#">Level 2A</a></li> </ul> <!-- ####################### END SECOND DROP ################################# --> </li> <li class="last-child"><a href="#">Level 2</a></li> </ul> <!-- ####################### END FIRST DROP ###################################### --> </li> <li><a href="#">Level 1</a></li> <li class="last-child"><a href="#">Level 1</a></li> </ul>

The dropdown is simply a case of nesting the lists correctly and adding the appropriate classes where required e.g. the dropdown link(s) has a class of "drop" and the last element in each list (the last "li" in each "ul") has a class of "last-child".

Just for info: the class "drop" adds the "caret" pointing down, indicating that the link has a submenu.

NOTES:

The templates CSS is not set-up to take a third level or to be exact, a fourth level (top + 3 drops). If you require further drops, you will have to modify the navigation CSS file as such.

We don't advise adding further drops, as the navigation becomes clumsy and complicated for the end-user, we suggest a maximum of 2 drops and on the third level (drop 2) use a sidebar navigation when and if required.