Jagadeesh M
asked on
effects using css...collapsible menus...
The following code is for collapsible menus using css...i need to add more style to the existing.
Here is the code....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Collapsible Menus</title>
  <script type="text/javascript">
   function onLoadFunction()
   {
     var a;
     for (var i = 0; (a = document.getElementsByTagN ame("A")[i ]); ++i)
     {
      if (a.name == "m")
      {
        a.onclick = function()
        {
         onLoadFunction(); // this resets everything
         var cur = this;
         while (cur)
         {
           if (cur.nextSibling && cur.nextSibling.style)
           {
            cur.nextSibling.style.disp lay = "block";
                           Â
           }
           if (!cur.parentNode || !cur.parentNode.parentNode )
           {
            break;
           };
           cur = cur.parentNode.parentNode. previousSi bling;
         }
        }
        if (a.nextSibling && a.nextSibling.style)
        {
         a.nextSibling.style.displa y = "none";
        }
      }
     }
   }
  </script><style type="text/css">
<!--
      body{
      font-size: 12pt;
      }
                Â
  ul   {
     list-style:none;
            margin-left:0.5em
   }
   a   {
   color:#F00;
     }
  Â
   a:hover   {
     color:#000;
   }
   li li a {
   color:#000;
      text-decoration: none;
   }
   li li a:hover {
   color:#F00;
   }
     Â
      ul li a:active{
            color:#FF0000;}
     Â
     Â
-->
</style>
</head>
<body onload="onLoadFunction()">
<ul>
  <li><a name="m" href="#">Degreee Programs</a>
  <li><a name="m" href="#" id="noline">Undergraduate Admission</a><ul>
         <li><a name="m" href="#" >- Prospective Students</a><ul>
                        <li><a name="m" href="#" class="noline red">-  Freshman</a></li>
                <li><a name="m" href="#" class="noline red">-  Transfer</a></li>
                <li><a name="m" href="#" class="noline red">-  International</a></li>
                      <li><a name="m" href="#" class="noline red">-  Readmit</a></li>
                 </ul>
            </li>
          Â
           <li><a name="m" href="#">- Campus Visits</a></li>
           <li><a name="m" href="#">- Information Requests</a></li>
         <li><a name="m" href="#">- Apply for Admission</a></li>
           <li><a name="m" href="#">- Online Application Status</a>
         <li><a name="m" href="#">- Advanced Placement</a></li>
         <li><a name="m" href="#">- International Baccalaureate (IB) Program</a></li>
           <li><a name="m" href="#">- Special Programs</a></li>
         <li><a name="m" href="#">- Tuition & Fees</a></li>
         <li><a name="m" href="#">- Parents Information</a></li>
           <li><a name="m" href="#">- Guidance Counselors</a>
         <li><a name="m" href="#">- Cooperative Education</a></li>
      </ul></li>
Â
  <li><a name="m" href="#">Graduate Admission</a><ul>
   <li><a name="m" href="#">- Application Information</a><ul>
                   <li><a name="m" href="#" class="nolinedecoration">- Masters</a></li>
                <li><a name="m" href="#" >- PhD</a></li>
                <li><a name="m" href="#" >- Collaborative PhD</a></li>
                      <li><a name="m" href="#" >- International</a></li>
                <li><a name="m" href="#" >- Non-Degree</a></li>
                      <li><a name="m" href="#" >- Graduate Certificates</a></li>
                 </ul>
       </li>
   <li><a name="m" href="#">- Information Request</a>
   <li><a name="m" href="#">- Application Deadlines</a></li>
   <li><a name="m" href="#">- Apply for Admission</a></li>
   <li><a name="m" href="#">- Online Application Status</a></li>
   <li><a name="m" href="#">- Admitted Students</a></li>
   <li><a name="m" href="#">- Financial Support</a></li>
       <li><a name="m" href="#">- Frequently Asked Questions</a></li>
   <li><a name="m" href="#">- Other Resources</a></li>
   <li><a name="m" href="#">- Tution & Fees</a></li>
            Â
  </ul></li>
 Â
  <li><a name="m" href="#">Financial Aid</a><ul>
   <li><a name="m" href="#">- Financial Aid Programs</a><ul>
       <li><a name="m" href="#">- Merit-Based Scholarships</a></li>
   <li><a name="m" href="#">- Need_Based Grants</a></li>
   <li><a name="m" href="#">- Loan Programs</a></li>
   <li><a name="m" href="#">- Student Employment</a></li>
   </ul></li>
      Â
   <li><a name="m" href="#">- How to Apply</a><ul>
       <li><a name="m" href="#">- Scholarship Applications</a></li>
   <li><a name="m" href="#">- Summer Session Aid</a></li>
   <li><a name="m" href="#">- International Students</a></li>
   <li><a name="m" href="#">- Deadlines</a></li>
   </ul></li>
      Â
   <li><a name="m" href="#">- Determining Eligibility</a><ul>
       <li><a name="m" href="#">- Cost per Year</a></li>
   <li><a name="m" href="#">- Special Circumstances</a></li>
   <li><a name="m" href="#">- Dependency Status</a></li>
   <li><a name="m" href="#">- Verification</a></li>
   <li><a name="m" href="#">- Enrollment Status</a></li>
   </ul></li>
      Â
   <li><a name="m" href="#">- Eligibility Policies and Procedures</a><ul>
          <li><a name="m" href="#">- Implications of Withdrawal</a></li>
          <li><a name="m" href="#">- Satisfactory Acedamic Progress</a></li>
                            Â
       </ul></li>
   <li><a name="m" href="#">- Forms</a></li>
   <li><a name="m" href="#">- Key Contacts</a></li>
   <li><a name="m" href="#">- Newsletter</a></li>
  </ul></li>
 Â
      <li><a name="m" href="#">Campus Life</a><ul>
   <li><a name="m" href="#">- Athletics</a></li>
   <li><a name="m" href="#">- Career Services</a>
   <li><a name="m" href="#">- Child Care</a></li>
   <li><a name="m" href="#">- Clubs & Organizations</a></li>
   <li><a name="m" href="#">- Murray Center</a></li>
   <li><a name="m" href="#">- James N Wise Theater</a></li>
   <li><a name="m" href="#">- The Vector</a></li>
  </ul></li>
 Â
  <li><a name="m" href="#">On-Campus Housing</a>
      <li><a name="m" href="#">Learning Alternatives</a><ul>
   <li><a name="m" href="#">- Non-Degree</a></li>
   <li><a name="m" href="#">- Online Learning</a>
   <li><a name="m" href="#">- Extension Sites</a></li>
   <li><a name="m" href="#">- Continuing Professional Education</a></li>
   <li><a name="m" href="#">- Programs for High School Students</a></li>
   <li><a name="m" href="#">- Co-op Programs</a></li>
  </ul></li>
 Â
   <li><a name="m" href="#">Student Resources</a>
      <li><a name="m" href="#">Public Safety</a> Â
      <li><a name="m" href="#">Online Tour</a>
      <li><a name="m" href="#">Contact Us</a> Â
   </ul>
<p> </p>
</body></html>
__________________________ __________ __________ __________ __________ __________ ___
Now here is what i wanted...!!
1. In the menus there are parent->child->childchilds . WHen i click on the parent the link should turn black with an underline and then should show all the children in black color without any underline.
2. when i click on a child it should be black by itself but with an underline.
3. When i click on the child child, the  child child should be red now.
thank you.
Here is the code....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Collapsible Menus</title>
  <script type="text/javascript">
   function onLoadFunction()
   {
     var a;
     for (var i = 0; (a = document.getElementsByTagN
     {
      if (a.name == "m")
      {
        a.onclick = function()
        {
         onLoadFunction(); // this resets everything
         var cur = this;
         while (cur)
         {
           if (cur.nextSibling && cur.nextSibling.style)
           {
            cur.nextSibling.style.disp
                           Â
           }
           if (!cur.parentNode || !cur.parentNode.parentNode
           {
            break;
           };
           cur = cur.parentNode.parentNode.
         }
        }
        if (a.nextSibling && a.nextSibling.style)
        {
         a.nextSibling.style.displa
        }
      }
     }
   }
  </script><style type="text/css">
<!--
      body{
      font-size: 12pt;
      }
                Â
  ul   {
     list-style:none;
            margin-left:0.5em
   }
   a   {
   color:#F00;
     }
  Â
   a:hover   {
     color:#000;
   }
   li li a {
   color:#000;
      text-decoration: none;
   }
   li li a:hover {
   color:#F00;
   }
     Â
      ul li a:active{
            color:#FF0000;}
     Â
     Â
-->
</style>
</head>
<body onload="onLoadFunction()">
<ul>
  <li><a name="m" href="#">Degreee Programs</a>
  <li><a name="m" href="#" id="noline">Undergraduate Admission</a><ul>
         <li><a name="m" href="#" >- Prospective Students</a><ul>
                        <li><a name="m" href="#" class="noline red">-  Freshman</a></li>
                <li><a name="m" href="#" class="noline red">-  Transfer</a></li>
                <li><a name="m" href="#" class="noline red">-  International</a></li>
                      <li><a name="m" href="#" class="noline red">-  Readmit</a></li>
                 </ul>
            </li>
          Â
           <li><a name="m" href="#">- Campus Visits</a></li>
           <li><a name="m" href="#">- Information Requests</a></li>
         <li><a name="m" href="#">- Apply for Admission</a></li>
           <li><a name="m" href="#">- Online Application Status</a>
         <li><a name="m" href="#">- Advanced Placement</a></li>
         <li><a name="m" href="#">- International Baccalaureate (IB) Program</a></li>
           <li><a name="m" href="#">- Special Programs</a></li>
         <li><a name="m" href="#">- Tuition & Fees</a></li>
         <li><a name="m" href="#">- Parents Information</a></li>
           <li><a name="m" href="#">- Guidance Counselors</a>
         <li><a name="m" href="#">- Cooperative Education</a></li>
      </ul></li>
Â
  <li><a name="m" href="#">Graduate Admission</a><ul>
   <li><a name="m" href="#">- Application Information</a><ul>
                   <li><a name="m" href="#" class="nolinedecoration">-
                <li><a name="m" href="#" >- PhD</a></li>
                <li><a name="m" href="#" >- Collaborative PhD</a></li>
                      <li><a name="m" href="#" >- International</a></li>
                <li><a name="m" href="#" >- Non-Degree</a></li>
                      <li><a name="m" href="#" >- Graduate Certificates</a></li>
                 </ul>
       </li>
   <li><a name="m" href="#">- Information Request</a>
   <li><a name="m" href="#">- Application Deadlines</a></li>
   <li><a name="m" href="#">- Apply for Admission</a></li>
   <li><a name="m" href="#">- Online Application Status</a></li>
   <li><a name="m" href="#">- Admitted Students</a></li>
   <li><a name="m" href="#">- Financial Support</a></li>
       <li><a name="m" href="#">- Frequently Asked Questions</a></li>
   <li><a name="m" href="#">- Other Resources</a></li>
   <li><a name="m" href="#">- Tution & Fees</a></li>
            Â
  </ul></li>
 Â
  <li><a name="m" href="#">Financial Aid</a><ul>
   <li><a name="m" href="#">- Financial Aid Programs</a><ul>
       <li><a name="m" href="#">- Merit-Based Scholarships</a></li>
   <li><a name="m" href="#">- Need_Based Grants</a></li>
   <li><a name="m" href="#">- Loan Programs</a></li>
   <li><a name="m" href="#">- Student Employment</a></li>
   </ul></li>
      Â
   <li><a name="m" href="#">- How to Apply</a><ul>
       <li><a name="m" href="#">- Scholarship Applications</a></li>
   <li><a name="m" href="#">- Summer Session Aid</a></li>
   <li><a name="m" href="#">- International Students</a></li>
   <li><a name="m" href="#">- Deadlines</a></li>
   </ul></li>
      Â
   <li><a name="m" href="#">- Determining Eligibility</a><ul>
       <li><a name="m" href="#">- Cost per Year</a></li>
   <li><a name="m" href="#">- Special Circumstances</a></li>
   <li><a name="m" href="#">- Dependency Status</a></li>
   <li><a name="m" href="#">- Verification</a></li>
   <li><a name="m" href="#">- Enrollment Status</a></li>
   </ul></li>
      Â
   <li><a name="m" href="#">- Eligibility Policies and Procedures</a><ul>
          <li><a name="m" href="#">- Implications of Withdrawal</a></li>
          <li><a name="m" href="#">- Satisfactory Acedamic Progress</a></li>
                            Â
       </ul></li>
   <li><a name="m" href="#">- Forms</a></li>
   <li><a name="m" href="#">- Key Contacts</a></li>
   <li><a name="m" href="#">- Newsletter</a></li>
  </ul></li>
 Â
      <li><a name="m" href="#">Campus Life</a><ul>
   <li><a name="m" href="#">- Athletics</a></li>
   <li><a name="m" href="#">- Career Services</a>
   <li><a name="m" href="#">- Child Care</a></li>
   <li><a name="m" href="#">- Clubs & Organizations</a></li>
   <li><a name="m" href="#">- Murray Center</a></li>
   <li><a name="m" href="#">- James N Wise Theater</a></li>
   <li><a name="m" href="#">- The Vector</a></li>
  </ul></li>
 Â
  <li><a name="m" href="#">On-Campus Housing</a>
      <li><a name="m" href="#">Learning Alternatives</a><ul>
   <li><a name="m" href="#">- Non-Degree</a></li>
   <li><a name="m" href="#">- Online Learning</a>
   <li><a name="m" href="#">- Extension Sites</a></li>
   <li><a name="m" href="#">- Continuing Professional Education</a></li>
   <li><a name="m" href="#">- Programs for High School Students</a></li>
   <li><a name="m" href="#">- Co-op Programs</a></li>
  </ul></li>
 Â
   <li><a name="m" href="#">Student Resources</a>
      <li><a name="m" href="#">Public Safety</a> Â
      <li><a name="m" href="#">Online Tour</a>
      <li><a name="m" href="#">Contact Us</a> Â
   </ul>
<p> </p>
</body></html>
__________________________
Now here is what i wanted...!!
1. In the menus there are parent->child->childchilds
2. when i click on a child it should be black by itself but with an underline.
3. When i click on the child child, the  child child should be red now.
thank you.
ASKER
Looks better..!!!
But two things are missing now....one among them is initially the links are red but not underlined....i need them to be underlined.
But two things are missing now....one among them is initially the links are red but not underlined....i need them to be underlined.
ASKER
i don't know if this is possible with css and javascript or not...!! Â i need the underline to only text but not to the '-' sysmbol.
thankz
thankz
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER
U are the best...thankz.
this is what I've made for you:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Collapsible Menus</title>
      <script type="text/javascript">
function onLoadFunction()
{
      var a;
      for (var i = 0; (a = document.getElementsByTagN
      {
           if (a.name == "m")
           {
                 if (a.parentNode.parentNode.i
                 {
                      a.style.color = "red";
                 } else
                 {
                      a.style.color = "black";
                 }
                 a.style.textDecoration = "none";
                 a.onclick = function()
                 {
                      onLoadFunction(); // this resets everything
                      var cur = this;
                      var counter = 0;
                      while (cur.parentNode.parentNode
                      {
                            cur = cur.parentNode;
                            counter = counter + 1;
                      }
                      cur = this;
                      while (cur)
                      {
                            if (cur.nextSibling && cur.nextSibling.style)
                            {
                                 cur.nextSibling.style.disp
                            }
                            if (!cur.parentNode || !cur.parentNode.parentNode
                            {
                                 break;
                            };
                            cur = cur.parentNode.parentNode.
                      }
                      cur = this;
                      if (counter == 0)
                      {
                            cur.style.color = "black";     Â
                            cur.style.textDecoration = "underline";
                      } else if (counter == 2)
                      {
                            cur.style.color = "black";           Â
                            cur.style.textDecoration = "underline";
                            cur.parentNode.parentNode.
                            cur.parentNode.parentNode.
                      } else
                      {
                            cur.style.color = "red";     Â
                            cur.style.textDecoration = "none";
                            cur.parentNode.parentNode.
                            cur.parentNode.parentNode.
                            cur.parentNode.parentNode.
                            cur.parentNode.parentNode.
                      }
                 }
                 if (a.nextSibling && a.nextSibling.style)
                 {
                      a.nextSibling.style.displa
                 }
                            }
      }
}</script><style type="text/css">
<!--
body{
      font-size: 12pt;
}
ul   {
      list-style:none;
      margin-left:0.5em
}
a   {
color:#F00;
}
a:hover   {
color:#000;
 }
li li a {
color:#000;
   text-decoration: none;
}
li li a:hover {
color:#F00;
}
ul li a:active{
color:#FF0000;}
-->
</style>
</head>
<body onload="onLoadFunction()">
<ul id="menu">
<li><a name="m" href="#">Degreee Programs</a>
<li><a name="m" href="#" id="noline">Undergraduate Admission</a><ul>
<li><a name="m" href="#" >- Prospective Students</a><ul>
<li><a name="m" href="#" class="noline red">- Â Freshman</a></li>
<li><a name="m" href="#" class="noline red">- Â Transfer</a></li>
<li><a name="m" href="#" class="noline red">- Â International</a></li>
<li><a name="m" href="#" class="noline red">- Â Readmit</a></li>
</ul>
</li>
<li><a name="m" href="#">- Campus Visits</a></li>
<li><a name="m" href="#">- Information Requests</a></li>
<li><a name="m" href="#">- Apply for Admission</a></li>
<li><a name="m" href="#">- Online Application Status</a>
<li><a name="m" href="#">- Advanced Placement</a></li>
<li><a name="m" href="#">- International Baccalaureate (IB) Program</a></li>
<li><a name="m" href="#">- Special Programs</a></li>
<li><a name="m" href="#">- Tuition &Â Fees</a></li>
<li><a name="m" href="#">- Parents Information</a></li>
<li><a name="m" href="#">- Guidance Counselors</a>
<li><a name="m" href="#">- Cooperative Education</a></li>
</ul></li>
<li><a name="m" href="#">Graduate Admission</a><ul>
<li><a name="m" href="#">- Application Information</a><ul>
<li><a name="m" href="#" class="nolinedecoration">-
<li><a name="m" href="#" >- PhD</a></li>
<li><a name="m" href="#" >- Collaborative PhD</a></li>
<li><a name="m" href="#" >- International</a></li>
<li><a name="m" href="#" >- Non-Degree</a></li>
<li><a name="m" href="#" >- Graduate Certificates</a></li>
</ul>
</li>
<li><a name="m" href="#">- Information Request</a>
<li><a name="m" href="#">- Application Deadlines</a></li>
<li><a name="m" href="#">- Apply for Admission</a></li>
<li><a name="m" href="#">- Online Application Status</a></li>
<li><a name="m" href="#">- Admitted Students</a></li>
<li><a name="m" href="#">- Financial Support</a></li>
<li><a name="m" href="#">- Frequently Asked Questions</a></li>
<li><a name="m" href="#">- Other Resources</a></li>
<li><a name="m" href="#">- Tution &Â Fees</a></li>
</ul></li>
<li><a name="m" href="#">Financial Aid</a><ul>
<li><a name="m" href="#">- Financial Aid Programs</a><ul>
<li><a name="m" href="#">- Merit-Based Scholarships</a></li>
<li><a name="m" href="#">- Need_Based Grants</a></li>
<li><a name="m" href="#">- Loan Programs</a></li>
<li><a name="m" href="#">- Student Employment</a></li>
</ul></li>
<li><a name="m" href="#">- How to Apply</a><ul>
<li><a name="m" href="#">- Scholarship Applications</a></li>
<li><a name="m" href="#">- Summer Session Aid</a></li>
<li><a name="m" href="#">- International Students</a></li>
<li><a name="m" href="#">- Deadlines</a></li>
</ul></li>
<li><a name="m" href="#">- Determining Eligibility</a><ul>
<li><a name="m" href="#">- Cost per Year</a></li>
<li><a name="m" href="#">- Special Circumstances</a></li>
<li><a name="m" href="#">- Dependency Status</a></li>
<li><a name="m" href="#">- Verification</a></li>
<li><a name="m" href="#">- Enrollment Status</a></li>
</ul></li>
<li><a name="m" href="#">- Eligibility Policies and Procedures</a><ul>
<li><a name="m" href="#">- Implications of Withdrawal</a></li>
<li><a name="m" href="#">- Satisfactory Acedamic Progress</a></li>
</ul></li>
<li><a name="m" href="#">- Forms</a></li>
<li><a name="m" href="#">- Key Contacts</a></li>
<li><a name="m" href="#">- Newsletter</a></li>
</ul></li>
<li><a name="m" href="#">Campus Life</a><ul>
<li><a name="m" href="#">- Athletics</a></li>
<li><a name="m" href="#">- Career Services</a>
<li><a name="m" href="#">- Child Care</a></li>
<li><a name="m" href="#">- Clubs &Â Organizations</a></li>
<li><a name="m" href="#">- Murray Center</a></li>
<li><a name="m" href="#">- James N Wise Theater</a></li>
<li><a name="m" href="#">- The Vector</a></li>
</ul></li>
<li><a name="m" href="#">On-Campus Housing</a>
<li><a name="m" href="#">Learning Alternatives</a><ul>
<li><a name="m" href="#">- Non-Degree</a></li>
<li><a name="m" href="#">- Online Learning</a>
<li><a name="m" href="#">- Extension Sites</a></li>
<li><a name="m" href="#">- Continuing Professional Education</a></li>
<li><a name="m" href="#">- Programs for High School Students</a></li>
<li><a name="m" href="#">- Co-op Programs</a></li>
</ul></li>
<li><a name="m" href="#">Student Resources</a>
<li><a name="m" href="#">Public Safety</a> Â
<li><a name="m" href="#">Online Tour</a>
<li><a name="m" href="#">Contact Us</a> Â
</ul>
<p> </p>
</body></html>
give it a try and write back!
Hope that helps.
Miro