zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Responsives Menü wie bei slideToggle (jQuery) öffnen und schließen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.09.2015, 17:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.10.2006
Beiträge: 16
klaus befindet sich auf einem aufstrebenden Ast
Standard Responsives Menü wie bei slideToggle (jQuery) öffnen und schließen

Ich arbeite gerade an einer Navigation die über Media Queries und JS bei kleineren Displays ein- und ausklappt. Das funktioniert soweit ganz gut, jetzt möchte ich das ganze etwas weicher öffnen und schließen lassen - ähnlich wie bei einer Transition.

Genau hier komme ich nicht weiter, ich finde bisher keine Lösung wie ich im JavaScript das Menü etwas weicher öffnen und schließen kann.

Früher hatte ich das mit jQuery gelöst, über 'fadeOut' so wie unten dargestellt:
Code:
$('#button').click(function() {
		$( "#menue" ).fadeOut( "slow", function() {		
		
		});
		});
Ich möchte das jetzt etwas nutzerfreundlicher auslegen, so das es auch ohne Javascript zugänglich ist.


Das aktuelles Script habe ich nach ein Tutorial entwickelt:
Code:
(function ()                   {  
//CSS Klasse in html hinzufügen, die markiert, dass JavaScript aktiviert ist
 
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + 'js';
function naviklapp(navid){
 
//Elemente definieren: Navigationselement, Button, Menü
    var nav = document.getElementById(navid);
    var button;
    var menu;
   
// Wenn keine Navigation, dann ignorieren
 
if ( ! nav )
return;
 
//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');  
   
} ) ();;
Also als normales Ausklappmenü funktioniert das gut, auch ohne Javascript
(dann wird ein einfaches Listenmenü angeboten) jetzt würde ich es gerne
weicher aufklappen lassen.

Hat jemand eine Idee, ob das innerhalb des JavaSript lösbar ist oder ob das
nur über jQuery geht?

Klaus
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.09.2015, 01:35
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

jQuery IST JavaScript. Also ja, es geht mit JavaScript.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.09.2015, 09:54
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von klaus Beitrag anzeigen
Ich möchte das jetzt etwas nutzerfreundlicher auslegen, so das es auch ohne Javascript zugänglich ist.
Dann müsstest du das ganze mittels CSS umsetzen. Das geht mit CSS3 auch. CSS transition ? Einfache Animationen | mediaevent.de
Mit Zitat antworten
  #4 (permalink)  
Alt 15.09.2015, 22:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.10.2006
Beiträge: 16
klaus befindet sich auf einem aufstrebenden Ast
Standard

Hallo, danke für eure Antworten.

Zitat:
jQuery IST JavaScript
Ja ich weiß, ich möchte nur sparsam mit jQuery umgehen und ein eigenes Script erschien mir eine Möglichkeit. jQuery ist trotz Komprimierung ja doch oft recht kompakt..
Ich verwende jetzt doch eine Kombination aus jQuery, HTML und CSS3 und konnte mein Problem jetzt gut lösen.

Zitat:
Dann müsstest du das ganze mittels CSS umsetzen. Das geht mit CSS3 auch.
Sicher, dass hier abgebildete Script hat ja diese drei miteinander verknüpft (JS mit CSS, HTML5).

Danke nochmals
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Responsives Layout mit fixiertem Menü francish CSS 3 21.04.2015 18:09
jquery beim klick html seite öffnen?! dimo21 Javascript & Ajax 3 21.09.2011 21:20
jQuery slideToggle bei mehreren Datensätzen! steve46 Javascript & Ajax 1 01.08.2011 18:22
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
Ueber PullDown Menue Datei oeffnen chrism Javascript & Ajax 6 27.01.2007 00:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:05 Uhr.