Animierte Klappnavigation - Responsive Webdesign

[pixel06]

Ich arbeite gerade an einer Navigation die über Media Querie und JS bei kleineren Displays ein und ausklappen. Das funktioniert soweit ganz gut, auch dank der Anleitung von Florence Maurice (hervorragende Trainerin übrigens), jetzt möchte ich das ganze etwas animieren, so das es wie bei einer Transition raus- und rein gleitet.

Mit Transition bekomme ich es im Moment noch nicht so hin, bei einer älteren JS Lösung habe ich das über 'slow' und jQuery gelöst, nur gefällt mir nicht das falls JS deaktiviert ist, das Menue nicht zu sehen ist.

function menue(){

    $( "#openDiv" ).click(function() {
    $( "#navDiv" ).slideToggle( "slow", function() {
    });
    });
    }

In dem Script an dem ich gerade bastle, funktioniert soweit alles, auch wenn JD deaktiviert ist,
nur könnte das Menü schöner raus fahren...

Hat jemand eine Idee, hier mal mein aktuelles Script:

(function ()                   {   
//Klasse in html hinzufügen lassen, die markiert, dass JavaScript aktiviert wird

document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + 'js';
function naviklapp(navid){

//Elemente definieren: Navigationselement, Button, Menue
    var nav = document.getElementById(navid);
    var button;
    var menu;
   
// Wenn keine Navigation, dann ignorieren

if ( ! nav )
return;

//der  Button ist das erste h3 Element innerhalb der Navigation

button = nav.getElementsByTagName( 'h3' )[0];

// die erste ungeordnete Liste in der Navigation ist das Menü
   
menu = nav.getElementsByTagName( 'ul' )[0];   

if ( ! button )
return;   

if ( ! menu || ! menu.childNodes.length )    {
   
    button.style.display = 'none';
    return;   
   
}

button.onclick = function(){
   
if ( -1 != button.className.indexOf( 'toggled-on' )){
   
   
    button.className = button.className.replace( 'toggled-on', '' );
    menu.className = menu.className.replace( 'toggled-on', '' );
} else {
   
button.className += ' toggled-on';
  menu.className += ' toggled-on';   
   
}   
};
}
naviklapp('navi');   
   
} ) ();;

 

[pixel06]

Man kann seinen eigenen Beitrag anscheinend gar nicht nachträglich editieren, oder? Egal, dann schreibe ich hierzu eine kleine Antwort/Ergänzung
Ich habe das Script jetzt doch verworfen, außer den ersten Codeschnipsel

document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + 'js';

Hier überschreibt diese Anweisung eine Klasse im HTML und tauscht die CSS Klasse in ' JS' . Damit lässt sich recht
gut mit CSS eingreifen und z.B. etwas aus- und einblenden.

Kombiniert mit einer jQuery Anweisung konnte ich es so anlegen, dass meine Navigation auch ohne Javascript verwendbar ist. Dieser gleitende Effekt beim öffnen
wird durch meine eigene JS Anweisung* umgesetzt. Ich denke damit hat sich meine Anfrage hier erledigt.

* Der JS Code wurde oben schon dargestellt.

 

[SpiceLab]

Man kann seinen eigenen Beitrag anscheinend gar nicht nachträglich editieren, oder?

Doch, das kann man über den Link "Bearbeiten" unterhalb des Beitrags.