Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

rolmenu (2)

Stefan14 - 12/07/2007 00:41

PHP gevorderde

Ik heb nu na veel gezoek een oplossing gevonden.

Ik heb de volgende javascript/css code:

php code - Bekijk de code zonder highlighting - Klap code in

                <script type="text/javascript">
  function functie(zap) {
   if (document.getElementById) {
   var abra = document.getElementById(zap).style;
    if (abra.display == "block") {
    abra.display = "none";
    } else {
    abra.display= "block";
   }
   return false;
   } else {
   return true;
  }
  }
</script>
<style type="text/css">
.menu1 {
float: left;
display: none;
width: 250px;
border: 1px solid black;
background-color: #cccccc;
padding: 5px;
font-size: 12px;
}
</style>
            
<script type="text/javascript">
  function functie(zap) {
   if (document.getElementById) {
   var abra = document.getElementById(zap).style;
    if (abra.display == "block") {
    abra.display = "none";
    } else {
    abra.display= "block";
   }
   return false;
   } else {
   return true;
  }
  }
</script>
<style type="text/css">
.menu1 {
float: left;
display: none;
width: 250px;
border: 1px solid black;
background-color: #cccccc;
padding: 5px;
font-size: 12px;
}
</style>
 

en de volgende html:

php code - Bekijk de code zonder highlighting - Klap code in

                <a href="#" onmouseover="return functie('menu1');" onmouseout="return functie('menu1');">menu</a>
	<div onmouseover="return functie('menu1');" onmouseout="return functie('menu1')" id="menu1">
	  <a href="pagina.php">item 1</a><br />
	  <a href="pagina.php">item 2</a>	
	</div>
            
<a href="#" onmouseover="return functie('menu1');" onmouseout="return functie('menu1');">menu</a>
	<div onmouseover="return functie('menu1');" onmouseout="return functie('menu1')" id="menu1">
	  <a href="pagina.php">item 1</a><br />
	  <a href="pagina.php">item 2</a>	
	</div>
 

Dit werkt prima, maar nu zou ik nog graag willen dat het menu wat uitklapt \'over\' de bestaande pagina heen komt. Ik neem aan dat dit met float moet oid? maar hoe?
Dus de tekst onder dat menu moet dan zeg maar niet meer zichtbaar zijn totdat dat menu weer verdwijnt, een soort van tweede laag waar hij dan op verschijnt.

3 antwoorden

Gesponsorde links

Ibrahim - 12/07/2007 00:47
PHP expert		ik hoop maar dat ik de juiste topicstarter heb ? probleem met escapen is opgelost

Stijn - 12/07/2007 03:10
PHP expert		Voeg aan .menu1 volgende toe: css code - Bekijk de code zonder highlighting - Klap code in z-index: 999; z-index: 999; Zo zal hij boven alles komen te staan. Ik neem 999 zodat ik zeker ben dat hij boven alle tekst komt.

Stefan14 - 12/07/2007 12:25 (laatste wijziging 13/07/2007 12:39)

PHP gevorderde

@stijn: zojuist geprobeer, maar het blijft gewoon hetzelfde.

Daarnaast heb ik ook nog de volgende problemen:
-alles is standaard uitgeklapt, ik wil juist alles standaard ingeklapt.

- Ik wil de div's graag 154 pixels breed, kijk namelijk hier maar (hij is nog lang niet af), dan zul je zien dat deze nog te smal zijn, dingen als width: 100% en width: 154px; helpen niet.

- De menu's moeten automatisch terugklappen zodra je de muis eraf haalt, dat is nu niet het geval, je kunt bij wijze van spreken alle menu's uitklappen, maar dat wil ik niet, zodra je de muis eraf haalt moet hij ook gelijk weer weggaan.

- en als laatste punt is het zo dat wanneer een item uitgeklapt is, als je er rechts naast gaat staan, dan gaat hij heel snel in en uitklappen.

EDIT: nog even de nieuwe codes die momenteel gebruikt worden

php code - Bekijk de code zonder highlighting - Klap code in

<table height="<?php echo($menuhoogte); ?>" valign="top" cellspacing="0" width="<?php echo($knopbreedte); ?>"><tr><td style="border-bottom: 1px solid black; border-left: 1px solid black; border-right: 1px solid black;" onmouseover="showmenu('menu2')" onMouseOut="hidemenu('menu2')" bgcolor="<?php echo($bgcolor); ?>" align="center" valign="top"><a href="?page=instrumentenwijzer" valign="top" onmouseover="return functie('menu2');" onmouseout="return kadabra('menu2');">Muziekinstrumenten</a></td></tr></table>
			<div onmouseover="return functie('menu2');" onmouseout="return functie('menu2')" id="menu2" width="<?php echo($knopbreedte); ?>">
	  		<a href="pagina.php" onmouseover="return functie('menu2');" onmouseout="return functie('menu2')">item 1</a><br />
	  		<a href="pagina.php" onmouseover="return functie('menu2');" onmouseout="return functie('menu2')">item 2</a>	
			</div>

<table height="<?php echo($menuhoogte); ?>" valign="top" cellspacing="0" width="<?php echo($knopbreedte); ?>"><tr><td style="border-bottom: 1px solid black; border-left: 1px solid black; border-right: 1px solid black;" onmouseover="showmenu('menu2')" onMouseOut="hidemenu('menu2')" bgcolor="<?php echo($bgcolor); ?>" align="center" valign="top"><a href="?page=instrumentenwijzer" valign="top" onmouseover="return functie('menu2');" onmouseout="return kadabra('menu2');">Muziekinstrumenten</a></td></tr></table>
			<div onmouseover="return functie('menu2');" onmouseout="return functie('menu2')" id="menu2" width="<?php echo($knopbreedte); ?>">
	  		<a href="pagina.php" onmouseover="return functie('menu2');" onmouseout="return functie('menu2')">item 1</a><br />
	  		<a href="pagina.php" onmouseover="return functie('menu2');" onmouseout="return functie('menu2')">item 2</a>	
			</div>

php code - Bekijk de code zonder highlighting - Klap code in

                .menu2 {
float: left;
display: none;
border: 1px solid black;
background-color: #FFCC00;
padding: 5px;
font-size: 12px;
z-index: 999;
}
            
.menu2 {
float: left;
display: none;
border: 1px solid black;
background-color: #FFCC00;
padding: 5px;
font-size: 12px;
z-index: 999;
}
 

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten