links sichtbar/unsichtbar machen

zaikun · 9 Juni 2010

Guten Abend alle zusammen,

folgende Situation:

Ich habe eine website mit 'nem menü.

bei einem punkt sollen beim mouseover unterpunkte angezeigt werden, die gewisse seiten verlinken.

diese sollen aber nur dann angezeigt und aktiv werden, wenn ich mit der maus drüber gehe.
optional können die links auch noch 3 sekunden aktiv sein, nachdem die maus wieder über den oberpunkt verschwindet.

wahrscheinlich wäre die einfachste methode ein flash-drop-down-menü zu erstellen, aber ich hab's bis jetzt leider nicht schaffen können trotz tutorials.

meine frage an euch:

wie kann ich es sonst noch am besten umsetzen?

ich möchte halt, dass beim mouseover erst die vier unterpunkte erscheinen, auf die ich jeweils klicken kann und dann zu einer website verlinkt werde.

ich bedanke mich schonmal für eure hilfe.

vitus37 · 9 Juni 2010

Hallo,

die Flashvariante ist nicht zu empfehlen, da bei Non-Flash-Benutzern somit die ganze Website nicht mehr navigierbar ist.

Die Mouseover+3sec-Variante ist mit JavaScript umsetzbar, jedoch bei Non-JavaScipt-Usern unbrauchbar.

Die beste Lösung ist die Pseudoklasse hover in CSS. Hier dürfte sich mit den Stichworten "css ausklapp navigation hover" in Google schnell etwas finden lassen.

zaikun · 9 Juni 2010

also habe mir da schon einiges angeschaut.
hab es jetzt so gelöst, dass ich mit css ne dynamische navigationsleiste einblende.
mein problem ist noch:

wenn ich mit der maus über den oberpunkt gehe, dann öffnet er mir die unterpunkte untereinander (unter dem oberpunkt)
ich möchte jedoch, dass die die punkte unter dem oberpunkt NEBENeinander auftreten bzw. aufpopen, so wie hier:

Men

klickt da mal auf den menüpunkt "cateringangebot"

so soll das dann erscheinen, bloß dass der mausklick dann überfällig ist und die menüpunkte beim mouseouver erscheinen.

vitus37 · 10 Juni 2010

Ohne einen Link zur Seite oder zumindestens den Quellcode können wir hier leider nur wenig helfen... ;)
Also bitte posten!

Im Prinzip musst du die Menüpunkte lediglich links floaten.

zaikun · 12 Juni 2010

wie genau lasse ich denn die punkte links floaten?

vitus37 · 13 Juni 2010

Indem du den LI-Elementen der Linkliste in CSS ein "float: left;" verpasst.
float: Elemente umfließen lassen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

zaikun · 15 Juni 2010

Code:

<style type="text/css">
  body {
    font: normal 16px Arial;
    color: black; background-color: #8d8d8d;
  }

  div#Rahmen {
    width: 1120px;
    padding: 0em;
    border: 0px solid black;
    background-color: red;        // Farbe des Rahmens
  }
  * 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.2em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: 0.2em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: 0.2em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.2em;
    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:black; 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: 7.6em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: 
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: #ffffca; background-color: #8d8d8d;            // Hintergrund von den einzelnen Punkten
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: black; background-color: #ffffca;            // Schrift beim Mouse-Over und // Hintergrund beim Mouve-Over
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: #8d8d8d; background-color: #8d8d8d;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: #8d8d8d;
  }

</style>
</head>
<body>
<div id="Rahmen">
<ul id="Navigation">
    <li><a href="index2.html" target="main">Home</a></li>

    <li><a href="ueber_uns.html" target="main">Über Uns</a></li>

    <li><a href="location.html" target="main">Location</a></li>

    <li><a href="catering.html" target="main">Cateringangebot</a>

      <ul>
        <li><a href="kl_buffet.html" target="main">Buffet</a></li>
        <li><a href="fingerfood.html" target="main">Fingerfood Manufaktur</a></li>
        <li><a href="bbq.html" target="main">Barbecue Express</a></li>
        <li><a href="sushibar.html" target="main">Sushibar</a></li>
        <li><a href="cocktailbar.html" target="main">Cocktailbar</a></li>
        <li><a href="mobilecatering.html" target="main">Mobilecatering</a></li>
      </ul>

    </li>

    <li><a href="kontankt.html" target="main">Kontakt</a></li>

    <li><a href="impressum.html" target="main">Impressum</a></li>

    <li><a href="links.html" target="main">Links und Partner</a></li>

  </ul><div>

das is der quelltext.
wo genau füge ich da das float ein?

vitus37 · 15 Juni 2010

Code:

  ul#Navigation li ul li {
    float: [COLOR="Red"]left[/COLOR];
    display: block;
    margin-bottom: 0.2em;
  }

Ersetze die entsprechende Stelle damit. Das dürfte passen.

zaikun · 15 Juni 2010

hat nichts gebracht, da hatte ich das vorher schon versucht gehabt

zaikun · 16 Juni 2010

hat keiner sonst eine idee?

vitus37 · 16 Juni 2010

Zweiter Anlauf:
Habe nun ein wenig damit herumgespielt und bin zu einem Ergebnis gekommen.

Code:

  body {
    font: normal 16px Arial;
    color: black; background-color: #8d8d8d;
  }

  div#Rahmen {
    width: 1120px;
    padding: 0em;
    border: 0px solid black;
    background-color: red;        // Farbe des Rahmens
  }
  * 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.2em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: 0.2em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: 0.2em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;[COLOR="Red"][b]
    width: 1000px; // ändern, je nach Breite der Unternavigation
    margin-left: -500px; // ändern, wie weit die Unternav nach links verschoben sein soll.[/b][/COLOR]
    position: absolute;
    top: 1.6em; left: -0.2em;
    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:black; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {[B]
    [COLOR="Red"]float: left; // wurde geändert, so lassen.[/COLOR][/B]
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 7.6em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: 
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: #ffffca; background-color: #8d8d8d;            // Hintergrund von den einzelnen Punkten
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: black; background-color: #ffffca;            // Schrift beim Mouse-Over und // Hintergrund beim Mouve-Over
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: #8d8d8d; background-color: #8d8d8d;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: #8d8d8d;
  }

zaikun · 16 Juni 2010

also will nicht nerven oder so, aber unter firefox passiert da gar nichts, aus heftiges flackern.
im IE8 passiert da gar nichts bei mouse over.

hast du noch was am quellcode verändert?
oder habe ich i.wo nen tippfehler?

hier nochmal der quellcode:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Event & Food Company</title>
<style type="text/css">
body {
    font: normal 16px Arial;
    color: black; background-color: #8d8d8d;
  }

  div#Rahmen {
    width: 1120px;
    padding: 0em;
    border: 0px solid black;
    background-color: red;        // Farbe des Rahmens
  }
  * 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.2em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: 0.2em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: 0.2em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    width: 800px; // ändern, je nach Breite der Unternavigation
    margin-left: 200px; // ändern, wie weit die Unternav nach links verschoben sein soll.
    position: absolute;
    top: 1.6em; left: -0.2em;
    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:black; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: left; // wurde geändert, so lassen.
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 7.6em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: 
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: #ffffca; background-color: #8d8d8d;            // Hintergrund von den einzelnen Punkten
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: black; background-color: #ffffca;            // Schrift beim Mouse-Over und // Hintergrund beim Mouve-Over
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: #8d8d8d; background-color: #8d8d8d;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: #8d8d8d;
  }

</style>
</head>
<body>
<div id="Rahmen">
<ul id="Navigation">
    <li><a href="index2.html" target="main">Home</a></li>

    <li><a href="ueber_uns.html" target="main">Über Uns</a></li>

    <li><a href="location.html" target="main">Location</a></li>

    <li><a href="catering.html" target="main">Cateringangebot</a>

      <ul>
        <li><a href="kl_buffet.html" target="main">Buffet</a></li>
        <li><a href="fingerfood.html" target="main">Fingerfood Manufaktur</a></li>
        <li><a href="bbq.html" target="main">Barbecue Express</a></li>
        <li><a href="sushibar.html" target="main">Sushibar</a></li>
        <li><a href="cocktailbar.html" target="main">Cocktailbar</a></li>
        <li><a href="mobilecatering.html" target="main">Mobilecatering</a></li>
      </ul>

    </li>

    <li><a href="kontankt.html" target="main">Kontakt</a></li>

    <li><a href="impressum.html" target="main">Impressum</a></li>

    <li><a href="links.html" target="main">Links und Partner</a></li>

  </ul></div>

</body>
</html>

mermshaus · 17 Juni 2010

CSS-Kommentare müssen so aussehen: /* Der Kommentar */. In dieser Zeile ist etwas falsch: text-decoration: none; font-weight:.

Code:

  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }

Sowas kannst du dir sparen, wenn du den Standardsmode nutzt (scheinst du zu tun, siehe Link unten) und -- ich rate das jetzt so halb -- keine Browser vor dem IE6 mehr unterstützen möchtest (ergibt keinen Sinn mehr heutzutage).

Also, anders ausgedrückt: Wenn du nicht zufällig für das Intranet einer Firma entwickelst, die aus irgendeinem unerfindlichen Grund auf dem IE5.5 festgefroren ist, vergiss, dass solche Hacks und die Notwendigkeit für solche Hacks existieren. :)

Mir fällt gerade auf, dass du den Code vielleicht von Google hast und ich mir das hätte sparen können. Na ja, egal. ;)

- DOCTYPE-Switch und seine Auswirkungen

Zum Problem:

Ja, ehrlichgesagt ist das im Regelfall nichts, was man selbst schreibt, weil es schwierig ist, es browserübergreifend korrekt hinzubekommen und jede Methode ihre eigenen Nachteile hat. CSS-:hover-Styles für Elemente außer <a> werden etwa mindestens im IE6 ignoriert.

Ich habe mal meine eigenen Ansätze hier aus dem Forum gegooglet:

- Nur CSS: http://www.html.de/javascript-ajax-und-dhtml/31162-navi-mit-subnavi.html#post234444
- JavaScript: http://www.html.de/html-und-xhtml/32653-onmouseover-showsub.html#post244346

Na ja, wie gesagt, such dir lieber aus dem Netz eine erprobte Variante. :) (Am besten JavaScript mit ordentlicher Fallback-Lösung, falls JavaScript nicht aktiviert ist.)

zaikun · 17 Juni 2010

so, hab's nun endlich wie folgt gelöst:

Code:

<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Event & Food Company</title>

        <style type="text/css">
            /**
             * new clearfix
             *
             * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
             */
            .clear:after {
                visibility: hidden;
                display: block;
                font-size: 0;
                content: " ";
                clear: both;
                height: 0;
                }
            * html .clear             { zoom: 1; } /* IE6 */
            *:first-child+html .clear { zoom: 1; } /* IE7 */

            * { margin: 0; padding: 0; }

            body { margin: 0px; padding: 0px; }

            #menu, #menu ul {
                list-style: none;
            }

            #menu {
                position: relative;
            }

            #menu li {
                float: left;
                width: 127px;
                border: 0em solid black;        
                height: 42px;                
                background: #8d8d8d;
            }

            #menu li ul {
                display: none;
                background: #ffffde;
                width: 762px;
            }

            #menu li:hover ul, #menu li.active ul {
                display: block;
                position: absolute;
                top: 45px;
                left: 0px;                
            }

            #menu li:hover {
                background: #8d8d8d;
            }

            #menu li:hover ul {
                z-index: 1;
            }

            #menu li.active {
                background: #8d8d8d;
            }

        </style>
</head>
<body>
    <font face=Arial size=3 color=#ffffde>
    <div id="Layer11" align="center">


        <ul id="menu" class="clear">
            <li class="clear"><a href="index2.html" target="main">Home</a>

            </li>
            <li><a href="ueber_uns.html" target="main">&Uuml;ber Uns</a>

            </li>
            <li class="clear"><a href="location.html" target="main">Location</a>

            </li>
            <li>Cateringangebot
                <ul class="clear">
                    <li><a href="kl_buffet.html" target="main">Buffet</a></li>
                    <li><a href="fingerfood.html" target="main">Fingerfood Manufaktur</a></li>
                    <li><a href="bbq.html.html" target="main">Barbecue Express</a></li>
                    <li><a href="sushibar.html" target="main">Sushibar</a></li>
                    <li><a href="cocktailbar.html" target="main">Cocktailbar</a></li>
                    <li><a href="mobilecatering.html" target="main">Mobilecatering</a></li>
                </ul>
            </li>
            <li class="clear"><a href="kontakt.html" target="main">Kontakt</a>

            </li>
            <li class="clear"><a href="impressum.html" target="main">Impressum</a>

            </li>
            <li><a href="links.html" target="main">Links und Partner</a>

            </li>
        </ul>

    </body>

</html>

zwei kleinigkeiten hätte ich noch zu klären:
1. kann ich der hintergrundfarbe der "unterpunkte" (ausschließlich die der unterpunkte) eine andere farbe verpassen als den oberpunkten?

2. kann ich einstellen, dass das aufpopende untermenü nicht direkt verschwindet, wenn ich mit der maus langsam runter gehe von dem oberpunkt in richtung unterpunkt?

ansonsten: besten dank!
habt mir sehr geholfen.

vitus37 · 18 Juni 2010

Code:

            #menu li ul {
                display: none;
                background: [COLOR="Blue"]#ffffde[/COLOR];
                width: 762px;
            }

Das blaue durch den Hexadezimal-Code der Farbe ersetzen, welche du für das Untermenü möchtest.

Frage zwei:
Das ist nur mit JavaScript möglich, nicht mit CSS.

zaikun · 19 Juni 2010

hm das hatte ich probiert gehabt, aber nimmt er seltsamerweise nicht

evtl. an zwei stellen den wert ändern?

vitus37 · 19 Juni 2010

Evtl. musst du noch diesen Code hinzufügen:

Code:

            #menu li ul li {
                background: #ffffde; /* Farbe ändern */
            }

links sichtbar/unsichtbar machen

zaikun

Neues Mitglied

vitus37

Senior HTML'ler

zaikun

Neues Mitglied

vitus37

Senior HTML'ler

zaikun

Neues Mitglied

vitus37

Senior HTML'ler

zaikun

Neues Mitglied

vitus37

Senior HTML'ler

zaikun

Neues Mitglied

zaikun

Neues Mitglied

vitus37

Senior HTML'ler

zaikun

Neues Mitglied

mermshaus

Senior HTML'ler

zaikun

Neues Mitglied

vitus37

Senior HTML'ler

zaikun

Neues Mitglied

vitus37

Senior HTML'ler

Neueste Beiträge