(Mobile) Navigation mit 3. und 4. Ebene

(Mobile) Navigation mit 3. und 4. Ebene - Kritik erwünscht

21.08.2018 09:08

DocBernie
#1

Liebes Forum,

"stricke" als absoluter Neuling nun schon geraume Zeit an meiner Webseite mit Themen aus dem Bereich Mathematik: https://www.frassek.org/

Ich hatte mit einer früheren Version meine Schüler(innen) - ich unterrichte Mathematik - mal als Tester eingesetzt mit der Aufgabe, einmal alle Unterseiten kurz aufzurufen. Während der Zugriff vom PC aus sich ganz gut gestaltete, stellte ich fest, dass viele sich mit dem Handy-Zugriff in der Navigation verirrten und nicht weiter in die Tiefe gingen ...

Nun habe ich für jeden Menüpunkt oben auf der sich öffnenden Seite "Icons" (kleine Bildchen, die den Inhalt darstellen) plaziert, so dass man nicht immer das "Hamburger-Menü" des Browsers benutzen muss, um in einer Kategorie hin- und her zu springen.

Es gibt auch eine 4. Ebene in der Navigation, wie z.B. bei 3D Mathe\3D Flächen\Spezielle 3D Flächen\ ...
Ist man in auf einer Level-4-Seite (z.B. Superellipsoid), so gibt es dort am Seitenende einen Back-Button, so dass man wieder in "Spezielle Flächen" landet.

Alles in allem und mit der Breadcrump-Navigation geht das Navigieren mit dem Handy meiner Meinung nach viel besser.

Was meint Ihr dazu? Anregungen und konstruktive Kritik sind herzlich willkommen.

Viele Grüße und vielen Dank
DocBernie

Antworten

Beitrag melden

21.08.2018 12:42

az_
#2

az_

Auf welcher Unterseite ist die 4. Ebene zu sehen?

Generell ist das keine schlechte Idee. aber Die Icons nebeneinander fände ich besser, oder eine Erklärung/Beschreibung neben dem Icon.

...wie komme ich wieder zurück?

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

22.08.2018 11:16

DocBernie
#3

DocBernie

Lieber Andreas,
vielen Dank für Dein Feedback. Die ganze "Problematik", d.h. schnelles Navigieren ohne das Hamburgermenü benutzen zu müssen, entsteht, da man auf dem Handy nicht die Unterseiten sieht, die beim PC links stehen ...
Nun zu Deinen Fragen und Anregungen ...

----- 4. EBENE -----
Beispiel zur 4. Ebene (in blau):

Numerik
___...
___Integral
______Grundlagen
______Numerische Integration
______Doppelintegrale
______Spezielle Integrale
__________Normalverteilung
__________Fresnel-Integral
__________Integralsinus
__________Wilbraham-Gibbs Konstante
__________Integrallogarithmus
______Integralanwendungen
__________Fläche zwischen Kurven
__________Schwerpunkt
__________Länge Funktionsgraph

Bis zur 3. Ebene erscheinen die Unterseitentitel in der Bread-Crumb-Zeile. Wählt man eine Seite der 4. Ebene (z.B. "Normalverteilung" unter "Spezielle Integrale"), erscheint in der Bread-Crumb-Zeile "Numerik >> Integral"; daher befindet sich am Ende der Seite "Normalverteilung" unten ein Rücksprung-Button:

___________________________________________
----- ICONS NEBENEINANDER -----
Die Sprung-Icons (z.B. Normalverteilung, Fresnel-Integral, ..., Integrallogarithmus), d.h. Bilder mit Bildtitel befinden sich in Spalten. Auf dem Handy erscheinen sie dann untereinander, egal ob ich Hoch- oder Queransicht wähle.
Wenn ich die Bilder in eine Galerie packe, habe ich keine Titel. Ich müsste die Bilder neu machen und den Titel im Bild integrieren.
Auf meiner Seite habe ich die Testseite "Für Redesign Berlin Forum" angelegt: einmal Sprung-Icons (noch ohne Titel) in Galerie und einmal in Spalten (so wie bisher auf ganze Webseite).

Viele Grüße
Bernd

Antworten

Beitrag melden

20.11.2018 08:30

Kersten
#4

Kersten

Moin-Moin!

Ich glaube, ich habe ein ganz ähnliches Problem. Ihr habt mir ja schon häufiger toll mit meiner sehr umfangreichen Homepage weitergeholfen. Daher hoffe ich auch jetzt auf einen Tipp von euch.

Ich habe an einigen Stellen sogar 5 Ebenen; zum Beispiel hier:
https://www.palaneris.de/kabous-welpen/c-wurf-vom-bonner-bogen-2018-1/
(Bin mit grad nicht mal sicher, ob es irgendwo sogar 6 gibt... ;-) )

Soweit habe ich das eigentlich zu meiner Zufriedenheit gelöst und auch meine bisherigen Nutzer finden sich bisher gut auf der Homepage zurecht. Für's Breadcrumb habe ich ein kleines Widget gebastelt, das jeweils das Original-Breadcrumb überdeckt, so dass ein Zurückspringen jederzeit möglich ist, auch wenn man sich auf meine versteckten Seiten, die meine imaginären 4. und 5. Ebenen bilden, befindet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 

<div id="pfad">
    <span class="pfad-hintergrund">
        <a class="pfad1" href="https://palaneris.de/zucht/">Zucht »</a> 
         <a class="pfad1" href="https://palaneris.de/kabous-welpen/">Kabous Welpen »</a> 
         <a class="pfad1" href="https://palaneris.de/kabous-welpen/c-wurf-vom-bonner-bogen-2018">C-Wurf vom Bonner Bogen »</a> 
         <a class="pfad2" href="https://palaneris.de/kabous-welpen/c-wurf-vom-bonner-bogen-2018/blind-date/">Blind Date</a>
   </span>
</div>
 

<style>
/* <![CDATA[ */
    .pfad-hintergrund {
        background-color: #fffffa;
    }
    
    #pfad {
        margin-top: -5.4rem;
        z-index: 999999;
    }
    
    #pfad a {
        background-color: #fffffa;
        text-decoration: none;
        color: #b87524;
    }
 
    #pfad a:hover {
        color: #704919;
        }
    
    .pfad2 {
        color: #704919!important;
    }
    
/*]]>*/
</style>
 

Am PC/Mac funktioniert soweit alles ganz gut. Probleme habe ich mit der mobilen Ansicht aufm Handy.
1. Auf allen versteckten, aber über diverse Links oder eigene Navi aufrufbaren Seiten fehlen die Breadcrumbs.
2. Auch das "normale" Submenü, was am Mac auf der linken Seite und auch bei den versteckten Seiten zu sehen ist, taucht am Handy nicht auf.
3. Und mein Header (das Bild) wird auf dem Handy in der Breite abgeschnitten.

Ich bin mir ziemlich sicher, dass das daran liegt, dass ich noch nix von meinen selbstbestrickten Sachen responsive gestrickt habe. Habe ich mir der Vermutung recht? Ich nehme mal weiter an, dass diese "@media"-codes für responsive Gestaltung erforderlich sind, richtig? Leider habe ich davon noch gar keine Ahnung. Kann mir bitte jemand auf den richtigen Weg helfen, wie ich meine Menüs und meine Header auch fürs Handy tauglich gestalte?

LG
Kersten