Avatar billede amtoft Novice
22. marts 2004 - 19:31 Der er 20 kommentarer og
1 løsning

Vis / skjul layer på samme position ved klik

Har søgt og forsøgt hvad jeg har kunne søge mig frem til her på E, men har ikke rigtigt fundet det jeg mangler, så jeg håber I kan hjælpe mig lidt her.

Skal lave en menu, som når man klikker (ikke mouseover) på et punkt åbner en undermenu i et layer.
Når man klikker på et andet punkt i hovedmenu'en skal det lukke det første layer og åbne et nyt på samme position.

Hvad jeg ellers har fundet har krævet at man skulle lukke på et andet link, eller fungeret on_mouseover.

Håber en eller anden forstår hvad jeg mener .. ?
Avatar billede skovenborg Nybegynder
22. marts 2004 - 19:37 #1
en meget enkel løsning:
<style type="text/css">
.menu {
      display:none;
      width:300px;
      height:200px;
      background-color:#f00;
}
</style>
<script type="text/javascript">
var activeMenu;
function showMenu(ID) {
      if (activeMenu) activeMenu.style.display = "none";
      activeMenu = document.getElementById(ID);
      activeMenu.style.display = "block";
}
</script>
</head>
<body>
<span onclick="showMenu('menu1');">MENU1</span>
<span onclick="showMenu('menu2');">MENU2</span>
<span onclick="showMenu('menu3');">MENU3</span>
<div id="menu1" class="menu">MENU1</div>
<div id="menu2" class="menu">MENU2</div>
<div id="menu3" class="menu">MENU3</div>
</body>
Avatar billede olebole Juniormester
22. marts 2004 - 19:38 #2
<ole>

Her er masser:
  http://www.dhtmlcentral.com/

/mvh
</bole>
Avatar billede skovenborg Nybegynder
22. marts 2004 - 19:38 #3
...det behøver vel at mærke ikke være span eller div elementer du bruger - bare elementet, der skal vise menuerne har eventen onclick der kalder showMenu() med den rette ID, samt at menuerne har class'en menu og har en id.
Avatar billede roenving Novice
22. marts 2004 - 19:38 #4
Jeg har i hvert fald forstået dig anderledes end skovenborg, jeg kunne desværre ikke finde linket til de andre gange jeg har smidt denne på E*, så hele koden kommer her:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Simpel menu</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/480561">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.menupunkt{font-family:tahoma,verdana,arial,sans-serif;cursor:pointer;color:#9d52be;background:#fff;font-weight:800;font-style:italics;font-size:10px;width:250px;}
.menu{display:none;padding-left:5px;}
.menu a{text-decoration:none;}
.menu a:link{color:black;}
.menu a:visited{color:black;}
.menu a:hover{color:red}
.menu a:active{color:red}

</style>
<script language="javascript" type="text/javascript">
function showMenu(d){
  var id = d.id.substring(5);
  divs = document.getElementsByTagName('DIV');
  for(i=0;divs.length>i;i++){
    if(divs[i].id.indexOf('menu')==0&&divs[i].id!='menu'+id){
      divs[i].style.display='none';
      document.getElementById('o'+divs[i].id+'pic').src = "plus.gif";
    }
  }
  st = document.getElementById('menu'+id).style;
  st.display = (st.display!='block')?'block':'none';
  document.getElementById(d.id+'pic').src = (st.display=='block')?"minus.gif":"plus.gif";
}
</script>
</head>
<body>
<div id="omenu1" class="menupunkt" onclick="showMenu(this);">
<img id="omenu1pic" src="plus.gif" height="10" width="10">
Punkt 1
  <div id="menu1" class="menu" onclick="event.cancelBubble=true">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
<div id="omenu2" class="menupunkt" onclick="showMenu(this);">
<img id="omenu2pic" src="plus.gif" height="10" width="10">
Punkt 2
  <div id="menu2" class="menu" onclick="event.cancelBubble=true">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
<div id="omenu3" class="menupunkt" onclick="showMenu(this);">
<img id="omenu3pic" src="plus.gif" height="10" width="10">
Punkt 3
  <div id="menu3" class="menu" onclick="event.cancelBubble=true">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
<div id="omenu4" class="menupunkt" onclick="showMenu(this);">
<img id="omenu4pic" src="plus.gif" height="10" width="10">
Punkt 4
  <div id="menu4" class="menu" onclick="event.cancelBubble=true">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
<div id="omenu5" class="menupunkt" onclick="showMenu(this);">
<img id="omenu5pic" src="plus.gif" height="10" width="10">
Punkt 5
  <div id="menu5" class="menu" onclick="event.cancelBubble=true">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
</body>
</html>
Avatar billede skovenborg Nybegynder
22. marts 2004 - 19:41 #5
roenving >> Ja, hvis han mente en treemenu - så måske har jeg læst forkert ;-)
Avatar billede amtoft Novice
22. marts 2004 - 19:43 #6
Sidder lige og prøver ... ;)

skovenborg -> du er mest på sporet. Men jeg mangler lidt at cursor bliver til et link, når musen bevæger sig over.

roenving -> undermenu'er dukker jo op nedenunder, og ikke på samme (absolutte) plads hver gang.
Avatar billede roenving Novice
22. marts 2004 - 19:45 #7
Okay, så var skovenborg mest med på hvad du mente !-)

du skal bare style de spans med cursor:pointer;
Avatar billede amtoft Novice
22. marts 2004 - 19:53 #8
Jeps !
Og lige en enkelt ting. Hvis jeg skal lukke menu'en, når jeg fra undermenu'en klikker på et punkt ?
Avatar billede skovenborg Nybegynder
22. marts 2004 - 19:56 #9
tilføj det her et sted i din undermenu:<span onclick="this.parentNode.style.display = 'none';activeMenu=null;">LUK</span>

kan selvfølgelig også været et billede i stedet for en tekst.
Avatar billede amtoft Novice
22. marts 2004 - 19:58 #10
Øh ja.
Men dels er det et "klik" og dels lukker den "hovedmenu'en" og ikke kun undermenu'en.
Beklager hvis jeg formulerede mig uklart.
Avatar billede skovenborg Nybegynder
22. marts 2004 - 19:59 #11
...nåja og for at imødekomme IE5 brugere skal du lige skrive:
style="cursor:pointer;cursor:hand".

Jeg tror nok det var IE5 - det var roenving der en gang gjorde opmærksom på hvad det var for én, men det er lige svipset ud af hukommelsen ;-)
Avatar billede amtoft Novice
22. marts 2004 - 19:59 #12
Jeg havde fået det placeret i hovedmenu- undskyld
Avatar billede skovenborg Nybegynder
22. marts 2004 - 20:06 #13
kan det passe at det du søger er at man skal kunne lukke en undermenu ved at klikke på det samme hovedmenupunkt.

I så fald prøv:
<script type="text/javascript">
var activeMenu;
function showMenu(ID) {
      if (activeMenu) activeMenu.style.display = "none";
      if (activeMenu != (tempMenu = document.getElementById(ID))) {
                tempMenu.style.display = "block";
                activeMenu = tempMenu;
      }
      else activeMenu = null;

}
</script>
Avatar billede skovenborg Nybegynder
22. marts 2004 - 20:09 #14
...den anden luk-knap skulle nemlig placeres _indeni_ undermenuen:
<div id="menu1" class="menu"><span onclick="this.parentNode.style.display = 'none';activeMenu=null;">LUK</span>MENU1</div>

på den måde lukker den kun undermenuen og ikke også hovedmenuen.
Avatar billede amtoft Novice
22. marts 2004 - 20:09 #15
Ja, og nej.

Når man klikker på et punkt i undermenu, skal hele undermenu'en lukke, samtidig med at man bliver ledt til det indhold man klikker på.

Lidt ala: Klik her og 2.html vises, og undermenuen lukkes.
Avatar billede amtoft Novice
22. marts 2004 - 20:14 #16
Det med at lukke undermenuen ved at klikke på hovedmnu-punktet igen, kan jeg også sagtens bruge, så det er bare "guf" med lidt ekstra oveni.
Avatar billede skovenborg Nybegynder
22. marts 2004 - 20:15 #17
nåå, jamen så skal du jo bare skrive:
<a href="2.html" target="framenavn" onclick="this.parentNode.style.display = 'none';activeMenu=null;">Klik her</a>

(jeg regner selvfølgelig med at du enten vil åbne linksene i et nyt vindue eller en anden frame - ellers giver det jo ikke meget mening).
Avatar billede amtoft Novice
22. marts 2004 - 20:22 #18
Helt korrekt.
Her er helt sikkert (-nå ja ved jo selvfølgelig aldrig :) materiale nok til at jeg kan komme videre.
Tak for hurtig og god respons.
Smid et svar, hvis du vil have lidt pointoverførsel.
Avatar billede skovenborg Nybegynder
22. marts 2004 - 20:34 #19
okay - værsgo' :-)
Avatar billede skovenborg Nybegynder
22. marts 2004 - 20:41 #20
- og tak for points :-)
Avatar billede amtoft Novice
22. marts 2004 - 20:42 #21
- velbekom, og selv tak ;-)
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