Avatar billede wiper Nybegynder
07. december 2005 - 20:00 Der er 12 kommentarer og
1 løsning

Faneblads menu

Hej

jeg søger en (javascript) menu der f.eks. har 5 faneblade og ved mouseover på faneblad 1 vises en ny række faneblade uder denne (Horisontalt).

Ved mouse over på fane 2 lukkes fane 1's undermenu - og fane 2's undermenu vises som en ny række faneblade under denne (horisontalt)

Fane1            Fane2
1-1  1-2  1-3      2-1  2-2  2-3 

osv osv.

er det noget i kan hjælpe med ?
Avatar billede wiper Nybegynder
08. december 2005 - 06:11 #2
perfekt ... 2'eren var lige i øjet... ;0)

lav lige et svar
Avatar billede wiper Nybegynder
08. december 2005 - 06:33 #3
ahh..næsten perfekt..

valgte 2'eren - men baggrunden følger ikke med forstået på den måde at når jeg hover over menu 1 så skal faneblad 1 have samme baggrund som undermenuen...hmmm..
Avatar billede psykochicken Nybegynder
08. december 2005 - 13:18 #4
Du kunne prøve noget ala:
<!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->
<a href="http://www.javascriptkit.com" id="a0" onMouseover="showit(0);col(this);">JavaScript Kit</a> | <a href="http://freewarejava.com" id="a1" onMouseover="showit(1);col(this);">Freewarejava</a><br>

<!-- Edit the dimensions of the below, plus background color-->
<ilayer width=400 height=32 name="dep1" bgColor="#E6E6FF">
<layer name="dep2" width=400 height=32>
</layer>
</ilayer>
<div id="describe" style="background-color:#E6E6FF;width:400px;height:32px" onMouseover="clear_delayhide()" onMouseout="resetit(this,event)"></div>


<script type="text/javascript" language="JavaScript1.2">

/*
Tabs Menu (mouseover)- By Dynamic Drive
For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
This credit MUST stay intact for use
*/

var submenu=new Array()

//Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors.

submenu[0]='<font size="2" face="Verdana"><b><a href="http://www.javascriptkit.com/cutpastejava.shtml">Scripts</a> | <a href="http://www.javascriptkit.com/javaindex.shtml">JS tutorials</a> | <a href="http://www.javascriptkit.com/javatutors/index.shtml">Advanced JS tutorials</a> | <a href="http://www.javascriptkit.com/java/">Applets</a> | <a href="http://www.javascriptkit.com/howto/">Web Tutorials</a></b></font>'

submenu[1]='<font size="2" face="Verdana"><b><a href="http://freewarejava.com/applets/index.shtml">Applets</a> | <a href="http://freewarejava.com/tutorials/index.shtml">Tutorials</a> | <a href="http://freewarejava.com/javasites/index.shtml">Sites and Zines</a> | <a href="http://freewarejava.com/jsp/index.shtml">JSP</a></b></font>'

//Set delay before submenu disappears after mouse moves out of it (in milliseconds)
var delay_hide=500

/////No need to edit beyond here

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which){
clear_delayhide()
thecontent=(which==-1)? "" : submenu[which]
  if (document.getElementById||document.all){
    menuobj.innerHTML=thecontent;
  }
  else if (document.layers){
    menuobj.document.write(thecontent)
    menuobj.document.close()
  }
}
function col(elm){
  for(i=0;i<2;i++){
    document.getElementById('a' + i).style.backgroundColor="";
  }
  elm.style.backgroundColor="#E6E6FF";
}

function noColor(){
  for(i=0;i<2;i++){
    document.getElementById('a' + i).style.backgroundColor="";
  }
}

function resetit(elm,e){
  if (document.all&&!menuobj.contains(e.toElement)){
    delayhide=setTimeout("showit(-1);noColor()",delay_hide);
  }
  else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)){
    delayhide=setTimeout("showit(-1);noColor()",delay_hide);
  }
}


function clear_delayhide(){
if (window.delayhide){
clearTimeout(delayhide);
}
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

</script>

/psc
Avatar billede wiper Nybegynder
09. december 2005 - 00:14 #5
allmost there...;0)

hvordan får jeg den til at åbne ligeunder det enkelte faneblad...f.eks. hvis fane 3 vælges skal det være under 3 og ikke helt til venstre at subfanerne vises
Avatar billede wiper Nybegynder
09. december 2005 - 00:21 #6
markeringen forsvinder ikke på fane 1, når fane 2 vælges...
Avatar billede psykochicken Nybegynder
09. december 2005 - 00:28 #7
ved at tilføje en afstand fra div-ens venstrekant på submenuerne ex:

submenu[1]='<font style="position:relative;left:100px;" size="2" face="Verdana">...osv

så skal submenuerne bare justeres til, så de passer til menupunkterne.

/psc
Avatar billede psykochicken Nybegynder
09. december 2005 - 00:36 #8
>> 09/12-2005 00:21:56 - vis din kode, eller smid et link.
Avatar billede wiper Nybegynder
09. december 2005 - 00:50 #9
<!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->
<a href="http://domaene.dk/sub.asp" id="a0" onMouseover="showit(0);col(this);">Link 1</a> |
<a href="http://domaene.dk/sub.asp" id="a1" onMouseover="showit(1);col(this);">Link 2</a> |
<a href="http://domaene.dk/sub.asp" id="a2" onMouseover="showit(2);col(this);">Link 3</a> |
       

<!-- Edit the dimensions of the below, plus background color-->
<ilayer width=968 height=32 name="dep1" bgColor="#E6E6FF">
<layer name="dep2" width=968 height=32>
</layer>
</ilayer>
<div id="describe" style="background-color:#E6E6FF;width:400px;height:32px" onMouseover="clear_delayhide()" onMouseout="resetit(this,event)"></div>

<font style="position:relative;left:100px;" size="2" face="Verdana">
<script type="text/javascript" language="JavaScript1.2">

var submenu=new Array()

//Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors.
submenu[0]='<font size="2" style="position:relative;left:0px;" face="Verdana"><i><b><a href="http://dom.dk/sub.asp">Next item 1</a> | <a href="http://dom.dk/sub.asp">Next item 2</a> | <a href="http://dom.dk/sub.asp">Next item 3</a>

submenu[1]='<font size="2" style="position:relative;left:50px;" face="Verdana"><i><b><a href="http://dom.dk/sub.asp">Next item 1</a> | <a href="http://dom.dk/sub.asp">Next item 2</a> | <a href="http://dom.dk/sub.asp">Next item 3</a>

submenu[2]='<font size="2" style="position:relative;left:100px;" face="Verdana"><i><b><a href="http://www.dom.dk/subsub.asp">Next item 1</a>


//Set delay before submenu disappears after mouse moves out of it (in milliseconds)
var delay_hide=500

/////No need to edit beyond here

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which){
clear_delayhide()
thecontent=(which==-1)? "" : submenu[which]
  if (document.getElementById||document.all){
    menuobj.innerHTML=thecontent;
  }
  else if (document.layers){
    menuobj.document.write(thecontent)
    menuobj.document.close()
  }
}
function col(elm){
  for(i=0;i<2;i++){
    document.getElementById('a' + i).style.backgroundColor="";
  }
  elm.style.backgroundColor="#E6E6FF";
}

function noColor(){
  for(i=0;i<2;i++){
    document.getElementById('a' + i).style.backgroundColor="";
  }
}

function resetit(elm,e){
  if (document.all&&!menuobj.contains(e.toElement)){
    delayhide=setTimeout("showit(-1);noColor()",delay_hide);
  }
  else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)){
    delayhide=setTimeout("showit(-1);noColor()",delay_hide);
  }
}


function clear_delayhide(){
if (window.delayhide){
clearTimeout(delayhide);
}
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

</script>
Avatar billede wiper Nybegynder
09. december 2005 - 01:02 #10
har fikset den ...smider du et svar ?

og tak for hjælpen ..;0)
Avatar billede psykochicken Nybegynder
09. december 2005 - 01:03 #11
Du mangler en ' til at afslutte dine submenu[0]='.......'

og i nedenstående funktioner skal i<3, da den skal svare til antallet af link/faner. Hvis du tilføjer et link/fane, skal tallet forhøjes med 1:
function col(elm){
  for(i=0;i<3;i++){
    document.getElementById('a' + i).style.backgroundColor="";
  }
  elm.style.backgroundColor="#E6E6FF";
}

function noColor(){
  for(i=0;i<3;i++){
    document.getElementById('a' + i).style.backgroundColor="";
  }
}

/psc
Avatar billede psykochicken Nybegynder
09. december 2005 - 01:04 #12
lol - godt du selv fandt fejlen.
Svar kommer her ;o)
Avatar billede psykochicken Nybegynder
09. december 2005 - 01:13 #13
...og tak for point ;o)
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