Off-Canvas Menü per wischen öffnen

TRF · 25. August 2017

Hallo,

ich habe eine kleine für Mobilgeräte optimierte Seite gebaut, diese ist aktuell komplett frei von JS (um volle Funktionalität auch bei deaktiviertem JS zu gewährleisten).

In dieser verwende ich ein Off-Canvas Menü, vollständig realisiert per CSS. Per grafischen Button ergibt sich somit der nette Slide-In Effekt.

Nun würde ich gern on Top per Javascript realisieren, dass besagtes Menü auch per wischen von links nach rechts geöffnet und von rechts nach links geschlossen wird.

Die jetzige Funktionalität soll erhalten bleiben, die Wischfunktion eben nur zusätzlich gegeben sein.

Ist dies grundsätzlich möglich? Wenn ja... wie?

Leider bin ich in Javascript nicht allzu bewandert (Ich kanns gut lesen, selbst die Syntax schreiben ist aber problematisch)

Ich bin für jeden Hilfe dankbar

JR Cologne · 25. August 2017

Für Touch-Gesten kannst du dir mal Folgendes anschauen: http://hammerjs.github.io/

TRF · 25. August 2017

Danke, werd ich mir mal anschauen. Bleibt aber die grundsätzliche Frage, ob dies überhaupt per Javascript einfach so nachgerüstet werden kann, dass bei deaktiviertem JS die Funktionalität genau so gegeben ist, wie es jetzt der Fall ist. Kann mir das wer sagen?

JR Cologne · 25. August 2017

Ja, das ist möglich. Deine Steuerung der Nav mit JS sollte eigentlich nicht in die CSS-Lösung eingreifen.

Falls doch, bräuchten wir dann nähere Details, sprich Code und Co.

TRF · 31. August 2017

Also ich bekomm es aktuell nicht so richtig hin.

Ich hab mir Hammer.js angeschaut, hier bin ich bisher noch gar nicht durchgestiegen. Ich hab zwar schon ein paar kleine Erfahrungen mit Javascript, jedoch ist die gesamte Gestensteuerung komplettes Neuland für mich.

Hier einmal der Code meiner HTML (Links und Inhalt mal ersetzt durch Dummies)

Code

<body id="openNav">

    <div id="navMain" class="navMain"> 
             <ul>
            <li><a href="Link1.html">Link 1</a><hr /></li>
            <li><a href="Link2.html">Link 2</a><hr /></li>
            <li><a href="Link3.html">Link 3</a><hr /></li>
            <li><a href="Link4.html">Link 4</a><hr /></li>
            <li><a href="Link5.html">Link 5</a><hr /></li>
            <li><a href="Link6.html">Link 6</a><hr /></li>
        </ul>
    </div>

      <div id="content">
            <div id="navHead">
                    <a href="#openNav" id="openBtn"><img src="img/navBtn.png" class="bild"></a> 
                    <a href="#closeNav" id="closeBtn"><img src="img/navBtn.png" class="bild"></a>
             </div>
             <div id="mainCont">
                    Blablabla
            </div>
        </div>
</body>

Alles anzeigen

und der dazugehörige (relevante) css Code:

Code

* {
    margin:0;
    padding:0;
}

html, body {
    height:100%;
    overflow-x:hidden;
}

.navMain, #content { 
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.navMain {
    width:240px;
    height:100%;
    position:fixed;
    left:-240px;
    background:white;
}

.navMain img {
    margin-right: 40px;
}

.navMain li {
    margin-top: 25px;
    margin-bottom: 20px;
    height: 30px;
}

.navMain a:link {
    color: #333;
    text-decoration: none;
}
.navMain a:visited {
    color: #333;
    text-decoration: none;
}
.navMain a:hover {
    color: #333;
    text-decoration: none;
}
.navMain a:active {
    text-decoration: none;
    color: #333;
}
.navMain hr {
    margin-top: 10px;
    opacity: 0.5;
}

#content {
    max-width: 720px;
}

#navHead {
    background-image: url("../img/headerBG.png");
    background-size: auto;

    width: 100%;
    max-width: 720px;
    position:fixed;
}

#openBtn, 
#closeBtn {
    margin:0 0 0 0; 
    color:white; 
    padding:10px;
}

#openBtn {
    display: inline-block;
}

#closeBtn {display:none;}


/* if nav open */

#openNav:target .navMain {left:0;}

#openNav:target #content {
    margin-left:240px;
}

#openNav:target #openBtn {display:none;}

#openNav:target #closeBtn {
    display: inline-block;    
}

#mainCont {
    margin: 0;
    padding: 0;
    padding-top: 13%;
}

Alles anzeigen

Im Fall des Klicks auf den Button wird also das Menü reingeschoben indem die CSS Zuweisung verändert wird.

Dies kann ich momentan aber nicht wirklich per Javascript darstellen. Im Prinzip brauch ich nur eine Funktion, mit der ich beim wischen nach rechts den link-verweis auf #openNav und beim wischen nach rechts den Verweis auf #closeNav setzen kann.

Wie bekomm ich das ggf. mit Hammer.js jetzt hin?

Ich bin dann noch über slideout.js gestolpert...das funktioniert sogar mit der Gestensteuerung, allerdings funktioniert der menübutton dann nicht mehr korrekt...Woran kann das liegen?

JR Cologne · 31. August 2017

Keine Ahnung, müsste ich mir alles selber anschauen. Habe mich hier lediglich eingeschaltet, da ich schon mal was von Hammer.js gehört habe. Selber genutzt habe ich es aber noch nie...

Wenn sich bis Samstag hier keine meldet, der damit schon Erfahrung hat, werde ich mir das mal anschauen.

TRF · 3. September 2017

Da sich keiner gemeldet hat, kannst du dir das nun einmal anschauen bitte?

JR Cologne · 3. September 2017

Jo, klar. Werde ich mal machen...

JR Cologne · 3. September 2017

Wärst du so nett und würdest noch den kompletten Code inkl. der Bilder usw. zur Verfügung stellen?

Dann wäre das etwas einfacher für mich.

Edit:

So, hier ist schon mal ein Beispiel für eine Navigation mit Hammer.js: https://codepen.io/jr-cologne/pen/dzrGev

Das Öffnen per Klick auf den Button habe ich bisher noch nicht implementiert. Aber vielleicht bekommst du jetzt den Rest ja auch selber hin?

TRF · 5. September 2017

ich mach dir da mal nen kompletten rudimentären Code fertig. Den gesamten Code bzw die eigentlichen Bilder kann ich dir aus Datenschutzgründen nicht geben, das sollte aber denk ich kein Problem sein.

die Navigation im Beispiel....das ist ja eigentlich ne reine responsive Geschichte, mir ist ja eher wichtig, dass zusätzlich das wischen möglich ist. Allerdings muss ich mir das auch erst nochmal genauer anschauen, habs bisher nur kurz überflogen mangels Zeit im Moment...

JR Cologne · 5. September 2017

Deswegen ja auch dieser Satz...

Zitat von JR Cologne

Das Öffnen per Klick auf den Button habe ich bisher noch nicht implementiert. Aber vielleicht bekommst du jetzt den Rest ja auch selber hin

Bekommst du das selber implementiert oder soll ich dir da auch noch unter die Arme greifen?

Im Idealfall schaffst du es sozusagen, mein Beispiel zu nehmen und dies dann auf deine eigene Website anzuwenden bzw. dort einzubauen.

TRF · 5. September 2017

das Problem bei dem Beispiel ist, das hier auch kein wischen funktioniert. Ich hab mir den Code eben nochmal angeschaut, theoretisch sollte das Wischen ja funktionieren, dies tut es aber nicht. Oder ist die Seite gar nicht zum Testen geeignet und ich muss mir den Beispielcode nochmal selbst kopieren? Sry, ich bin grad etwas müde

Morgen hab ich etwas Ruhe dazu, da schau ich mir das dann nochmal konkret an. Dann kann ich dir auch sagen, ob ich das schon für mein Projekt umsetzen kann.

JR Cologne · 6. September 2017

Äh... Du klickst auf meinen Link und bekommst dort dann den Code sowie ein Vorschau-Fenster zu sehen. Wenn du dieses verkleinerst, sodass die Nav nicht mehr zu sehen ist und der typische Hamburger-Button erscheint, kannst du die Nav per Wischen öffnen...

Habe es auf dem PC sowie Smartphone getestet und es funktioniert einwandfrei.

TRF · 7. September 2017

Stimmt, jetzt funktioniert es bei mir ebenso. Ob ich das allerdings in meine bestehende Seite integrieren kann bin ich aktuell eher unsicher. Der responsiveteil aus deinem Beispiel ist für mich gar nicht nötig, da auch bei höherer Auflösung das off Canvas Menü nutze. Das ganze wird später zu 80% auf Handys und noch 20% auf Tablets genutzt, es wird keine Homepage in dem Sinn. Dies nur mal als Zusatzinfo.

Ich werde jetzt einmal versuchen, das Beispiel welches du gepostet hast für mich zu adaptieren, wichtig ist dabei, dass der Klick auf den Button per CSS realisiert werden muss (per Javascript wäre es ja mit onclick wohl recht einfach), da diese Funktion ja auch bei deaktiviertem Javascript voll funktionieren soll.

Zeitgleich habe ich aber gestern schnell noch den bei mir existierenden Code vereinfacht, so dass nur noch das Menü übrig ist. Nachfolgend der Code:

HTML:

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav-Test</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="openNav">

    <div id="navMain" class="navMain"> 
             <ul>
            <li><a href="#">Nav Item 1</a><hr /></li>
            <li><a href="#">Nav Item 2</a><hr /></li>
            <li><a href="#">Nav Item 3</a><hr /></li>
            <li><a href="#">Nav Item 4</a><hr /></li>
            <li><a href="#">Nav Item 5</a><hr /></li>
            <li><a href="#">Nav Item 6<hr /></li>
        </ul>
    </div>

      <div id="content">
            <div id="navHead">
                    <a href="#openNav" id="openBtn"><img src="img/navBtn.png" class="bild"></a> 
                    <a href="#closeNav" id="closeBtn"><img src="img/navBtn.png" class="bild"></a>
             </div>
             <div id="mainCont">
                    <p>Platzhaltertext für Inhalt</p>
             </div>
    </div>
</div>
</body>
</html>

Alles anzeigen

CSS:

Code

@charset "utf-8";

* {
    margin:0;
    padding:0;
}

html, body {
    height:100%;
    overflow-x:hidden;
}

.navMain, #content { 
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.navMain {
    width:240px;
    height:100%;
    position:fixed;
    left:-240px;
    background:white;
}

.navMain img {
    margin-right: 40px;
}

.navMain li {
    margin-top: 25px;
    margin-bottom: 20px;
    height: 30px;
}

.navMain a:link {
    color: #333;
    text-decoration: none;
}
.navMain a:visited {
    color: #333;
    text-decoration: none;
}
.navMain a:hover {
    color: #333;
    text-decoration: none;
}
.navMain a:active {
    text-decoration: none;
    color: #333;
}
.navMain hr {
    margin-top: 10px;
    opacity: 0.5;
}

#content {
    max-width: 720px;
}

#navHead {
    background-image: url("../img/headerBG.png");
    background-size: auto;

    width: 100%;
    max-width: 720px;
    position:fixed;
}

#openBtn, 
#closeBtn {
    margin:0 0 0 0; 
    color:white; 
    padding:10px;
}

#openBtn {
    display: inline-block;
}

#closeBtn {display:none;}


/* if nav open */

#openNav:target .navMain {left:0;}

#openNav:target #content {
    margin-left:240px;
}

#openNav:target #openBtn {display:none;}

#openNav:target #closeBtn {
    display: inline-block;    
}

#mainCont {
    margin: 0;
    padding: 0;
    padding-top: 13%;
    margin-left: 5%;
}
    


.bild {
    width: 32px;
    height: 32px;
}

Alles anzeigen

als Bild hab ich ein einfaches png mit Menübutton hinterlegt, dieses häng ich hier einfach mal mit an. Aus dem Quellcode oben und deinem Beispiel brauch ich quasi jetzt einen Hybriden. Ist halt wie gesagt noch Neuland für ich, ich hab grad ein wenig Zeit im Büro, demzufolge versuch ich es jetzt erstmal selbst. Sollte ich es nicht hinbekommen, meld ich mich nochmal.

TRF · 7. September 2017

Ich bin dann doch ein wenig am verzweifeln. Die Gestensteuerung kann ich reproduzieren, ich hab zumindest jetzt einmal die CSS Steuerung so angepasst, dass das Menü losgelöst bewegt werden kann (also der Inhalt wie in deinem Beispiel dahinter verschwindet), aber inzwischen hab ich mich beim Denken ein wenig verlaufen. Die Hybridlösung hab ich bis dato noch nicht...da fehlt mir noch der entscheidende Einfall...

Das Problem ist halt, dass bei der JS Variante ja die Klasse des Menüs geändert wird, während ich bei der CSS Variante einfach nur eine Div-ID manipuliere...ich denk ich bin dicht dran, aber mir fällt das denken grad echt schwer

OK, ich vermelde einen Durchbruch. Nachdem ich mir meine letzte Aussage und den JS Code nochmal genau angeschaut hab kam die erleuchtung. Ich immitiere im JS einfach mein CSS Verhalten, schon funktioniert es. Ich denke ich kann es jetzt problemlos adaptieren, erste Tests haben jetzt gut funktioniert. Vielen Dank für das gute Beispiel oben

JR Cologne · 7. September 2017

Jut, wenn doch noch Probleme auftreten sollten bzw. Hilfe gewünscht ist, einfach nachfragen.

TRF · 7. September 2017

Jup...ein Problem hab ich jetzt...das normale vertikale Scrollen ist durch das Hammer Script leider wohl deaktiviert worden. Ergibt ja irgendwie auch Sinn, da es ja im Prinzip Gesten der gleichen Klasse sind. Kann ich das irgendwie umgehen? Meinetwegen auch über ne Funktion, die das eigentlich standardmäßige scrollen im Hammer zusätzlich immitiert?

JR Cologne · 7. September 2017

Das würde mich sehr wundern...

Kannst du wieder den Code posten? Insbesondere das JS.

TRF · 7. September 2017

Beim Script hab ich den responsive-part entfernt und eben das eigentliche Verhalten beim swipen geändert.

Hier mal der rudimentäre aber voll funktionierende Code:

HTML + JS:

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav-Test</title>
<link href="style/styletest.css" rel="stylesheet" type="text/css">
<script src="hammer.min.js"></script>
</head>
<body>
<div id="openNav">
    <div class="navMain"> 
             <ul>
            <li><a href="#">Nav Item 1</a><hr /></li>
            <li><a href="#">Nav Item 2</a><hr /></li>
            <li><a href="#">Nav Item 3</a><hr /></li>
            <li><a href="#">Nav Item 4</a><hr /></li>
            <li><a href="#">Nav Item 5</a><hr /></li>
            <li><a href="#">Nav Item 6<hr /></li>
        </ul>
    </div>
      <div id="content">
            <div id="navHead">
                    <a href="#openNav" id="openBtn"><img src="img/navBtn.png" class="bild"></a> 
                    <a href="#closeNav" id="closeBtn"><img src="img/navBtn.png" class="bild"></a>
             </div>
             <div id="mainCont">
                <div id="contentHead">
                <p>Inhalt Header</p>
            </div>
                <div id="contentBody">
                <p>Inhalt Hauptteil</p>
            </div>
                <div id="contentFoot">
                <p>Inhalt Foot</p>
            </div>
            
             </div>
    </div>
</div>

<script>
          var body = document.body;    

          var mc = new Hammer.Manager(body);

          var Swipe = new Hammer.Swipe();

          mc.add(Swipe);

          mc.on('swiperight', function () {
                toggleNav('right');
          });

          mc.on('swipeleft', function () {
                toggleNav('left');
          });

    function toggleNav(swipeDirection) {
          if (window.location.href.indexOf("#closeNav") > -1 && swipeDirection == 'right') {
                window.location = "#openNav";
          } else if (window.location.href.indexOf("#openNav") > -1 && swipeDirection == 'left') {
                window.location = "#closeNav";
          } else if (window.location.href.indexOf("#openNav") == -1 && swipeDirection == 'right') {
                window.location = "#openNav";
        }
    }
</script>
</body>
</html>

Alles anzeigen

und CSS:

Code

@charset "utf-8";

* {
    margin:0;
    padding:0;
}

html, body {
    height:100%;
    overflow-x:hidden;
}

.navMain, #content { 
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.navMain {
    width:240px;
    height:100%;
    position:fixed;
    left:-240px;
    background:white;
}

.navMain img {
    margin-right: 40px;
}

.navMain li {
    margin-top: 25px;
    margin-bottom: 20px;
    height: 30px;
}

.navMain a:link {
    color: #333;
    text-decoration: none;
}
.navMain a:visited {
    color: #333;
    text-decoration: none;
}
.navMain a:hover {
    color: #333;
    text-decoration: none;
}
.navMain a:active {
    text-decoration: none;
    color: #333;
}
.navMain hr {
    margin-top: 10px;
    opacity: 0.5;
}

#content {
    max-width: 720px;
}

#navHead {
    background-image: url("../img/headerBG.png");
    background-size: auto;

    width: 100%;
    max-width: 720px;
    position:fixed;
}

#openBtn, 
#closeBtn {
    margin:0 0 0 0; 
    color:white; 
    padding:10px;
}

#openBtn {
    display: inline-block;
}

#closeBtn {display:none;}


/* if nav open */

#openNav:target .navMain {left:0;}

#openNav:target #content {
    margin-left:240px;
}

#openNav:target #openBtn {display:none;}

#openNav:target #closeBtn {
    display: inline-block;    
}

#mainCont {
    margin: 0;
    padding: 0;
    padding-top: 13%;
}
    


.bild {
    height: 32px;
    width: 32px;
}

#contentHead {
    height: 150px;
}

#contentBody {
    height: 1000px;
}

#contentFoot {
    height: 150px;
}

Alles anzeigen

die Divs im Contentteil sind im Beispiel extra hoch angelegt, scrollen wäre somit zwingend nötig, funktioniert aber auf Handys nicht. Getestet auf mehreren Mobilgeräten und dort in mehreren Browsern.

TRF · 8. September 2017

So, Problem auch gelöst. Folgende Änderung/Ergänzung im JS war nötig:

Code

var mc = new Hammer.Manager(body, {
                touchAction : 'auto'
        });

Jetzt funktioniert alles wie es soll. Vielen Dank nochmal

Off-Canvas Menü per wischen öffnen

Jetzt mitmachen!

Teilen