Thread: Drop down links

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2012
    Posts
    8
    Rep Power
    0

    Drop down links


    hello,
    i was wondering, how do you create drop down links where you click on the link and information would display right below the link? i'm not thinking of a drop down menu. this would be displayed as part of information on the page. and what code would i use? any help would be appreciated. Thanks
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    14
    Rep Power
    0
    Originally Posted by mikewooten2012
    hello,
    i was wondering, how do you create drop down links where you click on the link and information would display right below the link? i'm not thinking of a drop down menu. this would be displayed as part of information on the page. and what code would i use? any help would be appreciated. Thanks
    If I understand what your after. I drop drop menu is often used in a navigation bar. And there is not usually enough room to provide a snapshot of information of the page in there. Drop down links are mostly used for navigation to another webpage.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2012
    Posts
    8
    Rep Power
    0
    check out the link below, i'd like to create something kind of like what those drop down links are that are orange colored in the middle of the page.

    link

    Originally Posted by kpalmer29852
    If I understand what your after. I drop drop menu is often used in a navigation bar. And there is not usually enough room to provide a snapshot of information of the page in there. Drop down links are mostly used for navigation to another webpage.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    14
    Rep Power
    0
    They are using javascript to utilize an accordion setup.

    [html]<style type="text/css">
    .AccordionTitle, .AccordionContent, .AccordionContainer
    {
    position:relative;
    width:200px;
    }

    .AccordionTitle
    {
    height:20px;
    overflow:hidden;
    cursorointer;
    font-family:Arial;
    font-size:8pt;
    font-weight:bold;
    vertical-align:middle;
    text-align:center;
    background-repeat:repeat-x;
    display:table-cell;
    background-image:url('/sites/default/files/108/images/title_repeater.jpg');
    -moz-user-select:none;
    }

    .AccordionContent
    {
    height:0px;
    overflow:auto;
    display:none;
    }

    .AccordionContainer
    {
    border-top: solid 1px #C1C1C1;
    border-bottom: solid 1px #C1C1C1;
    border-left: solid 2px #C1C1C1;
    border-right: solid 2px #C1C1C1;
    }
    </style>
    <div style="height:310px;" >
    <div id="AccordionContainer" class="AccordionContainer">
    <div><div class="AccordionTitle" onclick="runAccordion(1);" onselectstart="return false;">Accordion 1</div></div>
    <div id="Accordion1Content" class="AccordionContent">I Am Accordion 1.</div>
    <div><div class="AccordionTitle" onclick="runAccordion(2);" onselectstart="return false;">Accordion 2</div></div>
    <div id="Accordion2Content" class="AccordionContent">I Am Accordion 2.</div>
    <div><div class="AccordionTitle" onclick="runAccordion(3);" onselectstart="return false;">Accordion 3</div></div>
    <div id="Accordion3Content" class="AccordionContent">I Am Accordion 3.</div>
    <div><div class="AccordionTitle" onclick="runAccordion(4);" onselectstart="return false;">Accordion 4</div></div>
    <div id="Accordion4Content" class="AccordionContent">I Am Accordion 4.</div>
    <div><div class="AccordionTitle" onclick="runAccordion(5);" onselectstart="return false;">Accordion 5</div></div>
    <div id="Accordion5Content" class="AccordionContent">I Am Accordion 5.</div>
    </div>
    </div>
    [/html]

    javascript:

    var ContentHeight = 200;
    var TimeToSlide = 250.0;

    var openAccordion = '';

    function runAccordion(index)
    {
    var nID = "Accordion" + index + "Content";
    if(openAccordion == nID)
    nID = '';

    setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33);

    openAccordion = nID;
    }

    function animate(lastTick, timeLeft, closingId, openingId)
    {
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var opening = (openingId == '') ? null : document.getElementById(openingId);
    var closing = (closingId == '') ? null : document.getElementById(closingId);

    if(timeLeft <= elapsedTicks)
    {
    if(opening != null)
    opening.style.height = ContentHeight + 'px';

    if(closing != null)
    {
    closing.style.display = 'none';
    closing.style.height = '0px';
    }
    return;
    }

    timeLeft -= elapsedTicks;
    var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);

    if(opening != null)
    {
    if(opening.style.display != 'block')
    opening.style.display = 'block';
    opening.style.height = (ContentHeight - newClosedHeight) + 'px';
    }

    if(closing != null)
    closing.style.height = newClosedHeight + 'px';

    setTimeout("animate(" + curTick + "," + timeLeft +",'" + closingId + "','" + openingId + "')", 33);
    }
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2012
    Posts
    8
    Rep Power
    0
    thanks!
    how do they get a link to display like a link and stay on the current page?

    in your example, how do you get the Accordian 1 text to display as a link?
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    14
    Rep Power
    0
    I would take out the javascript coding
    Instead of:
    Code:
    <div><div class="AccordionTitle" onclick="runAccordion(1);" onselectstart="return false;">Accordion 1</div></div>
    <div id="Accordion1Content" class="AccordionContent">I Am Accordion 1.</div>
    Put:

    <div><div><a href="www.yoursite.com">Accordion 1</a></div></div>

    Thats what I would think let me know if it works
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2012
    Posts
    8
    Rep Power
    0
    nope, that didn't work, i tried taking out the javascript, and adding the link with the javascript, both didn't work. I'm not sure where to add the link to??


    Originally Posted by kpalmer29852
    I would take out the javascript coding
    Instead of:
    Code:
    <div><div class="AccordionTitle" onclick="runAccordion(1);" onselectstart="return false;">Accordion 1</div></div>
    <div id="Accordion1Content" class="AccordionContent">I Am Accordion 1.</div>
    Put:

    <div><div><a href="www.yoursite.com">Accordion 1</a></div></div>

    Thats what I would think let me know if it works

IMN logo majestic logo threadwatch logo seochat tools logo