Avatar billede peterbenz Nybegynder
04. november 2006 - 19:55 Der er 2 kommentarer

Fold ud/ind menu

Hejsa Gutter,

Søger noget hjælpe til at lave en fold ud/ind menu til en hjemmeside. Menuen skal være simpel, både at sætte på siden og administrere.
Den skal kunne;

MENU1
undermenu 1
MENU2

Når man trykker på MENU1 skal den folde undermenu1 ud. Når man så trykker på MENU2 skal MENU1 folde sig sammen og en undermenu skal komme under MENU2.

Jeg kan sagtens finde henvisninger til sider hvor der er færdige Javaapplets, men søger en simpel menu og en guide til at integrere den på siden.
(har bemærket at nogle browsere blokere for Java indhold. Kunne man derfor mon finde en alternativ løsning til Java?)

Har nogen mod på at hjælpe mig med projektet kunne det måske foregå over messenger?

På forhånd tak
Avatar billede Slettet bruger
04. november 2006 - 20:06 #1
<!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 venstremenu af rosenving>
<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:#800000;
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:green;}
.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 peterbenz Nybegynder
04. november 2006 - 22:05 #2
Hej Ibtage,

Det ser ud til at menuen virker efter hensigten. Men kunne godt bruge lidt yderligere hjælp. Scriptet melder om fejl når jeg forsøger at fjerne underpunkter fra nogle af menuerne. Det er nemlig ikke alle punkter i min menu der skal kunne folde sig ud/ind.

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
Alle kurser indenfor Microsoft 365 – både til begyndere og øvede.

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