Member Avatar for BadManSam

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
  • 105 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by rileyganimator
Member Avatar for JorgeM

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.

Member Avatar for dany12

If you want a drop down you should look at this Click Here

Member Avatar for rileyganimator

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.