Android-like Navigation Bar

  • HTML

Es gibt 12 Antworten in diesem Thema. Der letzte Beitrag () ist von naseweis520.

    Android-like Navigation Bar

    Huhu, ich bin gerade dabei mir ein Menü wie der NavigationDrawer auf Android nachzubauen.
    Sprich, man klickt auf ein kleines Icon, also diese paar Strichelchen und dann kommt ein Menü, was sich bis zu ca. der Hälfte des Screens zieht.

    Bisher bin ich auf folgendes Beispiel gestoßen, frage mich aber nun wie es weiter geht.

    Meine Überlegung bisher:
    - ein div mit Backgroundimage, welches beim OnClick ein Div von links nach rechts öffnet
    - das Div muss ja wahrscheinlich dann n angepassten Z Index haben, sonst passts nicht
    - joar..

    Habt Ihr weitere Ideen, Beispiele, usw.?
    Lasst es mich wissen :)

    Danke
    Polling is trolling!

    Achtung: Ich habe die komische Angewohnheit, simple Dinge zu verkomplizieren..

    Hi,

    keine Ahnung wie oder was die Navigation-Bar von Android ist. Aber anhand des Bildes wäre meine Vorgehensweise folgendermaßen:
    - Ein div entweder mit a (Hyperlinks) oder auch ein ul li mit a drin
    - Fixe Positionierung mit position: fixed;
    - An oberste Ebene mit z-index: 999;
    - Breite des div auf sagen wir 400px oder alternativ auch 20% oder 20vw mit width: 20%; oder ähnliches. Höhe auf 100% oder 100vh setzen.
    - Das div translaten sodass X-Position negativem Wert größer oder gleich der Breite entspricht, z.B. transform: translate(-20%, 0px);
    - Beim Hover eines entsprechenden Feldes (irgendwas muss ja das Anzeigen des Divs auslösen) oder eines ähnlichen Events dann dein Div auf 0px 0px translaten (also transform: translate(0px, 0px);). Das Ganze kannst du noch mit einer opacity aufhübschen.

    Sollte auch ohne Code-Beispiel verständlich und nachvollziehbar sein. Aber vllt hab ich auch die Fragestellung vollkommen missverstanden^^

    Meine Überlegung bisher ...

    ... sind Quatsch ;)


    Link :thumbup:
    Hello World

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Link“ ()

    Meine bisherigen Versuche sind leider alle gescheitert und langsam gebe ich auf, kb mehr xD..
    Warscheinlich ist der jetzige Code eh nur n Gewurschtel aus allem Gefundenen und hab auch nicht mehr den Kopf dazu noch rumzufrimeln :D.
    Spoiler anzeigen

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. <title></title>
    8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    9. <script type="text/javascript">
    10. $(document).ready(function () {
    11. $('.fixed-nav-bar #menu').click(function () {
    12. $('#bla', this).toggle(); // <========== used this as a context.
    13. });
    14. });
    15. </script>
    17. <style type="text/css">
    18. .fixed-nav-bar {
    19. position: fixed;
    20. top: 0;
    21. left: 0;
    22. z-index: 9999;
    23. width: 100%;
    24. height: 50px;
    25. background-color: #00a087;
    26. }
    27. .menubutton {
    28. width: 25px;
    29. height: 32px;
    30. display: inline-block;
    31. margin: auto;
    32. position: absolute;
    33. top: 0; left: 0; bottom: 0; left: 15px;
    34. }
    35. #menu {
    36. transition: height 2s;
    37. -moz-transition: height 2s; /* Firefox 4 */
    38. -webkit-transition: height 2s; /* Safari and Chrome */
    39. -o-transition: height 2s; /* Opera */
    40. }
    41. </style>
    43. </head>
    44. <body>
    45. <nav class="fixed-nav-bar">
    46. <a id="menu" href="#"><img class="menubutton" src="imgs/menu.png" /></a>
    47. <div id="bla" style="background-color:white;width:500;height:500;"><p>testcontent sdjksdjdsksdjdkssdkdsjkjksdkjdsjdsdskjsdkjkjdsk</p></div>
    48. </nav>
    50. </body>
    51. </html>


    EDIT: Wobei eig alles von mir ist, nur das jQuery gedöhns und das transition CSS Zeug..
    Polling is trolling!

    Achtung: Ich habe die komische Angewohnheit, simple Dinge zu verkomplizieren..

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Rootbob91“ ()

    @Rootbob91
    Stell' dich ned so an, so schwer ist das nicht - mit ein bisschen recherchieren und nachdenken klappt es - außerdem hab ich oben bereits eine Vorgehensweise beschrieben.

    Hier für dich als Beispiel: Beispiel.rar
    Beweg die Maus einfach an den Bildschirmrand (links), um das Menü aufzuklappen. Und btw, kein Mensch braucht für sowas JavaScript ;)


    Link :thumbup:
    Hello World

    Die Links gucke ich mir gleich an, was ich gestern noch gemacht habe war das hier:
    Spoiler anzeigen

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1">
    7. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    9. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    10. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
    11. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
    12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    14. <style type="text/css">
    15. .fixed-nav-bar {
    16. position: fixed;
    17. top: 0;
    18. left: 0;
    19. z-index: 9999;
    20. width: 100%;
    21. height: 50px;
    22. background-color: #00a087;
    23. }
    24. .menubutton {
    25. width: 25px;
    26. height: 32px;
    27. display: inline-block;
    28. margin: auto;
    29. position: absolute;
    30. top: 0; left: 0; bottom: 0; left: 15px;
    31. }
    32. #demo.width {
    33. height: auto;
    34. -webkit-transition: width 0.35s ease;
    35. -moz-transition: width 0.35s ease;
    36. -o-transition: width 0.35s ease;
    37. transition: width 0.35s ease;
    38. }
    39. li {
    40. list-style-type: none;
    41. }
    42. </style>
    44. </head>
    45. <body>
    46. <nav class="fixed-nav-bar">
    47. <a data-toggle="collapse" data-target="#demo"><img class="menubutton" src="imgs/menu.png" /></a>
    48. </nav>
    49. <br/>
    50. <br/>
    52. <div id="container" style="width:400px;height:100%;">
    53. <div id="demo" class="collapse in width" style="background-color:#00BC87;height:800px;">
    54. <div style="padding: 20px; overflow:hidden; width:200px;">
    55. <ul>
    56. <li><a href="http://google.de">Link Nr 1</a></li>
    57. <li><a href="http://google.de">Link Nr 2</a></li>
    58. <li><a href="http://google.de">Link Nr 3</a></li>
    59. </ul>
    60. </div>
    61. </div>
    62. </div>
    63. </body>
    64. </html>


    PS: Schwer ist das nie, wenn man weiß wie, aber da Recherchen wie "css3 expand collapse" und ähnliches bisher nur Müll gebracht haben, dann is das leider so.
    An sich ist das ja auch nichts Komplexes, aber ich hab halt nichts Großartiges gefunden und wenn man dann 3 Stunden wegen sonem eigentlich einfachem Zeugs verschwendet, dann ist das schon ziemlich fürn Popo :P.

    PPS: Danke erstmal für deinen Beispielcode @Link. Im Desktop Browser klappts, so lala auch aufm Smartphone (Galaxy Note 3), aufm iPad passiert leider gar nichts. Ich werde aber sowieso versuchen das so umzufrickeln, dass das Menü nur bei mobilen Geräten kommt und nem Menüknopf.
    Polling is trolling!

    Achtung: Ich habe die komische Angewohnheit, simple Dinge zu verkomplizieren..

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von „Rootbob91“ ()

    Hi,

    Ich werde aber sowieso versuchen das so umzufrickeln, dass das Menü nur bei mobilen Geräten kommt und nem Menüknopf.

    In dem Fall arbeitest du mit MediaQueries. Ist eigentlich auch nur eine Zeile Code um das zu machen, indem du bei @media screen das div.sidebar-left einfach auf display: none setzt.

    Link :thumbup:
    Hello World

    Jo, so ungefähr wa.

    HTML-Quellcode

    1. @media only screen
    2. and (min-device-width : 320px)
    3. and (max-device-width : 480px) {
    4. div.sidebar-left {
    5. display: none
    6. }

    Polling is trolling!

    Achtung: Ich habe die komische Angewohnheit, simple Dinge zu verkomplizieren..

    Gibts denn nicht andere Möglichkeiten, als dass über die Displaybreite zu regeln? Bspw. hat mein Nexus eine Bildschirmauflösung von 1920x1080 Pixeln - würde das dann nicht als Desktop-Gerät zählen? Gleichzeitig gibt es jedoch PC-Bildschirme mit einer weitaus niedrigeren Auflösung.

    Ja - DPI.
    Grüße
    "Life isn't about winning the race. Life is about finishing the race and how many people we can help finish the race." ~Marc Mero

    Nun bin ich also auch soweit: Keine VB-Fragen per PM! Es gibt hier ein Forum, verdammt!

Facebook
Telefonspende