1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Web Design How to add submenus to Music School Template

Discussion in 'Web Design' started by duffymoon, Jul 6, 2014.

  1. duffymoon

    duffymoon New Member

    Hi,
    I've been using the Music School Template for my voice student and would like to add submenus. Is there anyone out there who can help me with this?
    Thanks
     
  2. Mildju

    Mildju Member

    @duffymoon Hi Duffymoon.

    If you look at the source code of the web page, there is the following section listing the different menus available :

    HTML:
    <div class="header">
      <a href="index.html" id="logo"><img src="images/logo.png" alt="logo"></a>
      <ul class="navigation">
        <li>
          <a href="index.html">Home</a>
        </li>
        <li class="selected">
          <a href="about.html">About</a>
        </li>
        <li>
          <a href="programs.html">Programs and Fees</a>
        </li>
        <li>
          <a href="blog.html">Blog</a>
        </li>
        <li>
          <a href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
    
    Let's say you'd like to add sub-menus named 'Program 1', 'Program 2' and 'Program 3' under the 'Programs and Fees' menu. Then your code looks like this :

    HTML:
    <div class="header">
      <a href="index.html" id="logo"><img src="images/logo.png" alt="logo"></a>
      <ul class="navigation">
        <li>
          <a href="index.html">Home</a>
        </li>
        <li class="selected">
          <a href="about.html">About</a>
        </li>
        <li>
          <a href="programs.html">Programs and Fees</a>
            <ul>
              <li>
                <a href="p1.html"> Program 1</a>
              <li>
              <li>
                <a href="p2.html"> Program 2</a>
              <li>
              <li>
                <a href="p3.html"> Program 3</a>
              <li>
            <ul>
        </li>
        <li>
          <a href="blog.html">Blog</a>
        </li>
        <li>
          <a href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
    
    where p1.html, p2.html, p3.html are the filenames of your HTML pages corresponding to your sub-menus.

    Hope it helps. ;)
     
    Ruthe and Dawn like this.
  3. Ritam Dalui

    Ritam Dalui New Member

    Thanks for the information. Keep updating.

    Merry Christmas,