"Kontextsensitive" Navigation mit CSS realisieren?

[spacle]

Wenn man sich die Navigation, die wir oben auf der Seite hier haben näher ansieht, fällt auf, wie komplex und genial gemacht das doch eigentlich ist. ich frage mich nur, wie, und ob man das ganze mit reinem CSS realisieren kann, oder ob es das sogar momentan ist. Ich habe... naja... erweiterte CSS Grundkenntnisse aber ich weiss nicht wie das hier geht. Und was brauchte man nochmal, damit der Befehl div#xy:hover im IE akzeptiert wird?

 

[tr4ze]

AW: "Kontextsensitive" Navigation mit CSS realisieren?

Die Technik da oben nennt sich Drop Line Menue, einfach mal nach Googlen, gibt tausende Lösungen zu dem Thema(mit und ohne CSS).
Das andere was du suchst ist wohl Whatever:hover

 

[Myhar]

AW: "Kontextsensitive" Navigation mit CSS realisieren?

Was hindert dich daran, die Seite mit dem Firebug zu untersuchen? Du kannst dir im Firebug auch extra die Styles für den hover Zustand eines Objektes anzeigen lassen, dann siehst du gleich was mittels CSS und was nicht mit CSS umgesetzt wurde.
Es kommt auf die Komplexität der Navigation an, aber der IE versteht sehr wohl a:hover weitereSelektoren. Wenn man den hover Effekt also auf das a-Tag legt, dann funktioniert so eine Navigation auch im IE.

L. G.

 

[spacle]

AW: "Kontextsensitive" Navigation mit CSS realisieren?

weil ich ken firebug habe, weil ich kein firefox habe, weil ich mir kein firefox holen werde. ich hab jetzt nen nettes menü gefunden: danke. mir fehlte der begriff

 

[Myhar]

AW: "Kontextsensitive" Navigation mit CSS realisieren?

weil ich ken firebug habe, weil ich kein firefox habe, weil ich mir kein firefox holen werde.

Und warum nicht?
Du kannst auch die Webdeveloper Tools von Chrome, IE oder Opera verwenden. (Die muss man auch nicht extra installieren sondern sind bei den Browsern fix dabei)


L. G.

 

[spreewaelder]

AW: "Kontextsensitive" Navigation mit CSS realisieren?

Andere Frage zu Firebug:
Gibt es hierzu ein dt Manual irgendwo? Die Netzsuche hat mir nicht weitergeholfen. Englisch ist nicht mein Ding (bin schon etwas "fortgeschrittener").

 

[magicsepp]

AW: "Kontextsensitive" Navigation mit CSS realisieren?

hier gibt es was zu lesen ...

 

[spreewaelder]

AW: "Kontextsensitive" Navigation mit CSS realisieren?

Danke für den Tip. Werde mal meinen Firefox aufrüsten.
Bin gerade dabei mir html und css anzulernen. Kann also nicht schaden.

 

[spacle]

AW: "Kontextsensitive" Navigation mit CSS realisieren?

also ich poste jetzt mal wieder in den thread, weil ich mich frage wie das geht dass da noch so ne grafik links und rechts is^^ also diese schatten da wie hier oben wie gehen die?

ich nehme dieses tut als grundlage:Tipps und Tricks zur Webentwicklung: Dropdown Navigation mit CSS - PSD-Tutorials.de

 

[tr4ze]

AW: "Kontextsensitive" Navigation mit CSS realisieren?

Das sind sliderdoors, schau dir die Navoben doch mal im Firebug an oder google nach css/sliderdoor

 

[spacle]

AW: "Kontextsensitive" Navigation mit CSS realisieren?

habe ich; ich finde es nich^^

übrigens: ich habe mein css jetzt so formatiert:

ul {list-style:none; position:relative;}
ul li {float:left;font-size:17px; font-variant:small-caps; font-family:Arial, Helvetica, sans-serif; color:000000;}
ul li a {text-decoration:none; width:631; background:#ccc; display:block;font-size:17px; font-variant:small-caps; font-family:Arial, Helvetica, sans-serif; color:000000;}
ul li a:hover {background:#999; color:FFF;}
ul li ul {display:none;}
ul li:hover ul{display:block;position:absolute;margin:0 0 0 -40px;}

und da html:

        <ul >
            <li><a href="#">Home</a>
                <ul>
                    <li><a href="index.html">Startseite</a></li>
                    <li><a href="about.html">about</a></li>
                    <li><a href="news.html">News</a></li>
                </ul>
            </li>
            <li><a href="#">Kontakt</a>
            </li>
        </ul>

und es sieht leider so aus:


der text is nich bei hover weiss, viele formatierungen greifen nicht und wie schaffe ich es, dass dass wenn ich bei kontakt auf nen menü einbaue das unter home is und nich unter kontakt

und kannst du pls nen beispiel für sliderdoor geben?^^

 

[Tyramel]

AW: "Kontextsensitive" Navigation mit CSS realisieren?

Meine Frage ist: "Wie kannst du Ordentliche Webseiten erstellen, wenn du nur einen Browser nutzt?" - Das ist sehr untypisch für einen Webentwickler. Ich nutze zum Beispiel IE8 / IE 9 / FF3 / FF4 / Safari 5 / Chrome / Opera 11

Und das nur um meine Webseiten gegenzuchecken ob alles so angezeigt wird wie ich es will. Browser sind keine GB groß da bricht man sich keinen ab wenn man mehrere installiert. Außerdem gibt es Firebug lite als Bookmarklet auch für IE. Firebug Lite : Firebug

Schönen Tag noch.

P.S.

<DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            ul {list-style:none; position:relative;}
ul li {float:left;font-size:17px; font-variant:small-caps; font-family:Arial, Helvetica, sans-serif; color:000000; [B]width:100px;[/B]}
ul li a {text-decoration:none; background:#ccc; display:block;font-size:17px; font-variant:small-caps; font-family:Arial, Helvetica, sans-serif; color:000000;}
ul li a:hover {background:#999; color:FFF;}
ul li ul {display:none;}
ul li:hover ul{display:block;position:absolute;margin:0 0 0 -40px;}
        </style>
    </head>
    <body>
          <ul >
            <li><a href="#">Home</a>
                <ul>
                    <li><a href="index.html">Startseite</a></li>
                    <li><a href="about.html">about</a></li>
                    <li><a href="news.html">News</a></li>
                </ul>
            </li>
            <li><a href="#">Kontakt</a>
            </li>
        </ul>
    </body>
</html>

hab deinen Code ein wenig verändert einmal die width 100px eingefügt und die width 361px entfernt.

Ergebnis:



Uploaded with