2 replies [Last post]
RCDAWebmaster
Offline
newbie
Albany, NY
Last seen: 6 years 27 weeks ago
Albany, NY
Timezone: GMT-5
Joined: 2014-12-11
Posts: 1
Points: 2

Hi there. I'm learning to create a collapsing and expanding vertical link menu. I've created the menu using ul and li tags. I have given the tags IDs so that I can target them directly and such that other unordered lists are not affected in this manor of styling.

For some unknown reason, when the menu loads, the branches of the menu load expanded. and when I click the a branch, that branch collapses, but any other collapsed branches expand.

1. I'd like all branches to load collapsed
2. I'd like any branches I expand to remain expanded until I collapse it

Sample of the code:

<!DOCTYPE html>
<head>
   <title>menu mockup</title>
   <style type="text/css">
 
 
	  .show1 {display: none; font-family:arial; font-size:10pt;}
	  .show2 {display: none; font-family:arial; font-size:10pt;}
	  .show3 {display: none; font-family:arial; font-size:10pt;}
 
	  .hide1 {display: block; font-family:arial; font-size:10pt;}
	  .hide2 {display: block; font-family:arial; font-size:10pt;}
	  .hide3 {display: block; font-family:arial; font-size:10pt;}
 
	  .hide1:focus + .show1  {display: block; font-family:arial; font-size:10pt; height:30px;}
      .hide2:focus + .show2 {display: block; font-family:arial; font-size:10pt; height:30px;}
	  .hide3:focus + .show3 {display: block; font-family:arial; font-size:10pt; height:30px;}
      .hide1:focus { display: none; font-family:arial; font-size:10pt;}
      .hide2:focus { display: none; font-family:arial; font-size:10pt;}	  
	  .hide3:focus { display: none; font-family:arial; font-size:10pt;}	  
      .hide1:focus ~ #list1 { display:none; font-family:arial; font-size:10pt;}
      .hide2:focus ~ #list2 { display:none; font-family:arial; font-size:10pt;}
	  .hide3:focus ~ #list3 { display:none; font-family:arial; font-size:10pt;}
 
	  li#top1{
		display: block;  
	  }
 
 
	 li#item1 a{
		display:block; 
	 }
 
	 li#item2 a{
		display:block; 
	 }		
 
	  li#top1{
		display:block; 
		font-family:arial;
		font-size:10pt;
	  }
	  li#top1{
    	display: block;
		font-family:arial;
		font-size:10pt;
	  }
 
	  li#top2{
		display: block; 
		font-family:arial;
		font-size:10pt;
	  }
 
	  li#top3{
		display:block; 
		font-family:arial;
		font-size:10pt;
	  }
	  li#item{
		display:block; 
		font-family:arial;
		font-size:10pt;
		height:30px;
		text-decoration:none; 
	  }
 
	  li#item2{
		display:block; 
		font-family:arial;
		font-size:10pt;
		height:30px; 
	  }
 
	  li#item3{
		display:block; 
		font-family:arial;
		font-size:10pt;
		height:30px; 
	  }
 
 
 
   </style>
</head>
<body>
 
      <div>
      <ul id="menu">
         <li id="top1"><a href="#" class="hide1" >Priests</a>
         <a href="#" class="show1">Priests<img src="../Documents/RCDA-new/Offices/Vocations/arrow068.gif" border=0></a>
         <ul id="list1">
            <li id="item">Bishop's Welcome</li>
            <li id="item">The Essentials</li>
            <li id="item">Meet our Men</li>
            <li id="item">Our Seminarians</li>
            <li id="item">Nitty Gritty</li>                        
         </ul></li>
 
         <li id="top2"><a href="#" class="hide2">Religious Life</a>
         <a href="#" class="show2">Religious Life<img src="../Documents/RCDA-new/Offices/Vocations/arrow068.gif" border=0></a>
         <ul id="list2">
            <li id="item">The Essentials</li>
            <li id="item">Meet Our Religious</li>
            <li id="item">Vocation Awareness Council</li>
            <li id="item">FAQs</li>
            <li id="item">Nitty Gritty</li>                        
         </ul></li>
 
         <li id="top3"><a href="#" class="hide3">Media</a>
         <a href="#" class="show3">Media<img src="../Documents/RCDA-new/Offices/Vocations/arrow068.gif" border=0></a>
         <ul id="list3">
            <li id="item">Vocation Podcasts</li>
            <li id="item">Priesthood Videos</li>
            <li id="item">Religious Life Videos</li>                      
         </ul></li>
 
         <li id="item"><a href="#">News & Events</a></li>
         <li id="item"><a href="#">Site Map</a></li>
         <li id="item"><a href="#" style="text-decoration:none;">Contact Us</a></li>
        </ul>
      </div>
   <p>&nbsp;</p>
</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 8 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Id's need to be unique. I

Hi
Id's need to be unique.

I suggest you give all the top level li's a class, "top" then start with

.top ul {
 display:none;
}  

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I'll go one further

If all the children have the same class, simply put that class token on the parent. Better yet, give that parent an id.

<ul id="topmenu">
  <li> top level item 
    <ul> 
      <li>...</li>
    </ul>
  </li>
</ul>
=============
#topmenu ul {
    display: none;
    }
 
#topmenu li:hover ul {
    display: block;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.