CSS vertical menu

[nish1234]

Friends,

I need help with a vertical CSS menu. I am interested in a menu that can be found at http://www.cooper.com. It's a vertical menu with sub/sub elements. For example, click on 'Training' and see...

Is that a pure CSS menu? Or any JS involved?
Is it a dropdown menu or called something else? I don't think its dropdown.
Can anyone point me to some tutorials or help with code for a similar menu mentioned above?

Thanks in advance.
Nish

[laura_ci]

Hi Nish,

I'm afraid this menu isn't anything as exciting as a CSS drop-down menu or JavaScript. If you notice when you click on 'Training' that the page content also changes, as will as the sub-menu which appears below 'Training'.

This simply uses a different menu layout for each page with a sub-menu. So for example, if your on the home page the menu section "could" be:

<div id="menu">
  <h1>SERVICES</h1>
  <ul class="level_one">
    <li><a hef="evaluation.html">Evaluation</a></li>
    <li><a hef="training.html">Training</a></li>
    <li><a hef="org_consulting.html">Organizational Consulting</a></li>
  </ul>
</div>

Then when your on the Training page, the code is something like:

<div id="menu">
  <h1>SERVICES</h1>
  <ul class="level_one">
    <li><a hef="evaluation.html">Evaluation</a></li>
    <li>
      <a hef="training.html">Training</a>
      <ul class="level_two">
        <li><a hef="idp.html">Interaction Design Practicum</a></li>
        <li><a hef="comm_design.html">Communicating Design</a></li>
      </ul>
    </li>
    <li><a hef="org_consulting.html">Organizational Consulting</a></li>
  </ul>
</div>

But...

If your interesting in CSS Menus, check out the appropriately named CSS Menus site. You can download the files for free and tweak them where required. And most importantly, they work across ALL versions of IE, Firefox, Safari and Chrome.

Hope this helps

[laura_ci]

P.S. Welcome to Daniweb =D