Wie wird diese Navigation erstellt?

[Trabilady]

Hey ihr Lieben,

ich habe eine Navigation entdeckt, die mir irgendwie ziemlich imponiert... Wie setzt man es um, dass die span-Elemente beim Hovern rechts auftauchen und auch wieder verschwinden? Macht man das mit JavaScript oder könnte man das auch mit reinem CSS auf die Reihe bekommen?

Um folgende Navi geht es:

 

[vincitore]

geht mit beidem

 

[Trabilady]

@vincitore : *räusper* Und wie würde es ohne JS funktionieren?

 

[vincitore]

Also auf der Seite ist es schon ohne JS gelöst.
Gib mir ein paar Minuten, dann schau ich mir mal den CSS-Code an

also in dem Fall ist es einfach mit transparent an die entsprechend Stelle gesetzt worden (opacity:0; position: absolute; ...) und dann wird's wahrscheinlich beim :hover eingeblendet (also die opacity wieder auf 100%)

 

[Ebene 12]

Die Navi ist echt chic.

 

[vincitore]

die Frage ist ja, was eine Navigation bringt, die in meinem Browser (Safari) nicht funktioniert ;D

 

[Trabilady]

Wenn ich es richtig in Erinnerung habe, dann funtklioniert sie auch nicht, wenn JS ausgeschalten ist... Vermutlich durch die Icons (?!)

Hättest Du "kurz" Lust und Zeit mit mir ins Detail zu gehen?
Mal rein testweise eine einfache Liste... Wie müsste hier jetzt der CSS-Code aussehen?

<ul>
    <li class="link1">
        <a href="link1.html">
            <i>Icon1</i>
            <span>Beschreibung1</span>
        </a>
    </li>
    <li class="link2">
        <a href="link2.html">
            <i>Icon2</i>
            <span>Beschreibung2</span>
        </a>
    </li>
    <li class="link3">
        <a href="link3.html">
            <i>Icon3</i>
            <span>Beschreibung3</span>
        </a>
    </li>
</ul>

EDIT:

@vincitore : Okay, habe selbst grad nochmal nachgeschaut - mit dem Opacity hast Du recht - erst wird es auf 0 und dann auf 1 gestellt. Warum dann aber das zusätzliche display:none; ?
Und wie bekommt man das span von allen li-Elementen an genau diese eine Stelle, wenn man doch aus responsiven Gründen keine festen Pixelangaben mehr machen soll?

Verzeih die vielen Fragen...

 

[cythux]

Bei Amesome Fonts findet sieht dies so in etwas aus

 

[vincitore]

Wenn ich es richtig in Erinnerung habe, dann funtklioniert sie auch nicht, wenn JS ausgeschalten ist... Vermutlich durch die Icons (?!)

Hättest Du "kurz" Lust und Zeit mit mir ins Detail zu gehen?
Mal rein testweise eine einfache Liste... Wie müsste hier jetzt der CSS-Code aussehen?

<ul>
    <li class="link1">
        <a href="link1.html">
            <i>Icon1</i>
            <span>Beschreibung1</span>
        </a>
    </li>
    <li class="link2">
        <a href="link2.html">
            <i>Icon2</i>
            <span>Beschreibung2</span>
        </a>
    </li>
    <li class="link3">
        <a href="link3.html">
            <i>Icon3</i>
            <span>Beschreibung3</span>
        </a>
    </li>
</ul>

EDIT:

@vincitore : Okay, habe selbst grad nochmal nachgeschaut - mit dem Opacity hast Du recht - erst wird es auf 0 und dann auf 1 gestellt. Warum dann aber das zusätzliche display:none; ?
Und wie bekommt man das span von allen li-Elementen an genau diese eine Stelle, wenn man doch aus responsiven Gründen keine festen Pixelangaben mehr machen soll?

Verzeih die vielen Fragen...

Also ich würde es auf der Grundlage machen:

a span {opacity: 0;position: absolute;}
a:hover span {opacity: 1;}

die Positionierung ist aber wahrscheinlich eher das Problem

EDIT: Das display:none ist wahrscheinlich wegen dem kopieren, bzw. für alte Browser da drin. Die können meist keine opacity

bei der von dir gezeigten Seite umgeht man das responsive problem einfach, indem der Text bei kleinen Auflösungen gar nicht erst erscheint.

 

[Trabilady]

@cythux : Wie man die Icons einbindet, weiß ich. Wo man sie herbekommt auch Allerdings geht es um das Problem, wie die Iconbeschreibung (taucht beim Hovern auf - als span) positioniert wird. Wie sie verschwindet und wieder sichtbar wird habe ich jetzt dank @vincitore verstanden...

 

[berniecook]

Die Navi ist echt chic.

Hallo,
finde ich nicht. Das ist schon da gewesen und entspricht der Kachelnavi von Windows 8,

Grüße

 

[Trabilady]

Hallo,
finde ich nicht. Das ist schon da gewesen und entspricht der Kachelnavi von Windows 8,

Grüße

Zum Glück kann man über Geschmack streiten
Hast Du vielleicht eine Lösung für mein Positionierungsproblem - unabhängig davon ob es gefällt oder nicht?

 

[vincitore]

Wie gesagt:

span {position: absolute; top: XX; left: XX;}

und dann ist der Drops gelutscht.