0

How would you add sub meus to this menu.

<div class="menu">
        <ul>
          <li><a href="index.html" class="active"><span>Home Page </span></a></li>
          <li><a href="contact.html"><span>Contact Us</span></a></li>
        </ul>
      </div>
4
Contributors
3
Replies
6
Views
5 Years
Discussion Span
Last Post by rileyganimator
0

Here is an example..

<div class="menu">
   <ul>
      <li><a href="index.html" class="active"><span>Home Page </span></a>
        <ul>
          <li><a href="#"><span>Sub Menu Item #1</span></li>
          <li><a href="#"><span>Sub Menu Item #2</span></li>
        </ul>
      </li>
      <li><a href="contact.html"><span>Contact Us</span></a></li>
    </ul>
</div>

Aside from the HTML, you'll need some assistance using CSS, JavaScript and/or jQuery to get the dynamic part of the menu to work.

0

A drop down would look something like this if you include a small javascript code...

<html>
    <script type="text/javascript">
    var hDropped = false;
    var cDropped = false;

    function dropHome() {
        if (!hDropped) {
            document.getElementById("dropHome").innerHTML = "<li><a href='#'><span>Sub Menu Item #1</span></li><li><a href='#'><span>Sub Menu Item #2</span></li>";
            hDropped = true;
        } else if (hDropped) {
            document.getElementById("dropHome").innerHTML = "";
            hDropped = false;
        }
    }

    function dropContact() {
        if (!cDropped) {
            document.getElementById("dropContact").innerHTML = "<li><a href='#'><span>Sub Menu Item #1</span></li><li><a href='#'><span>Sub Menu Item #2</span></li>";
            cDropped = true;
        } else if (cDropped) {
            document.getElementById("dropContact").innerHTML = "";
            cDropped = false;
        }
    }
    </script>
    <div class="menu">
        <ul>
            <li>
                <span onclick="dropHome();">Home Page</span>
                <ul id="dropHome"></ul>
            </li>
            <li>
                <span onclick="dropContact();">Contact Us</span>
                <ul id="dropContact"></ul>
            </li>
        </ul>
    </div>
</html>

Hope this helps

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.