Western Kentucky University

IT Division - OU Campus - Self Help - Navigation Menus

Modifying Your Navigation Menus

There are two types of navigation menus you will encounter in OU Campus:  a left navigation menu and a top navigation menu.  See the sections below for the proper way to edit each navigation.


Left Navigation

View a video tutorial on modifying a left navigation

The left navigation can usually be modified through the WYSIWYG editor.  Each bullet item in the unordered list is a menu item.  You can use the normal link button to turn each menu item into a hyperlink.  See the self help section on Adding/Modifying a Link.

The HTML for the left navigation uses an unordered list.   Unordered lists start and end with the <ul> and </ul> tags.  Each item in the list starts with <li> and ends with </li>.   You can have as many list items before ending the list as you'd like.  The proper syntax for a unordered list looks like the following:

<ul class="navmenu-v">
          <li>List Item 1</li>
          <li>List Item 2</li>
</ul>

In the above example, you'll notice that these list items are not hyperlinks.  As previously mentioned, you can add the links through the WYSIWYG editor.



Top Navigation

View a video tutorial on modifying a top navigation

Due to the nested lists that create the drop-downs in the Top Navigation, modifying with the WYSIWYG editor can be more difficult  than editing the Left Navigation.

The proper syntax for a nested unordered list looks like the following:

<ul class='dropdown_sub'>
          <li>List Item 1
                    <ul>
                              <li>Sub Item 1</li>
                              <li>Sub Item 2</li>
                    </ul>
          </li>
          <li>List Item 2</li>
</ul>

The above example will produce a menu that has a drop-down menu when the mouse is hovered over "List Item 1".  Notice that the </li> for List Item 1 does not occur until after the entire sub item menu.   You'll also notice these list items are not hyperlinks.  You can add the links through the WYSIWYG editor.

 Last Modified 7/23/13