• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hilfe bei meinem Projekt - diverse Fragen

Das Navi ist ja so aufgebaut:

1
2 - B - C
3
4 - B - C
5

Wenn ich jetzt mobil auf die 2 drücke, öffnet sich Seite 2, die gleichzeitig auch Punkt B in der Reihe ist. Ich möchte aber, dass sich dann das Untermenü ausklappt und zwischen B und C wählen kann. Dem obersten Punkt den Link entfernen möchte ich nicht so gerne (Falls das überhaupt funktionieren würde).
 
Willst du das Untermenü nach dem Seiten-Reload auf steht, oder soll es auf bleiben, wenn du die oberste Reihe anklickst?
Beim ersten hätte man das mit localstorage machen können, wie ich es eben gezeigt habe.
Beim zweiten würde das ja so aussehen
*** Link entfernt, weil nicht mehr erreichbar ***
 
Zuletzt bearbeitet:
Hallo,

ja, genauso wie beim Zweiten! Aber eben nur mobil. Am Desktop-PC alles wie es ist. Und mobil eben "Ich tippe mit dem Finger auf den oberen Menüpunkt und mir wird das ganze Menü angezeigt und bleibt stehen". Auf der nächsten Seite soll es dann wieder eingeklappt sein.
 
Da sich das bei Codepen ja alles nicht so richtig testen lässt, habe ich es mal bei mir hochgeladen.

*** Link entfernt, weil nicht mehr erreichbar ***
Dann habe ich es mit Handy aufgerufen und muss dabei sagen, dass das Menü genau so aufbleibt wie bei Codepen zu sehen. Mein Handy ist zwar 10 Jahre alt, aber sollte wohl keinen großen Unterschied machen.
Ich weiß ja nicht wie es bei den anderen ist, aber bei mir ist alles bestens, da ploppt nichts kurz auf, ist alles so wie beim Desktop-PC.

Kann das sein, dass bei dir vielleicht noch eine andere CSS da drauf zugreift und das Menü sofort wieder schließt?
 
Zuletzt bearbeitet:
Hmm, kA... hier mal der komplette Code zur Navigation:

Ist deine Seite da mobil oder desktop? Weil am Desktop soll es ja beim Hovern "aufploppen", und am Handy soll es beim Klicken aufgehen und aufbleiben.


CSS: 
 nav>ul {

            width: 100%;
            max-width: 1200px;
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;

        }


        nav li {

            width: 100%;
            max-width: 1200px;
            border: 1px solid #79B3E5;
            border-left: none;
            border-right: none;
            font-family: Arial;
            padding: 0;
            font-size: 1.5rem;
            flex: 1 1 0%;

        }



        @media (min-width: 45em) {
            nav>ul {
                flex-direction: row;
            }
            nav li {
                flex: 1;
                font-size: 1em;
            }
        }

        nav a {


            display: block;
            padding: 0.4em;
            text-decoration: none;
            font-weight: bold;
            text-align: center;
            color: #79B3E5;

        }

        nav li[aria-current] a {
            background-color: #79B3E5;
            color: white;
            font-family: Arial;
        }
        
            

        nav a:focus,
        nav a:hover,
        nav li[aria-current] a:focus
        nav li[aria-current] a:hover {
            background-color: #79B3E5;
            color: white;
        }
        
        nav li[aria-current] a:focus,
        nav .submenu li a{
            color: #79B3E5;
            background-color: white;
        }
        
        nav li a:hover,
        nav li:hover .submenu {           
            color: white;
            background-color: #79B3E5;
        }
        
        
        nav .submenu li[aria-current] a {
            color: white;
            background-color: #79B3E5;
        }
    
        
        

        /*     submenu navigation links      */

        
        nav > ul > li {
            position: relative;
        }
        
        
        nav .submenu {
            position: absolute;
            visibility: hidden;
            width: 100%;
            height: 0;
            z-index: 1000;
        }

        nav .submenu li {
            display: block;
            border-top: none;
            /* width: 15em; */
        }

        /**     Show the submenu on hover, focus     **/

        nav li:hover .submenu,
        nav li:active .submenu,
        nav li:focus .submenu {
            visibility: visible;
            height: auto;
            background-color: white;
            border-right: 1px solid #79B3E5;
            border-left: 1px solid #79B3E5;
            border-top: 1px solid #79B3E5;


        }
 
Hast du ein Link zur Seite ?
Da kann man alles sehen was da stören könnte.
Hast du noch andere Css Datein oder Javascript Datein eingebunden?
Bist du mal auf den Letzten Link gegangen von mir und hast gekuckt ob es da mit Handy geht ?
Weil da habe ich nur das wichtigste benutzt und alles andere was stören könnte zb footer oder was auch immer weggelassen.
Wenn es da auch nicht geht bin ich langsam überfragt weil bei mein Handy geht es .
 
Hier der Link zur Seite: www.hypochondrie-hilfe.de

Am Handy sieht das gut aus bei dir auf der Seite! Aber leider verhält sich die Seite mit einem Desktop-PC genauso. Das Menü soll nur am Handy ausgeklappt bleiben, am PC ist das ja nicht nötig.
 
Jetzt weiß ich auch was du mit aufploppen meinst.
Der Fehler kann man ganz simple beheben.
Ändere die beiden Zeilen ,aus den Oberen Menü( Nicht Untermenü).
Code: 
           <li tabindex="0"> <a href="Hypochondrie.html">Hypochondrie</a>

            <li tabindex="0"> <a href="Selbsthilfe.html">Selbsthilfe</a>

In das
Code: 
           <li tabindex="0"> <a>Hypochondrie</a>

            <li tabindex="0"> <a>Selbsthilfe</a>

Weil das aufploppen ist ein Seiten reload ,wenn du mit den Finger da drauf klicken tust.
Ein Hover gibst ja bei Handy nicht wo drauf das Menü reagieren könnte.
Sobald du das Menü mit den Finger berührst Ladet er den Link ,was man auch als aufploppen sehen könnte.
Wenn die Verlinkungen oben draußen sind sollte das ploppen weg sein.
 
Die Idee hatte ich ja auch schon, das ist für mich aber eine unbefriedigende Lösung. Ich möchte am Desktop-PC den Link oben gerne drin lassen und nur am Handy entfernen. Gibt es da eine Möglichkeit?
 
Oder zumindest, dass beim Mouseover nicht der hässliche Cursor, sondern die Hand mit dem ausgestreckten Zeigefinger angezeigt wird?
 
Ah, ok.. habs mit cursor: pointer hinbekommen. Ich denke das ist eine Lösung, mit der ich leben kann. Vielen Dank!
 
Chizzo schrieb:
Die Idee hatte ich ja auch schon, das ist für mich aber eine unbefriedigende Lösung. Ich möchte am Desktop-PC den Link oben gerne drin lassen und nur am Handy entfernen. Gibt es da eine Möglichkeit?
Zum Vergrößern anklicken....

Das sollte man mit @mediaqueries auch hinbekommen. Einfgach 2 navis bauen ,eins mit den Links und eins ohne. Dann die die navis bei ensprechenden @mediaqueries ein und ausblenden.
Javascript Lösungen gibst da auch ,aber wäre in den Fall auch überflüssig.
Vieleicht weiß noch einer nee bessere Lösung ?
 
Mit den Mediaqueries komme ich bisher überhaupt nicht klar. Habe da schon mal ein bisschen rumgespielt, aber an der Anzeige hat sich nie etwas geändert...

Ich würde jetzt gerne noch in den Oberpunkten ein kleines, nach unten zeigendes Dreieck einbauen, damit der User direkt weiss, es gibt Untermenüs. Gibt es da irgendeinen Trick, wie man diese in den Code enbauen muss? Hier mal mein Code mit "&nabla", bei dem leider nichts passiert...

HTML: 
<li aria-current="Startseite"><a href="Startseite.html">Startseite</a></li>
            <li tabindex="0"> <a>Hypochondrie &nabla; </a>
               <ul class="submenu">
                    <li tabindex="0"><a href="Hypochondrie.html">Hypochondrie</a></li>
                    <li tabindex="0"><a href="Symptome.html">Symptome</a></li>
               </ul>
            </li>
 
Mit den Pfeilen kann ich dir das anbieten.

Hilfe bei meinem Projekt - diverse Fragen

Hilfe bei meinem Projekt - diverse Fragen Hallo, bisher kam ich wirklich besser voran als ich dachte. Ich weiß, es ist noch nicht viel, aber es ist schon mal ein Anfang. Nun stoße ich (und Google) allerdings bereits an die Grenzen unseres Könnens. Ich poste mal die HTML- und CSS-Code und stelle...
basti1012.bplaced.net
Du kannst dir auf der Webseite auch andere Pfeile aussuchen ,mußt dir da nur den Code raussuchen
https://fontawesome.com/icons?d=gallery
 
Zuletzt bearbeitet:
Das sieht ganz gut aus. Aber wie bekomme ich das bei mir eingebunden? Wenn ich nur das <i class="fas fa-angle-down"></i> im HTML eingebe, passiert nichts...
 
Hier hast du noch nee Version mit @mediaqueries,wie man das machen könnte das auf Handy kein Link drinne ist und auf Pc mit Link.
Aber da sollte vieleicht noch einer drüber kucken ob das auch Ok ist ,weil @mediaqueries bin ich gerade nicht so gut drinne.
Es Funktioniert zumindest ,aber das hat ja auch nicht immer was zu sagen.

Chizzo schrieb:
Das sieht ganz gut aus. Aber wie bekomme ich das bei mir eingebunden? Wenn ich nur das <i class="fas fa-angle-down"></i> im HTML eingebe, passiert nichts...
Zum Vergrößern anklicken....
Da hast du wahrscheinlich vergessen die Bibiliothek mit einzubinden.Also das .fontawesome.css.

Du mußt im <head> Bereich das noch einbinden
HTML: 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
 
Vielen Dank! Jap, ich hatte das Style vergessen einzubinden.

Änderungen sind online. So langsam werde ich zufrieden! :-)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben