SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool 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

    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.....

    http://www.bbc.co.uk/sport/0/football/

    Thansk foar any help, great books and fantastic site!

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does anyone know?

    I'm stuck

  3. #3
    SitePoint Member
    Join Date
    Jun 2013
    Location
    united kingdom
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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 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.

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by kimbo_king View Post
    Is there a way to click to close? I notice the only way to close it to click on another header.
    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.

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo

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

    http://jsfiddle.net/NRBkd/

    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:

    http://jsfiddle.net/NRBkd/

    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

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    Quote Originally Posted by kimbo_king View Post
    Been away in Germany last week so slow progress, great country btw
    It sure is. Where were you?

    Quote Originally Posted by kimbo_king View Post
    I've been trying to figure out how to start it as open but cant do so far.
    Give the link in the panel you want to be open when the page starts an id.

    HTML Code:
    <section id="fixtures">
      <h2>
        <a href="#fixtures" id="trigger">Upcoming Fixtures</a>
      </h2>
      ...
    </section>
    Then add this JavaScript to the bottom of your page:

    HTML Code:
        <script>
          document.getElementById("trigger").click();
        </script>  
      </body>
    </html>
    HTH

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!!!

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Quote Originally Posted by kimbo_king View Post
    I was in Hamburg on business. Nice city, really liked the German culture.
    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 .

    Quote Originally Posted by kimbo_king View Post
    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?
    This is why I like JS. It gives you much more control over how things are displayed after the DOM has loaded.

    Quote Originally Posted by kimbo_king View Post
    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.
    This should work:

    Code:
    <!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.

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

    http://jsfiddle.net/TMfbS/

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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?

  14. #14
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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?

  16. #16
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its from the link you kindly posted:

    http://www.hongkiat.com/blog/css-content-accordion/

    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

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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-base...emo/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?

  18. #18
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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.

  19. #19
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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.

  21. #21
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Pullo

    will check when I'm home, must have looke dat 100 last night, most of which weren't customisable enough!

    Saved me a lot of time and effort there (again) thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •