Link to home
Start Free TrialLog in
Avatar of Jagadeesh M
Jagadeesh MFlag for United States of America

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.getElementsByTagName("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.display = "block";
                              
                     }
                     if (!cur.parentNode || !cur.parentNode.parentNode)
                     {
                        break;
                     };
                     cur = cur.parentNode.parentNode.previousSibling;
                  }
               }
               if (a.nextSibling && a.nextSibling.style)
               {
                  a.nextSibling.style.display = "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">-&nbsp;  Freshman</a></li>
                     <li><a name="m" href="#" class="noline red">-&nbsp;  Transfer</a></li>
                     <li><a name="m" href="#" class="noline red">-&nbsp;  International</a></li>
                        <li><a name="m" href="#" class="noline red">-&nbsp;  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>&nbsp; </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.







Avatar of kalifi
kalifi

Hi jagadeesh_motamarri,

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.getElementsByTagName("A")[i]); ++i)
      {
            if (a.name == "m")
            {
                  if (a.parentNode.parentNode.id == "menu")
                  {
                        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.id != "menu")
                        {
                              cur = cur.parentNode;
                              counter = counter + 1;
                        }
                        cur = this;
                        while (cur)
                        {
                              if (cur.nextSibling && cur.nextSibling.style)
                              {
                                    cur.nextSibling.style.display = "block";

                              }
                              if (!cur.parentNode || !cur.parentNode.parentNode)
                              {
                                    break;
                              };
                              cur = cur.parentNode.parentNode.previousSibling;
                        }
                        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.previousSibling.style.color = "black";
                              cur.parentNode.parentNode.previousSibling.style.textDecoration = "underline";
                        } else
                        {
                              cur.style.color = "red";      
                              cur.style.textDecoration = "none";
                              cur.parentNode.parentNode.previousSibling.style.color = "black";
                              cur.parentNode.parentNode.previousSibling.style.textDecoration = "underline";
                              cur.parentNode.parentNode.parentNode.parentNode.previousSibling.style.color = "black";
                              cur.parentNode.parentNode.parentNode.parentNode.previousSibling.style.textDecoration = "underline";

                        }
                  }
                  if (a.nextSibling && a.nextSibling.style)
                  {
                        a.nextSibling.style.display = "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 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">-&nbsp;  Freshman</a></li>
<li><a name="m" href="#" class="noline red">-&nbsp;  Transfer</a></li>
<li><a name="m" href="#" class="noline red">-&nbsp;  International</a></li>
<li><a name="m" href="#" class="noline red">-&nbsp;  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>&nbsp; </p>
</body></html>

give it a try and write back!

Hope that helps.

Miro
Avatar of Jagadeesh M

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.
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
ASKER CERTIFIED SOLUTION
Avatar of kalifi
kalifi

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
U are the best...thankz.