[GELÖST] Slide Menue wie bei mobile.de App

Kaktus96 · 22. Nov. 2016

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/tSIODgeEpRJKsQPerZZvKnHogF_oIV_ieghA6eNmIEuEtpiwRlCM6h6reD56PBsuuw=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?

Kaktus96 · 25. Nov. 2016

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 Anhang

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!

andreax · 25. Nov. 2016

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

Kaktus96 · 27. Nov. 2016

andreax schrieb:
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.

kkapsner · 27. Nov. 2016

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

Kaktus96 · 29. Nov. 2016

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

kkapsner · 03. Dez. 2016

Firefox schrieb:
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.

Kaktus96 · 08. Dez. 2016

kkapsner schrieb:
Versuche doch das Problem im Fiddle nachzustellen. Dein Fiddle erzeugt Fehler in der 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!LnQ9yB0N1nzW0x9vVhQvOOPqCNrEfKmjH70DhFFC4Ko

LG!

kkapsner · 11. Dez. 2016

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...

Kaktus96 · 12. Dez. 2016

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.

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

Kaktus96 · 15. Dez. 2016

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:

.app {
  min-height: 100vh;
}

.app-content {
	position: fixed;
}

//Das Thema kann geschlossen werden.
Danke an alle Helfer.

[GELÖST] Slide Menue wie bei mobile.de App

Kaktus96

New member

Kaktus96

New member

andreax

Guest

Kaktus96

New member

kkapsner

Super Moderator

Kaktus96

New member

kkapsner

Super Moderator

Kaktus96

New member

kkapsner

Super Moderator

Kaktus96

New member

Kaktus96

New member