Avatar billede superflydk Nybegynder
30. marts 2007 - 08:55 Der er 7 kommentarer

Expand/Collapse menu eller Tree menu

Hej alle,

Jeg søger nu igen med lys og lygte efter et stykke programmering. Gerne Javascript, men andre forslag modtages med kyshånd.

Det jeg mangler er egentlig bare en SIMPEL (simpelt design, ikke koden nødvendigvis) menu der har nogle hovedpunkter, som så expander når man trykker på dem, så man kan se underpunkter.

Eksempel:
Vare 1
Vare 2
  Vare 2.1
  Vare 2.2
    Vare 2.2.1
Vare 3
Vare 4

Dem jeg har fundet er Tree-menuer med en farlig masse super grimme grafiske elementer. Alt det skal jeg nok selv lave hvis jeg ville ha' det.

Er det bare mig, eller er nettet proppet med 100% færdige løsninger, og er der virkelig ikke noget for os der gerne bare vil have funktionerne, og selv vil designe det? :-)

Jeg har tildelt spørgsmålet 150 point for at tage højde for at en person der selv skriver koden til mig skal have lidt for sit arbejde. Jeg håber ikke det er ilde set at gå over de obligatoriske 60 for "Svær".
Avatar billede j4k0b Nybegynder
30. marts 2007 - 09:37 #1
ja, nettet er fyldt med dårlig forarbejdet javascript :[
Avatar billede fennec Nybegynder
30. marts 2007 - 09:45 #2
Har du varerne til at ligge i en database eller hvad??
Avatar billede roenving Novice
30. marts 2007 - 11:49 #3
Kig f.eks. på det, der ligger i dette indlæg: http://www.eksperten.dk/spm/485556#rid4489881 !-)
Avatar billede superflydk Nybegynder
02. april 2007 - 15:42 #4
Roenving>> Problemet med det indlæg du linker til, er at den lukker selve "hovedpunktet" ned hvis man klikker på det. Jeg vil gerne have at man bliver ved med at kunne se "Vare 1" selvom man klikker på det, men at der så bare derunder også står "Vare 1.1", "Vare 1.2" osv. osv. - ellers er det lige præcis det jeg ønsker.
Avatar billede roenving Novice
02. april 2007 - 20:52 #5
¿Ikke forstået?
Avatar billede j4k0b Nybegynder
03. april 2007 - 08:27 #6
Du leder efter noget alá Windows Stifinder navigation?
Avatar billede superflydk Nybegynder
11. maj 2007 - 14:11 #7
j4k0b> Præcist - men har allerede fundet noget der virkede (pastet herunder til dem der evt. skal bruge det samme:

I Head-tag'en:

<style type="text/css">
<!--
#containerul, #containerul ul{
  text-align:left;
  margin:0; /* Removes browser default margins applied to the lists. */
  padding:0; /* Removes browser default padding applied to the lists. */
}

#containerul li{
  margin:0 0 0 0px; /* A left margin to indent the list items and give the menu a sense of structure. */
  padding:0; /* Removes browser default padding applied to the list items. */
  list-style-type:none; /* Removes the bullet point that usually goes next to each item in a list. */
}

#containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */
  float:left;
  width:12px;
  height:1em;
  background-position:0 50%;
  background-repeat:no-repeat;
}

-->
</style>
<script type="text/javascript">
<!--
var temp, temp2, cookieArray, cookieArray2, cookieCount;
function initiate(){
  cookieCount=0;
  if(document.cookie){
    cookieArray=document.cookie.split(";");
    cookieArray2=new Array();
    for(i in cookieArray){
      cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
    }
  }
  cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();
  temp=document.getElementById("containerul");
  for(var o=0;o<temp.getElementsByTagName("li").length;o++){
    if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){
      temp2 = document.createElement("span");
      temp2.className = "symbols";
      temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(minus.png)":"url(plus.png)"):"url(plus.png)";
      temp2.onclick=function(){
        showhide(this.parentNode);
        writeCookie();
      }
      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)
      temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";
      if(cookieArray[cookieCount]=="true"){
        showhide(temp.getElementsByTagName("li")[o]);
      }
      cookieCount++;
    }
    else{
      temp2 = document.createElement("span");
      temp2.className = "symbols";
      temp2.style.backgroundImage = "url(page.png)";
      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);
    }
  }
}

function showhide(el){
  el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";
  el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(minus.png)":"url(plus.png)";
}

function writeCookie(){ // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.
  cookieArray=new Array()
  for(var q=0;q<temp.getElementsByTagName("li").length;q++){
    if(temp.getElementsByTagName("li")[q].childNodes.length>0){
      if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){
        cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");
      }
    }
  }
  document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();
}
//-->
</script>



Og så selve menuen i Body-tag'en:

<ul id="containerul">
<li><span class="verdana_9pt_hvid_bold">Hovedmenu</span>
<ul>
<li>
<a href="#">Undermenu 1</a>
</li>
<li>
<a href="#" style="color:#FFFFFF">Undermenu 2</a>
</li>
</ul>
</li>
<script type="text/javascript">initiate();</script>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester