/    Sign up×
Community /Pin to ProfileBookmark

A Better Way To Do This Menu…

Copy linkTweet thisAlerts:
Sep 10.2006

Hi All,

Newbie here I am working on a menu system, and just trying to do it the best way from the beginning… I’d rather get it right from the start… A couple of points:

  • 1. I thought it wasn’t good to use tables but without them the last menu button goes to the nest line

  • 2. Dreamweaver’s preload function seems very clunky, anyone have a better one

  • 3. I created the images in Fireworks, is this correct… Should I be using CSS?

    • [URL=”http://www.tomsynnott.com/test/test.htm”]http://www.tomsynnott.com/test/test.htm[/URL]

    Any help would be greatly appreciated!

    to post a comment
    HTML

    2 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @shixterSep 10.2006 — Try using this. Use current text tags (<P> or <H> or whatever) for first menu part. Keep div in same table. Then new table for each menu section. For a look at what I mean, look at www.shixter.com. The menu structure there will give firther insite.

    Anyways, here is the code:

    put the script in your head:

    <script type="text/javascript">

    var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)

    var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)

    if (document.getElementById){

    document.write('<style type="text/css">')

    document.write('.switchcontent{display:none;}')

    document.write('</style>')

    }

    function getElementbyClass(classname){

    ccollect=new Array()

    var inc=0

    var alltags=document.all? document.all : document.getElementsByTagName("*")

    for (i=0; i<alltags.length; i++){

    if (alltags[i].className==classname)

    ccollect[inc++]=alltags[i]

    }

    }



    function contractcontent(omit){

    var inc=0

    while (ccollect[inc]){

    if (ccollect[inc].id!=omit)

    ccollect[inc].style.display="none"

    inc++

    }

    }



    function expandcontent(cid){

    if (typeof ccollect!="undefined"){

    if (collapseprevious=="yes")

    contractcontent(cid)

    document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"

    }

    }



    function revivecontent(){

    contractcontent("omitnothing")

    selectedItem=getselectedItem()

    selectedComponents=selectedItem.split("|")

    for (i=0; i<selectedComponents.length-1; i++)

    document.getElementById(selectedComponents[i]).style.display="block"

    }



    function get_cookie(Name) {

    var search = Name + "="

    var returnvalue = "";

    if (document.cookie.length > 0) {

    offset = document.cookie.indexOf(search)

    if (offset != -1) {

    offset += search.length

    end = document.cookie.indexOf(";", offset);

    if (end == -1) end = document.cookie.length;

    returnvalue=unescape(document.cookie.substring(offset, end))

    }

    }

    return returnvalue;

    }



    function getselectedItem(){

    if (get_cookie(window.location.pathname) != ""){

    selectedItem=get_cookie(window.location.pathname)

    return selectedItem

    }

    else

    return ""

    }



    function saveswitchstate(){

    var inc=0, selectedItem=""

    while (ccollect[inc]){

    if (ccollect[inc].style.display=="block")

    selectedItem+=ccollect[inc].id+"|"

    inc++

    }



    document.cookie=window.location.pathname+"="+selectedItem

    }



    function do_onload(){

    uniqueidn=window.location.pathname+"firsttimeload"

    getElementbyClass("switchcontent")

    if (enablepersist=="on" && typeof ccollect!="undefined"){

    document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"

    firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load

    if (!firsttimeload)

    revivecontent()

    }

    }





    if (window.addEventListener)

    window.addEventListener("load", do_onload, false)

    else if (window.attachEvent)

    window.attachEvent("onload", do_onload)

    else if (document.getElementById)

    window.onload=do_onload



    if (enablepersist=="on" && document.getElementById)

    window.onunload=saveswitchstate



    </script>
    ------------------------------------------------------------------------------





    put this wherever you want the collapsable goody in the body:



    <h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">content</h3>

    <div id="sc1" class="switchcontent">

    content is really cool

    </div>



    BTW, this code was put together by a user of my site using the username of Ihavethespeed. He is a master of code (or he says, lol)



    one more btw, that smily is a colon and "p"
    ×

    Success!

    Help @tomyknoker spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...