Drop down List/ Tree Menu - Help!

I hope this is the right section, if not then apologies

Still new to this so please bear with me :rolleyes:

I’m trying to add a drop down style list to my website but do not know how and cant find anything online. Maybe its because I have the name wrong

Its not a standard drop down menu which I’d like but more of a tree type list

The exact menu I would like is found on the BBC websites as below. The section below Scores, Results & Fixtures to be precise

Now I presume I do this as a list but cant work out how to show info within these etc…

Thansk foar any help, great books and fantastic site!

Does anyone know?

I’m stuck :frowning:

Please see, how to create drop down menu? This is my example…

CSS****************
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}

Html***********

<ul id=“menu”>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>About Us</a>
<ul>
<li><a href=“#”>The Team</a></li>
<li><a href=“#”>History</a></li>
<li><a href=“#”>Vision</a></li>
</ul>
</li>
<li><a href=“#”>Products</a>
<ul>
<li><a href=“#”>Cozy Couch</a></li>
<li><a href=“#”>Great Table</a></li>
<li><a href=“#”>Small Chair</a></li>
<li><a href=“#”>Shiny Shelf</a></li>
<li><a href=“#”>Invisible Nothing</a></li>
</ul>
</li>
<li><a href=“#”>Contact</a>
<ul>
<li><a href=“#”>Online</a></li>
<li><a href=“#”>Right Here</a></li>
<li><a href=“#”>Somewhere Else</a></li>
</ul>
</li>
</ul>

Thanks

So I approach it like that

thats good, I already have a drop down menu so thats a start.

How do you make it so it stays open when you press?

Really appreciate the feedback!

What you are looking for is called an accordion.
You can make them using HTML, CSS (and possibly JavaScript).
There is a good tutorial on how to make a CSS based one here and a demo of the finished product [URL=“http://media02.hongkiat.com/css-based-accordion/demo/index.html”]here.

Alternatively, here is one made using JS.

Hope that helps.

Edit: if you’re feeling adventurous it wouldn’t be too hard to roll your own. I can show you how if you fancy.

Wow… This looks great

Really appreciate it!

I’ll have a play around and see what I can do

Thanks again

PS: Is there a way to click to close? I notice the only way to close it to click on another header.

I will play and see if I can work it out :slight_smile:

I’m sure we could make it do that.
Why don’t you have a go at implementing that and post back here if you get stuck.

Thanks Pullo

I’ve crackedit to some degree. Been away in Germany last week so slow progress, great country btw :slight_smile:

I’ve been trying to figure out how to start it as open but cant do so far. My HTML inside the accordion (Which is taken from an external source (legally)) shows when closed. I cant seem to see why this is

My code is below:

I’m still playing and loving the leanring curve, I cant explain how much I’ve lerant just by tryng to figure out my own mistakes but sometimes I seem to exhaust all problems!!! It’ll come though :slight_smile:

Hi,

It sure is. Where were you?

Give the link in the panel you want to be open when the page starts an id.

<section id="fixtures">
  <h2>
    <a href="#fixtures" id="trigger">Upcoming Fixtures</a>
  </h2>
  ...
</section>

Then add this JavaScript to the bottom of your page:

    <script>
      document.getElementById("trigger").click();
    </script>  
  </body>
</html>

HTH

Fantastic Pullo!

I was in Hamburg on business. Nice city, really liked the German culture. Could definitely live there as its similar to the UK but a little bit nicer 

I really appreciate your help. I’ve learnt loads form what you have come back to me with so I thank you very much

I still can’t work out why the code inside the accordion shows on each tab when closed (As shown in my fiddle posted previously). I’ve tried changing the display to BLOCK etc but I’ve come to the conclusion that it’s the code inside rather than the accordion code?

I’ve come to this conclusion as when I put a simple paragraph in there this doesn’t happen, it only happens when the inner code is in there. Unfortunately as it’s a feed I don’t know where to go now. I spent 8 hours yesterday trying to work this out (I secretly enjoyed it). I’m sure there will be a simple fix but not sure where!!!

Hi there,

Yeah, Hamburg is nice. It is quite famous for its musicals and for its fish market, which is worth a visit at 5am after a hard night on the Reeperbahn :).

This is why I like JS. It gives you much more control over how things are displayed after the DOM has loaded.

This should work:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Accordion</title>
    <style>
    
    /*Accordion Menu LEFT*/
    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
    audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
    audio:not([controls]) { display: none; }
    [hidden] { display: none; }
    html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    body { margin: 0; font-size: 13px; line-height: 1.231; }
    body, button, input, select, textarea { font-family: "century Gothic"; color: #222; }
    
    /*Define Accordion box*/
    .accordion { width:450px; overflow:hidden; margin:10px left; color:#474747; background:#414141; padding:10px; }
    
    /*General Accordion*/
    /*Set style of open slide*/
    .accordion section:target { background:#FFF; padding:10px;}
    .accordion section:target:hover { background:#FFF; }
    .accordion section:target h2 {width:100%;}
    .accordion section:target h2 a{ color:#333; padding:0;}
    .accordion section:target p {display:block;}
    .accordion section h2 a{padding:8px 10px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }
    
    /*set style of closed slide*/
    .accordion section{ float:left;  overflow:hidden; color:#333; cursor:pointer; background: #333; margin:3px; }
    .accordion section:hover {background:#444;}
    .accordion section p { display:none; }
    .accordion section:after{position:relative;font-size:24px;color:#000;font-weight:bold;}
    .accordion section:nth-child(1):after{content:'1';}
    .accordion section:nth-child(2):after{content:'2';}
    .accordion section:nth-child(3):after{content:'3';}
    .accordion section:nth-child(4):after{content:'4';}
    .accordion section:nth-child(5):after{content:'5';}
    /*End General Accordion*/
    
    /*Horizontal Accordion*/
    .horizontal section{ 
      width:5%; height:250px; 
      -moz-transition:width 0.2s ease-out; 
      -webkit-transition:width 0.2s ease-out;
      -o-transition:width 0.2s ease-out;
      -ms-transition:width 0.2s ease-out;
      transition:width 0.2s ease-out;
    }
    
    /*Position the number of the slide*/
    .horizontal section:after{top:140px;left:15px;}
    
    /*Header of closed slide*/
    .horizontal section h2 { 
      -webkit-transform:rotate(90deg);
      -moz-transform:rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      width:240px; position:relative; left:-100px; top:85px;
    } 
      
    /*On mouse over open slide*/
    .horizontal :target{ width:73%;height:230px; }
    .horizontal :target h2{ top:0px;left:0;
      -webkit-transform:rotate(0deg);
      -moz-transform:rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg); 
    }
    /*End Horizontal Accordion*/
  </style>
  </head>
  
  <body>
    <div class="accordion horizontal"> <!-- Accordion - Side Menu START -->
      <section id="fixtures">
        <h2><a href="#fixtures" id="trigger">Upcoming Fixtures</a></h2>
        <div>
          <h4>Senior A</h4>
          <div id="lrep181468890" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=145000822">click here for Senior A</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
          <script language="javascript" type="text/javascript">var lrcode = '181468890'</script>
          <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
          <h4>Senior B</h4>
          <div id="lrep236884406" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=14314424">click here for Senior B</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
          <script language="javascript" type="text/javascript">var lrcode = '236884406'</script>
          <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
        </div>
      </section>
      
      <section id="Results">
        <h2><a href="#Results">Recent Results</a></h2>
        <div>
          <h4>Senior A</h4>
          <div id="lrep613206333" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=145000822">click here for Senior A</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
          <script language="javascript" type="text/javascript">var lrcode = '613206333'</script>
          <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
          <h4>Senior B</h4>
          <div id="lrep717890447" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=14314424">click here for Senior B</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
          <script language="javascript" type="text/javascript">var lrcode = '717890447'</script>
          <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
        </div>
      </section>
      
      <section id="LeagueTable">
        <h2><a href="#LeagueTable">League Tables</a></h2>
        <div>
          <h4>Senior Division A</h4>
          <div id="lrep995187535" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=145000822">click here for Senior A</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
          <script language="javascript" type="text/javascript">var lrcode = '995187535'</script>
          <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
          <h4>Senior Division B</h4>
          <div id="lrep184266996" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=14314424">click here for Senior B</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
          <script language="javascript" type="text/javascript">var lrcode = '184266996'</script>
          <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
        </div>
      </section>
    </div> <!-- end of accordion horizontal div - END of side menu -->
    
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      var $trigger = $("#trigger"),
          $sections = $("section");
      
      $sections.on("click", function(){
        $sections.removeClass("open");
        $(this).addClass("open");
        
        $sections.each(function(){
          if($(this).hasClass("open")){
            $(this).find("div").show();
          } else {
            $(this).find("div").hide();
          }
        })
      })
      
      $trigger[0].click();
    </script>  
  </body>
</html>

Hope that helps you.

Hi again, sorry to bring this back up but I’m playing with two accordions (one vertical/ one horizontal) now but want both to start open

I have tried playing with the trigger in javascript but to no avail. Logic told me if I called on of my triggers trigger 1 then it would read separate but that wasn’t the case!

Hi,

Before we get on to the JS I have a question:
You have your CSS set up so that every time you click an accordion panel it will close all other open accordion panels on the page before opening itself.
This means you cannot have different panels open in different accordions at the same time.
Is this the desired behaviour?

It is but I want each accordion to act independently

IE: when i click a panel in my vertical one, the horizontal one is unaffected

Is it possible that you ammend the CSS first, then?
If you are not sure how to do this, could you post a link to the site where you found the accordion code?

Its from the link you kindly posted:

I’ve been looking through but cant see where this happens! Still new to this but picking it up fast thanks to you Pullo!

Errors are what teach you more, if everything went well all the time I’d never learn anything :slight_smile:

So, I’ve been looking at this for a good while now and I’m afraid it doesn’t seem to be possible to have two accordions of this nature operating independently of each other on the same page.
This is borne out by the fact that the same behaviour can be seen on the author’s demo page: http://media02.hongkiat.com/css-based-accordion/demo/index.html
(Try opening a tab in one accordion, then clicking on a tab in the other - you will see the first tab close).

So, at this juncture, the best advice I can give you is to look for another accordion script which will cater for the desired behaviour (more than one accordion on the page at once).

Do your accordions have to be horizontal and vertical, or will just horizontal do?

Or, if you are set on this accordion, maybe you could ask for help in the CSS forum, as to whether anyone there knows how to have two accordions operating on one page.

Thanks Pullo

Was hoping that was not the case and I was missing something glaringly obvious 

It’s no bother though, I’ll find another accordion and go from there. I do need both the vertical and horizontal!

Really appreciate your help again.

To save you a bit of time and effort, I suggest trying this: http://code.anotherwebstorm.com/apps/awsaccordion/

The interface itself is easy to use and has a bunch of useful options, the resultant accordion is highly configurable and degrades nicely when JS is turned off.

You can also have more than one accordion per page and can change the style from vertical to horizontal by just passing in a parameter.