SimpleControl's Menu System

SimpleControl's Menu

I will start with how it is built. In html the tree menu looks like this:

Without submenu

<ul>
  <li><a>Link 1</a></li>
  <li><a>Link 2</a></li>
  <li><a>Link 3</a></li>
  <li><a>Link 4</a></li>
</ul>

With submenu:

<ul>
  <li><a>Link 1</a></li>
  <li><a>Link 2</a></li>
  <li><a>Link 3
    <ul>
      <li><a>Sub Link 1</a></li>
      <li><a>Sub Link 2</a></li>
    </ul>
  </a></li>
  <li><a>Link 4</a></li>
</ul>

With this kind of menu structure you can make the menu be whatever you need: drop down, sliding, sticky(moving on a screen when scrolling) or anything else for this metter.

Selected Link
When Someone click on a link in the menu, "<a>" will have class="selected".

So if we are here: Link 3 -> Sub Link 1, then in HTML it will look like this:

<ul>
  <li><a>Link 1</a></li>
  <li><a>Link 2</a></li>
  <li><a class="selected">Link 3
    <ul>
      <li><a class="selected">Sub Link 1</a></li>
      <li><a>Sub Link 2</a></li>
    </ul>
  </a></li>
  <li><a>Link 4</a></li>
</ul>

To control how the menu looks like you could wrap $menu with a <div id="mymenu"> then in CSS file write:

#mymenu a{color:blue}
#mymenu a:hover{color:red}
#mymenu .selected{color:black;font-weight:bold}

To make some level of menu looks different from others just write:

#mymenu ul li ul li a{color:green}
#mymenu ul li ul li a:hover{color:purple}
#mymenu ul li ul li .selected{color:orange;font-weight:italic}

This will make links at level two looks green and purple on hover.
(you could also write just #mymenu li li{})

SkySimple

SimpleControl's Menu