Antworten auf deine Fragen:
Neues Thema erstellen

Welche Navigation bevorzugt ihr?

  • Horizontal

    Stimmen: 10 62,5%
  • Vertikal

    Stimmen: 6 37,5%

  • Umfrageteilnehmer
    16

CSS Suckerfish Menü

sub_hero92

Web-Developer

Ich benutze das . Habe das auch soweit angepasst, aber leider habe ich noch keinen Möglichkeit gefunden, dass das hover Bild bei der Hauptleiste bleibt, wenn man über die Submenüs fährt. Kann mir jemand helfen? Egal ob CSS, JScript o.a.
PHP:
div#Rahmen {
    width: 47.1em;
    padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
  }
  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }
PHP:
  <div id="Rahmen"><ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>
    <li><a href="#Beispiel">Seite 2</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Seite 3</a></li>

    <li><a id="aktuell" href="#Beispiel">Seite 4</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a</a></li>
        <li><span>aktuelle Seite</span></li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Seite 5</a></li>
  </ul><div>
Danke im Vorraus.

Kann mir keiner helfen?
Das kann doch nicht unmöglich sein! :lol:
 
Zuletzt bearbeitet von einem Moderator:

Herr_D

offline

AW: CSS Suckerfish Menü

Vielleicht mal daran gedacht, was heute für'n Tag ist? Noch ein Push und der Thread landet im Trash...
 

leohh

CSS verliebt

AW: CSS Suckerfish Menü

gib dem body deiner jeweilligen unterseite eine id und sprich das jeweillige Menue, ueber diese id an
 

leohh

CSS verliebt

AW: CSS Suckerfish Menü

Gib dem Body deiner jeweilligen Unterseite eine id mit und fuer die entsprechenden Menuepunkte setzt du auch eine id oder klasse, was du eben fuer besser haelst.

dann sprichst du den aktuellen punkt ueber die body id an

HTML:
<style type="text/css">
#seite1 #nav #home, #seite2 #nav #about, #seite3 #nav #portfolio, #seite4 #nav #blog {
  color: orange;
}
</style>
</head>

<body id="seite1">
   <ul id="nav">
      <li id="home"><a href="#" title="home">Home</a></li>
      <li id="about"><a href="#" title="about">About</a></li>
      <li id="portfolio"><a href="#" title="portfolio">Portfolio</a></li>
      <li id="blog"><a href="#" title="blog">Blog</a></li>
   </ul>
   .................
</body>
Bei den jeweilligen Unterseiten zu about, portfolio und blog jetzt du nur noch im body die entsprechende id ( seite2, seite3, seite4 ) ein und du hast was du haben willst - zumindest hab ich das so verstanden. Adaptier es dir einfach auf dein Menue.

Und vllt. erklaerst du mir bei Gelegenheit mal, was die Umfrage soll
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.477
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben