Anzeige

Responsive Navigation

Responsive Navigation | PSD-Tutorials.de

Erstellt von AxelM, 24.10.2015.

  1. AxelM

    AxelM Nicht mehr ganz neu hier

    Dabei seit:
    22.10.2011
    Beiträge:
    180
    Geschlecht:
    männlich
    Responsive Navigation
    Hallo,
    Ich habe das Wordpress Theme "Adelle" etwas modifiziert.
    Wenn man sich jetzt die Navigation ansieht, erscheint da auf dem Handy ein Dropdown.
    Ansich ist das gut. Blöd ist aber, dass immer der letzte Punkt des Dropdown angezeigt wird.
    Hat jemand einen Vorschlag, wie ich die Aktuelle Seite darstellen lassen kann?
    Hierfür brauchts ansich nur die Idee, wie ich das in HTML / CSS umsetze den Rest bekomme ich hin.
    Danke schonmal für eure Antworten.
     
    #1      
  2. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Responsive Navigation
    Bitte poste einen Link zu deiner Website, damit wir uns die Navigation anschauen können. So ohne Markup und CSS ist kaum nachvollziehbar.

    Liebe Grüße, Patrick
     
    #2      
  3. AxelM

    AxelM Nicht mehr ganz neu hier

    Dabei seit:
    22.10.2011
    Beiträge:
    180
    Geschlecht:
    männlich
    Responsive Navigation
    #3      
  4. pixel_hunter

    pixel_hunter Aktives Mitglied

    Dabei seit:
    11.08.2013
    Beiträge:
    480
    Geschlecht:
    männlich
    Responsive Navigation
    Als Antwort hier wohl nicht ganz passend, aber:
    Ich konnte bzw wollte die Seite nicht auf Smartphone abrufen, WEIL die Ladezeit viel zu lang ist, mit 11,7 MB ist die Seite m.E. viel zu groß für mobil. Wieso sind viele der Bilder denn so riesig groß, wenn scho so viele auf eine Seite sollen (z.B.1,2 MB)?
    Ist das Theme denn responsible oder ä.?
     
    #4      
  5. Helpstar24

    Helpstar24 Guest

    Responsive Navigation
    Habe die Webseite eben auch aufgerufen. Kann ich nur bestätigen. Die Bilder werden in einer besonders hohen Auflösung hoch geladen.

    Das ist Gift für das Handy Daten Volumen.
    Kleiner Tipp: Mit Gimp kann man die Bilder problemlos verkleinern und gleichzeitig besteht auch die Möglichkeit beim Speichern die Bilder zu komprimieren.
     
    #5      
  6. AxelM

    AxelM Nicht mehr ganz neu hier

    Dabei seit:
    22.10.2011
    Beiträge:
    180
    Geschlecht:
    männlich
    Responsive Navigation
    Generell gebe ich euch da recht. Vermutlich wäre da ein wenig Nachhilfe Wordpress / Photoshop auch angebracht.
    Aber hat jemand eine Idee zu der Nav
     
    #6      
  7. Dagmar_Hannig

    Dagmar_Hannig Nicht mehr ganz neu hier

    Dabei seit:
    09.04.2012
    Beiträge:
    50
    Geschlecht:
    weiblich
    Ort:
    in Niedersachsen
    Software:
    Photoshop CS5, Windows, Office 2010, Wordpress
    Kameratyp:
    Canon PowerShot200 IS
    Responsive Navigation
    Hallo Axel,

    habe deine Homepage gerademal aufgemacht.
    Vom Theme her gefällt sie mir nicht schlecht.

    Aber: Bei der Navigation gibt es keine Dropdown Bereiche bei der Darstellung auf meinem Notebook. Sag mir mal, wo du einen Dropdown hast in deiner Darstellung.

    Bei der Vorstellung deiner Bücher auf der ersten Seite würde ich nach dem ersten Satz von einem Buch eine Weiterleitung zum Lesen auf einer Beitragsseite machen.
    Das gilt auch für die anderen Artikel auf deiner ersten Seite. Die Vorstellung deiner Person sollte eine eigene Seite bekommen.

    So lang wie die Seite ist, hat doch keiner Lust nach unten zu scrollen. Bilder klein machen, ein Satz zum Weiterlesen und schon hast du die erste Seite massiv reduziert, bzw. brauchst nicht so viele Seiten. Mehr als Seiten guckt sich selten einer an.

    Grüße
    Dagmar
     
    #7      
  8. Dagmar_Hannig

    Dagmar_Hannig Nicht mehr ganz neu hier

    Dabei seit:
    09.04.2012
    Beiträge:
    50
    Geschlecht:
    weiblich
    Ort:
    in Niedersachsen
    Software:
    Photoshop CS5, Windows, Office 2010, Wordpress
    Kameratyp:
    Canon PowerShot200 IS
    Responsive Navigation
    Mehr als 3 Seiten guckt sich keiner an.
     
    #8      
  9. AxelM

    AxelM Nicht mehr ganz neu hier

    Dabei seit:
    22.10.2011
    Beiträge:
    180
    Geschlecht:
    männlich
    Responsive Navigation
    Hallo, Danke für eure Antworten.
    Wenn ihr die Seite auf dem Handy anseht, werdet ihr sehen, dass die Nav zum Dropdown wird.
    Und um dieses Dropdown gehts ;)
     
    #9      
  10. Helpstar24

    Helpstar24 Guest

    Responsive Navigation
    AxelM hat Recht. Ich schreibe Dir heute noch den Code. Dann musst du diesen
    in die CSS Datei mit einpflegen.

    -> Design -> Editor -> Stylesheet

    Besser wär's wenn du diesen Code ersetzt.

    Edit:

    Öffne wie schon erwähnt die Stylesheet Datei:
    Ab Zeile 74

    diesen Code bis Zeile 110 ersetzen, einfach Copy und Paste:
    HTML:
    1.  
    2. @media all and (max-width: 680px) {
    3.  
    4.   /* Overall */
    5.   .container {margin: 10px auto; width: 90%; overflow: hidden;}
    6.   .header {position: relative; width: 90%; margin: 0 auto; padding: 40px 0 0 0;}
    7.   .section {clear: both; margin: 20px 0;}
    8.   .aside {clear: both; margin: 30px 0; background: #f8f8f8;}
    9.   .footer {clear: both; overflow: hidden; margin: 0 auto; width: 100%; color: #777;}
    10.  
    11.   /* .header form */
    12.   .header-form {display: none;}
    13.  
    14.   /* .header */
    15.   .header h1,
    16.   .header h5 {font-size: 24px; text-transform: uppercase; margin: 10px 0 0 0; text-align: center;}
    17.   .header-title {color: #575656;}
    18.   .header-desc {margin: 0; color: #777; text-align: center;}
    19.  
    20.   /* .nav */
    21.   .mobile-nav {display: block; width: 100%; background: #fff;}
    22.   .tinynav {display: none; width: 100%; margin: 0 auto; background: #fff;}
    23.   .nav {position: relative; width: 96%; background: #575656; display: inline-block; padding: 2%; margin-top: 4px; clear: both; line-height: 1em; text-transform: uppercase;}
    24.  
    25.   .nav li {width:100%; height:45px; float:left; display:block; background-color:gray;color:white!important; border-bottom:1px solid silver}
    26.   .nav li a{color:white; width:100%; height:45px; float:left; display:block; padding: 15px; }
    27.   .nav li a:hover{color:silver;}
    28.  
    29.   /* .post-info-meta */
    30.   ul.post-info-meta {color: #888; padding: 0;}
    31.   ul.post-info-meta li {list-style: none; float: none;}
    32.   ul.post-info-meta li.post-info-comment {}
    33.  
    34.   /* .footer */
    35.   p.footer-copy {background: #575656; padding: 20px; clear: both; font-size: 0.9em; overflow: hidden; margin: 0 auto;}
    36.   p.footer-copy .footer-credit {}
    37.  
    38. }
    39.  

    Das schaut dann so aus. Einfach auf das Bild klicken.

    [​IMG]


    :)

    LG,Helpi
     
    Zuletzt von einem Moderator bearbeitet: 25.10.2015
    #10      
  11. AxelM

    AxelM Nicht mehr ganz neu hier

    Dabei seit:
    22.10.2011
    Beiträge:
    180
    Geschlecht:
    männlich
    Responsive Navigation
    Vielen Dank das stellt meine Frau zufrieden ;)
     
    #11      
  12. Helpstar24

    Helpstar24 Guest

    Responsive Navigation

    Ich weiss. Ich hab's die Seite eben aufgerufen und es funktioniert einwandfrei :)

    LG, Helpi
     
    #12      
  13. Florian Zarnack

    Florian Zarnack Noch nicht viel geschrieben

    Dabei seit:
    12.09.2015
    Beiträge:
    3
    Geschlecht:
    männlich
    Ort:
    Gaimersheim
    Software:
    Das Worldsoft CMS
    Kameratyp:
    Digicam - Samsung ST65
    Responsive Navigation
    Axel du kannst Dir zum Beispiel das Programm Irfan View auch runterladen und damit die Bildergröße ohne großen Qualitätsverlust kleiner machen :)
     
    #13      
x
×
×