Ergebnis 1 bis 11 von 11
Like Tree1Likes
  • 1 Post By kkapsner

Thema: Slide Menue wie bei mobile.de App

  1. #1
    Kaktus96 ist offline Mitglied
    registriert
    02-08-2016
    Beiträge
    27

    Question Slide Menue wie bei mobile.de App

    Hallo,

    ich sitzte nun schon seit Tagen dabei ein Slide Menü so wie bei der mobile.de App zu erstellen. Durch wischen soll sich von links langsam (je nachdem wie weit man wischt) ein Menü öffnen.
    Ich habe sogar ein fast perfekten Plunker gefunden, allerdings kann ich den irgendwie nicht einbauen. Hier wird Ionic verendet aber ich nutze mobileangularui + phonegap.
    Phonegap und Ionic basieren auf Cordova, daher bin ich ein bisschen verwirrt. Muss dann ja was Ionic spezifisches sein. .

    Alternativ habe ich auch versucht das mit der Mobile Angular UI Drag Direktive zu lösen, aber da funkt mir das Bootstrap CSS dazwischen, welches ich nicht resettet bekomme. (Die Transistions). Da verfolge ich aber auch einen eher komischen Ansatz mMn..

    *Mobile.de Menü. Das kann dann halt "reingezogen werden" https://lh3.googleusercontent.com/tS...D56PBsuuw=h900
    *Plunker: Plunker (<- hier könnt ihr genauer sehen was ich meine)
    *Mobile Angular Drag: Mobile Angular UI Demo

    So sieht mein Index aus. Nichts spektakuläres Ist ziemlich genau das welches man im Getting Started Guide erstellt.
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>TestApp</title>
    
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
        <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
        <link rel="stylesheet" href="css/app.min.css" />
        <link rel="stylesheet" href="css/responsive.min.css" />
        <link rel="stylesheet" href="css/test.min.css" />
        
        <!-- inject:js -->    
        <script src="js/app.min.js"></script>	
        <script src="../bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>		
    	
      </head>
      <body ng-app="TestApp" ng-controller="MainController"> 
    	<!-- Sidebars -->
    	<div ng-include="'sidebar.html'" 
    	ui-track-as-search-param='true'
    	class="sidebar sidebar-left"></div>
    				
        <div class="app">
          <!-- Navbars -->
          <div class="navbar navbar-app navbar-absolute-top">
            <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
              TestApp
            </div>
            <div class="btn-group pull-left">
              <div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle">
                <i class="fa fa-bars"></i> Menu
              </div>
            </div>
          </div>
    
          <div class="navbar navbar-app navbar-absolute-bottom">
            <div class="btn-group justified">
              <a href="http://mobileangularui.com/" class="btn btn-navbar">Lorem</a>
            </div>
          </div>
    
    		<!-- App Body -->
    		<div class="app-body">
    			<div class="app-content">				
    				<ng-view></ng-view>  
    			</div>
    		</div>
    
        </div><!-- ~ .app -->
    
        <div ui-yield-to="modals"></div>
      </body>
    </html>
    Habt ihr vielleicht eine ganz elegante Lösung parat?
    Geändert von mikdoe (15-12-2016 um 17:48 Uhr) Grund: Gelöst gesetzt

  2. #2
    Kaktus96 ist offline Mitglied
    registriert
    02-08-2016
    Beiträge
    27

    AW: Slide Menue wie bei mobile.de App

    Ich habe nun Slideout.js gefunden, das schein genau das zu sein, was ich möchte.

    Wenn ich das allerdings einbinde funktioniert das nicht. Mir wird ein Fehler Symbol angezeigt aber in der Log-Konsole ist nichts zu finden. Wenn ich draufklicke öffnet sich nur ein Popup mit dem Titel "Seiteninformationen". (Ich bin eigentlich kein Webentwickler)

    Daher habe ich mir ein neues Projekt angelegt doch hier das selbe Spiel.

    *Screenshot: siehe AnhangSkizze.png
    Quellcode (JS habe ich eig. in einer extra Datei hier nur der übersichtshalber im HTML):
    Code:
    <html>
      <head>
    	<script src="slideout.js/dist/slideout.js"></script>		
    	<link rel="stylesheet" href="css.css" />
      </head>
      <body>
    	<nav id="menu">
    		<header>
    			<h2>Menu</h2>
    		</header>
    	</nav>
    
    	<main id="panel">
    		<header>
    			<h2>Panel</h2>
    		</header>
    	</main>
    	
    	<script>
    	  var slideout = new Slideout({
    		'panel': document.getElementById('panel'),
    		'menu': document.getElementById('menu'),
    		'padding': 256,
    		'tolerance': 70
    	  });
    	</script>	
      </body>
    </html>
    Code:
    body {
      width: 100%;
      height: 100%;
    }
    
    .slideout-menu {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 0;
      width: 256px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      display: none;
    }
    
    .slideout-panel {
      position: relative;
      z-index: 1;
    }
    
    .slideout-open,
    .slideout-open body,
    .slideout-open .slideout-panel {
      overflow: hidden;
    }
    
    .slideout-open .slideout-menu {
      display: block;
    }
    Ordnerstruktur:
    Code:
    Slideout
    |-css.css
    |-index.html
    |-decouple
      |-.bower.json
      |-bower.json
      |-Gulpfile.js
      |-index.js
      |-LICENCE
      |-README.md
      |-dist
        |-decouple.js
        |-decouple.min.js
    |-emitter-es6
      |-.bower.json
      |-babel.js
      |-bower.json
      |-browserfy.js
      |-component.json
      |-CONTRIBUTING.md
      |-LICENSE
      |-package.json
      |-README.md
        |-browser
            |-index.js
        |-dist
            |-index.js
        |-src
            |-index.js
    |-slideout.js
      |-.bower.json
      |-bower.json
      |-CONTRIBUTING.md
      |-index.css
      |-index.js
      |-LICENSE
      |-README.md
      |-dist
        |-slideout.js
        |-slideout.min.js
    Danke für eure Hilfe!

  3. #3
    Avatar von andreax
    andreax ist gerade online Tripel-As
    registriert
    09-07-2016
    Beiträge
    209

    AW: Slide Menue wie bei mobile.de App

    Nur eine Vermutung, auf deinem Screenshot ist zusehn das der Browser in den Quirks-Modus zurückfällt.

  4. #4
    Kaktus96 ist offline Mitglied
    registriert
    02-08-2016
    Beiträge
    27

    AW: Slide Menue wie bei mobile.de App

    Zitat Zitat von andreax Beitrag anzeigen
    Nur eine Vermutung, auf deinem Screenshot ist zusehn das der Browser in den Quirks-Modus zurückfällt.
    Danke. Durch hinzufügen vom Doctype tritt die Fehlermeldung nicht mehr auf. Das eigentliche Problem wurde aber damit noch nicht behoben.

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.579

    AW: Slide Menue wie bei mobile.de App

    Kannst du uns einen Link geben, wo wir uns das live ansehen können?

  6. #6
    Kaktus96 ist offline Mitglied
    registriert
    02-08-2016
    Beiträge
    27

    AW: Slide Menue wie bei mobile.de App

    Hey,

    wie immer ist es relativ stressig bei mir, daher sry für die späte Antwort.
    Ich bin noch nicht so fit in jsfiddle & co. ich versuch's mal zusammen zu klötern.

    LG

    - - - Aktualisiert - - -

    Ich habs versucht, aber ist so noch nicht korrekt ( https://jsfiddle.net/zxa9bfey/ )
    Hier habt ihr meinen Test-Ordner, da "funktioniert der Fehler".
    => Ordner: http://www.file-upload.net/download-12131241/slideout.zip.html
    => Virus Total: Erkennungsrate 0 / 68

  7. #7
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.579

    AW: Slide Menue wie bei mobile.de App

    Zitat Zitat von Firefox
    Als Seite mit unerwünschter Software gemeldet!

    Die Website auf farmedia.info wurde als Seite gemeldet, welche unerwünschte Software enthält, und wurde auf Grund Ihrer Sicherheitseinstellungen blockiert.

    Seiten mit erwünschter Software versuchen, Software zu installieren, die betrügerisch sein und Ihr System in unerwarteter Weise beeinflussen kann.
    Versuche doch das Problem im Fiddle nachzustellen. Dein Fiddle erzeugt Fehler in der Fehlerkonsole (Wo finde ich die Fehlerkonsole?).
    Kaktus96 likes this.

  8. #8
    Kaktus96 ist offline Mitglied
    registriert
    02-08-2016
    Beiträge
    27

    AW: Slide Menue wie bei mobile.de App

    Zitat Zitat von kkapsner Beitrag anzeigen
    Versuche doch das Problem im Fiddle nachzustellen. Dein Fiddle erzeugt Fehler in der Fehlerkonsole (Wo finde ich die Fehlerkonsole?).
    Hey,

    solche Probleme hatte ich bisher noch nie mit fileupload.net. Ich habe dir das Archiv mal bei mega.co.nz hochgeladen, weil ich es immer noch nicht geschafft habe ein jsfiddle zu erstellen.

    https://mega.nz/#!BY50WJLZ!LnQ9yB0N1...KmjH70DhFFC4Ko

    LG!

  9. #9
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.579

    AW: Slide Menue wie bei mobile.de App

    OK - und was ist jetzt das Problem, das ich sehen sollte? Auf einem normalen Desktopbrowser kann das gar nicht funktionieren, da dieses slideout nur für Touchdevices gebaut ist...

  10. #10
    Kaktus96 ist offline Mitglied
    registriert
    02-08-2016
    Beiträge
    27

    AW: Slide Menue wie bei mobile.de App

    Vielen Dank @kkapsner.
    Ich habe das nun auf meinem Handy über Phonegap laufen lassen und es funktioniert. Im Umkerhschluss heißt das ja, dass das Firebug "Rezising-Tool" nicht mehr für mich zu gebrauchen ist. :/
    Dort wurde das Slide Menü nämlich nicht aktiv.
    Danke

    - - - Aktualisiert - - -

    Hast du schon Erfahrung mit Slideout.js gesammelt kkapsner?

    Wenn ich das "Draggen" nur innerhalb der ersten ~10Px erlauben möchte, muss ich dafür eine Div entlang der ganzen Seite machen und den Rest mit "data-slideout-ignore" versehen? Das finde ich sehr unsauber. Die API gibt leider keine weiteren Informationen.

    Skizze:
    Der Anwender soll immer im roten Bereich beginnen zu wischen. Dies kann auch außerhalb des roten Bereichs forgesetzt werden, aber nicht außerhalb starten.
    Unbenannt.png
    Bei dem Lösungsansatz wird die Div natürlich nicht eingefärbt, sondern bleibt transparent.

    Aktuell ist das Wischen nämlich über den ganzen Bildschirm möglich und verhindert dadurch (?) ebenfalls das Nach-Unten-Scrollen. Alle Divs welche vor der Implementierung, höher als das Display waren, waren Scrollable und sind es nun nicht mehr. (Die Divs haben das CSS Attributt "overflow: auto;")

    Danke

  11. #11
    Kaktus96 ist offline Mitglied
    registriert
    02-08-2016
    Beiträge
    27

    Thumbs up AW: Slide Menue wie bei mobile.de App

    Habe nun die Lösung gefunden.
    Bei CSS gibt es anscheinend auch eine Einheit "vh" diese ist im zusammenhang mit dem Attribut "height" dafür da, die echte Bildschirmhöhe zu ermitteln.
    Daraus ergibt sich 1vh = 1% vom realen Bildschirm (Höhe oder Breite) und 100vh = 100% der realen höhe. Damit konnte ich die Elemente wieder richtig positionieren und nun funktioniert auch alles.
    Das dass wischen jetzt nun doch immer noch überall funktioniert ist nicht so schlimm.. mit der ignore-flag von slideout.js konnte ich meine notwendigen Elemente schützen.

    Mein CSS
    HTML-Code:
    .app {
      min-height: 100vh;
    }
    
    .app-content {
    	position: fixed;
    }
    //Das Thema kann geschlossen werden.
    Danke an alle Helfer.
    Geändert von mikdoe (15-12-2016 um 17:47 Uhr) Grund: Code Tags

Ähnliche Themen

  1. mobile handling
    Von psygonis im Forum CSS und (X)HTML
    Antworten: 2
    Letzter Beitrag: 16-01-2016, 07:36
  2. [FRAGE] Slide show, wie startet die slide show selbständig
    Von frankmehlhop im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 13-09-2014, 20:12
  3. Antworten: 1
    Letzter Beitrag: 26-10-2012, 01:38
  4. lerntherapie-mobile.de
    Von ZeitGeist im Forum Site-Check
    Antworten: 7
    Letzter Beitrag: 21-05-2007, 21:41

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •