Beste SD-ers,

me Jquery heb ik me eigenlijk nog nooit bezig gehouden en dacht daarom het wel eens te kunnen gaan proberen voor een eigen projectje. Gewoon om wat te proberen.

Nu loop ik echter tegen een probleem aan, want ik wil d.m.v. Jquery dus een sub menu maken, echter wordt deze achter de onder geplaatste content weergegeven oftewel, het sub menu is niet zichtbaar.

Ik heb heel simpel gedacht, misschien wel te simpel. Heeft iemand enige aanwijzingen voor mij, hoe ik dit kan oplossen? Het "werkende" exemplaar is te vinden via de volgende link: http://tinyurl.com/269f7jz

Hieronder de gebruikte code:

PHP Code:

Html

                                 <!-- Menu in the header -->
                                 <div id="menu">
                                 
                                      <menu>
                                          <li><a href="" title="Home">Home</a></li>
                                          <li>Het Hotel
                                                 <ul>
                                                     <li><a href="#" title="Over het hotel">Over het hotel</a></li>
                                                     <li><a href="#" title="Hotelkamer">Hotelkamer</a></li>
                                                     <li><a href="#" title="Hotelsuite">Hotelsuite</a></li>
                                                     <li><a href="#" title="Restaurant">Restaurant</a></li>
                                                 </ul>
                                          </li>
                                          <li><a href="" title="Boeken">Boeken</a></li>
                                          <li>Aanbieding
                                                 <ul>
                                                      <li><a href="#" title="Actie">Actie</a></li>
                                                      <li><a href="#" title="Lastminutes">Lastminutes</a></li>
                                                 </ul>
                                          </li>
                                          <li>Oostenrijk
                                                 <ul>
                                                      <li><a href="#" title="Over Oostenrijk">Over Oostenrijk</a></li>
                                                      <li><a href="#" title="Activiteiten">Activiteiten</a></li>
                                                      <li><a href="#" title="Wintersport">Wintersport</a></li>
                                                      <li><a href="#" title="Route">Route</a></li>
                                                 </ul>
                                          </li>
                                          <li><a href="" title="Kerkdiensten">Kerkdiensten</a></li>
                                          <li>Actueel
                                                 <ul>
                                                      <li><a href="#" title="Gastenboek">Gastenboek</a></li>
                                                      <li><a href="#" title="Weer">Weer</a></li>
                                                      <li><a href="#" title="Webcam">Webcam</a></li>
                                                 </ul>
                                          </li>
                                      </menu>
          
                                 </div> 


PHP Code:

Jquery

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#menu li").mouseenter(function(){
           $("#menu li ul").slideDown(300);
  });

  $("#menu").mouseleave(function(){
           $("#menu li ul").slideUp(300);
  });
  
});
</script> 


Als iemand mij hierbij kan helpen, zou dit top zijn. Even nog voor de duidelijkheid: Op de bijgevoegde link zie je het menu dus wel, maar wanneer de content op zijn eigenlijke plaats wordt gezet (onder het menu), dan is het submenu niet meer zichtbaar.

Stefan

Origineel gepost door gast8208

Het "werkende" exemplaar is te vinden via de volgende link: http://tinyurl.com/269f7jz

Forbidden
You don't have permission to access /nederlands/ on this server.

Excuses, verkeerde link.

Dit is de goede: http://tinyurl.com/25ckcj6

Origineel gepost door gast8208

Excuses, verkeerde link.

Dit is de goede: http://tinyurl.com/25ckcj6

Tip: Kijk eens naar het gebruik van $(this) . Je moet wel verwijzen naar het element waar je met je muis over heen gaat. Anders klappen, net als in jouw voorbeeld, alle menu's uit.

<div id="menu">

in plaats van <menu>

@Arjen: Dit is bekend en ook de bedoeling. Idee er achter was dat het op die manier overzichtelijker werd.
@Harings Rob: Is gebruikt, <menu> is een aanduiding van HTML5: http://tinyurl.com/23r5bgc

Hier een link met het duidelijke probleem: http://tinyurl.com/25ckcj6 . Zoals je ziet, zie je hier niets gebeuren, wanneer je met de muis over het menu gaat. En dit terwijl er wel degelijk wordt gezegd dat het submenu zichtbaar moet worden.

Edit: @Harings Rob: ik snap verwarring, begin post aangepast. Ik had het stukje weggelaten.

Ow wacht nu zie ik het probleem denk ik. ik gebruik een gelijkaardig menu en bij mij wordt deze geopend met

<ul class="menu">

Hoop dat het helpt.

@Harings Rob: ik zal eens kijken of het werkt. Moment

Edit: Dit is het probleem niet bedacht ik me net. Want als de content 120px naar beneden wordt geplaatst dan wordt het submenu wel weergegeven. Het gaat er dus om dat het submenu niet wordt weergegeven maar achter de content verdwijnt.

Wanneer je dus de content naar beneden haalt, dan werkt het perfect. Ik denk dat het hem in de Jquery zit, maar ben er niet zeker van.

EDIT:

Op deze manier: http://tinyurl.com/25ckcj6
Zo moet het eruit zien, maar dan werkt het menu niet, het submenu verdwijnt dan achter de content.

Op deze manier: http://tinyurl.com/2fa7j2l
Werkt het echter wel, alleen ja, die content moet naar boven worden geplaatst.

Komt je submenu dan niet gewoon onder je content door? staat je positie van je list item goed?

#menu ul.menu li {
display: inline-block;
height: 57px;
position: relative;
}

#menu ul.menu li div {
position: absolute;
top: 55px;
left: 0px;
}

#menu ul.menu li div div {
position: absolute;
top: -6px;
left: 176px;
}

Waarom doe je het niet gewoon met html+css?
Nergens Jquery voor nodig..
Heb nu zelf even geen voorbeeldje of een linkje, maar het kan prima met puur html en css.
Tenzij je echt zo'n effect wilt hebben dat hij langzaam open rolt o.i.d. maar anders kune je gewoon met html en css zo'n menu maken.

Als je het content weer op de oorspronkelijke plek neer zet (dus tegen het menu aan) en in het css stukje van het sub-menu een z-index: 500; mee geeft komt die waarschijnlijk wel boven het content (dus over je content) te staan.

Oplossing gevonden! Ik was een stukje vergeten. Ik was de eerste inleidende <ul> vergeten, waardoor het er niet netjes uit zag en ook niet goed werd ingelezen.

Het menu werkt nu en dit ook door middel van Jquery.

Bedankt voor alle geboden hulp.

ik zou stop().slideDown(300); en stop().slideUp(300); gebruiken, moet je nu maar eens als een bezetene over je knoppen gaan met je muis, dan heb je een uur later nog steeds op en neer bewegende submenu's ;-)

@Martijn: Dankje, ga het eens toepassen! (was het inderdaad ook al tegen gekomen, maar geen idee hoe ik ook dat moest oplossen =))

Bedankt voor de tip!

EDIT: Hmm als ik het toepas, dan blijft een deel van het menu onzichtbaar wanneer ik er weer op ga staan. Heb het ook op deze manier geprobeerd:

.stop().slideUp
.slideDown()

Echter dan heb je het probleem dat wanneer je net weer terug gaat als het menu bijna helemaal omhoog is, dat het menu helemaal niet meer uitklapt :)
Bedankt voor de tip, maar hou het dan denk ik toch zo dat je hele tijd er overheen kan. Of iemand moet betere tip hebben?

Code:

$("#menu")
    .mouseenter(function(){
        $(this).find('li ul:not(:animated)').stop().slideDown(300);
    }).mouseleave(function(){
        $(this).find('li ul:not(:animated)').slideUp(300);
    });

de mouseover bij op het volledige menu zetten (immers, je wilt dat het volledig expand).
dit werkt al iets beter maar is niet foul proof, heb niet heel veel tijd om er naar te kijken nu ^_^