SlideMenü

[Konda]

Hallo Community :)

ich möchte ein Menü mit Unterpunkten bastel,
allerdings sollen die Unterpunkte nicht einfach plump auftauchen,
sondern es soll 'aufsliden',
aber irgendwo habe ich einen ganz dümmlichen Denkfehler und komme nicht drauf.

Also die Unterpunkte tauchen einfach nicht auf,
wenn ich mit dem Cursor über einen Menüpunkt gehe...
es passiert einfach gar nichts.

Naja, hier mal mein Code:

JavaScript

$(document).ready( function() {
 
 
 
      $(".btn-slide").hover(function(){
        
          $(this).find(".panel").stop().slideToggle(750);
         
      },function () {


             $(this).find(".panel").stop().slideToggle(500);
             
   });
    
    
});

HTML

<div id="menu_box">
            
            <div id="NaviLinks">
            
                <ul>
                    <li><a href="#">Seite 1</a></li>
                    <li class="btn-slide"><a href="#">Seite 2</a>
                      <ul class="panel">
                        <li>
                          <a href="#">Seite 21.</a>
                        </li>
                        <li>
                          <a href="#">Seite 2.2</a>                
                        </li>
                        <li>
                          <a href="#">Seite 2.3</a>
                        </li>
                        <li>
                          <a href="#">Seite 2.4</a>
                        </li>
                      </ul>
                    </li>
                    <li class="btn-slide"><a href="#">Seite 3</a>
                      <ul class="panel">
                        <li>
                          <a href="#">Seite 3.1</a>
                        </li>
                        <li>
                          <a href="#">Seite 3.2</a>
                        </li>
                        <li>
                         <a href="#">Seite 3.3</a>
                        </li>
                      </ul>
                    </li>
                    <li><a href="#">Seite 4</a></li>
                </ul>
                        
            </div>
            
            <div id="NaviRechts">
            </div>    
        
        </div>

CSS

#menu_box{
    margin: 15px 0px;
    height: 29px;    
    float:left;
    position:relative;
    left:50%;
    


    border: 1px solid green;
    
}


#NaviLinks {
    background: transparent url(bilder/menu_links.png) top left no-repeat;
    height: 24px;
    float: left;
    color: white;
    position:relative;
    right:50%;
    padding: 5px 5px 0px 16px;


    
}
#NaviRechts {
    background: transparent url(bilder/menue_rechts.png) top left no-repeat;
    height: 29px;
    width: 12px;
    float: left;
    
     position:relative;
   right:50%;
}    

​#menu_box ul {margin-left: 42px;
}


#menu_box li {
    list-style: none;
    float: left;
    margin: auto 42px auto 0px;
}


#menu_box li ul {
    padding: 0px 15px 15px 15px;
    position: absolute;
    top: 31px;
    display: none;
    background: transparent url(Bilder/Navi.png) top right repeat;
}

Ich bedanke mich schon einmal :)

Grüße
Konda

 

[Konda]

Mhh... Kann mir keiner helfen? :/

 

[Trüffelkrieger]

Warum willst du das mit JS machen und nicht mit CSS3?
Wenn du vorgehst wie hier: http://blog.webdesign-florian-brinkmann.de/2012/06/24/dropdown-menu-mit-css3.html
Aber die Unterpunkte nicht durch visibility:hidden versteckst, sondern durch eine absolute Positionierung hinter der Navigation, dann "fährt" es beim hover auch ein.

 

[Konda]

Dankeschön ;-)
Es ist zwar mit dem IE nicht ganz so 100% kompatibel,
aber klappt trotzdem auf Umwegen, danke ;)