Simpelt hierakisk tree menu, som er søgemaskine venlig?

Sådan en guide ville jeg også gerne finde !-)

Pillede lidt tidligere i år i een, som var skabt af en af de mere kendte javascriptere herinde, og jeg kan da afsløre, at du skal rigtig langt ud i noget særdeles kompliceret kode, og tage højde for utallige små detaljer ...

-- den var baseret på et objekt, hvilket nok også er vejen frem, selv når der principielt kun er een på en side !o]

Det her er hvad jeg har fået lavet indtil nu:



<script type="text/javascript">
function toggleDiv(divName) {
    var thisDiv = document.getElementById(divName);
    if (thisDiv) thisDiv.style.display = !thisDiv.offsetWidth ? "block" :"none";
    else alert("Error: Could not locate div with id: " + divName);
}
</script>


<a href="#menu1" onclick="java script:toggleDiv('menu1');">Menu 1</a>
<div id="menu1" name="menu1">
</div>


<a href="#menu2" onclick="java script:toggleDiv('menu2');">Menu 2</a>
<div id="menu2" name="menu2">

    <a href="#menu21" onclick="java script:toggleDiv('menu21');"> - - Menu 2.1</a>
    <div id="menu21" name="menu21"></div>
   
    <a href="#menu22" onclick="java script:toggleDiv('menu22');"> - - Menu 2.2</a>
    <div id="menu22" name="menu22">
   
        <a href="#menu221" onclick="java script:toggleDiv('menu221');"> - - - - Menu 2.2.1</a>
        <div id="menu221" name="menu221"></div>
       
        <a href="#menu222" onclick="java script:toggleDiv('menu222');"> - - - - Menu 2.2.2</a>
        <div id="menu222" name="menu222"></div>
       
    </div>
   
    <a href="#menu23" onclick="java script:toggleDiv('menu23');"> - - Menu 2.3</a>
    <div id="menu23" name="menu23"></div>
</div>

<a href="#menu3" onclick="java script:toggleDiv('menu3');"> - Menu 3</a>
<div id="menu3" name="menu3"></div>

Endnu bedre:

<script type="text/javascript">
function toggleDiv(divName) {
    var thisDiv = document.getElementById(divName);
    if (thisDiv) thisDiv.style.display = !thisDiv.offsetWidth ? "block" :"none";
    else alert("Error: Could not locate div with id: " + divName);
}
</script>

<ul>
    <li><a href="java script:void(0)" onclick="java script:toggleDiv('menu1');">Menu 1</a></li>
        <ul id="menu1">
       
            <li><a href="java script:void(0)" onclick="java script:toggleDiv('menu11');">Menu 1.1</a></li>
               
                <ul id="menu11">
                    <li>Menu 1.1.1</li>
                    <li>Menu 1.1.2</li>
                </ul>
               
            <li>Menu 1.2</li>
        </ul>
       
    <li>Menu 2</li>
        <ul id="menu2"></ul>
       
    <li><a href="java script:void(0)" onclick="java script:toggleDiv('menu3');">Menu 3</a></li>
        <ul id="menu3">
            <li>Menu 3.1</li>
            <li>Menu 3.2</li>
        </ul>
</ul>

Det eneste problem er det der med at gemme som cookie :(

Hvad med sådan her:

<SCRIPT type="text/javascript">
<!--
function menu(submenu){
  menus=document.getElementById('submenu_'+submenu);
  menus.style.display=(menus.style.display=='none')?'block':'none';
}
-->
</SCRIPT>

<a style="cursor:pointer;cursor:hand;" onClick="menu('1');">Hovedmenu</a>
<div id="submenu_1" style="position:absolute;display:none;top:0px;left:0px;position:relative">
+ Underpunkt 1 <br>
+ Underpunkt 2 <br>
+ Underpunkt 3
</div>

<BR>

<a style="cursor:pointer;cursor:hand;" onClick="menu('2');">Hovedmenu</a>
<div id="submenu_2" style="position:absolute;display:none;top:0px;left:0px;position:relative">
+ Underpunkt 1 <br>
+ Underpunkt 2 <br>
+ Underpunkt 3
</div>


Bixede det lige sammen, og det virker fint, og det burde søgemaskiner kunne lege med i.

//Calle

Jo, det virker lige som det jeg selv lavede. Hele mit problem lige nu, er at få lavet så der bliver gemt en cookie, så menuen er den samme efter et side skift.

<ole>

Joo ... det er da en begyndelse ... afhængigt af, hvad den skal kunne og hvordan  :)

Lige et par detaljer:
ostehamster >> Man skal aldrig bruge JavaScript pseudo-protokollen i en event-handler. Den kan til nød bruges i et link's href, men det er yderst sjældent, det er nødvendigt. Sådan bør du nok skrive:
  <li><a href="#" onclick="toggleDiv('menu1');return false">Menu 1</a></li>

clansite.dk >> Fidusen ved at have et link i stedet for et anker-element, er, at du kan lave hoover-effekter på et link - det kan du ikke på et anker  :)

/mvh
</bole>

Lukker...