Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 25

Thema: CSS-Pulldown

  1. #1
    Forum Guru Avatar von The User
    Registriert seit
    28.10.2007
    Ort
    Zwischen Pazifik und Atlantik...
    Beiträge
    4.044
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS-Pulldown

    So, ich wollte das jetzt mal ausprobieren mit einem CSS-basierten Pulldown-Menu.
    Also:
    CSS:
    Code:
    div.submenu a {display: none;}
    div.navibutton a.main {height: 20px; font-size: 15px; width: 100px; background-color: #ff0000; }
    div.navibutton a.main:hover+div.submenu a, div.submenu a:hover+div.submenu a {display: block; height: 25px; font-size: 20px; width:100px; background-color: #0000ff;}
    HTML:
    Code:
    <div class="navibutton">
    Hallihallo
    <div class="submenu">
    Hallo
    Halli
    </div>
    </div>
    So und das "div.submenu a:hover+div.submenu a" funktioniert eben nicht.
    Es wirkt einfach nicht.
    Es soll dafür sorgen, dass das Menu nicht wieder weggeht, wenn man über die Sublinks fährt.
    Ohne das +div.submenu a wirkt es natürlich nur auf einen der Links, soll aber ja auf alle wirken.
    Hat jemand eine Idee, wie ich das ohne große Änderungen hinbekomme, auf das bisherige bin ich nämlich recht stolz.

    Viele liebe Grüße
    The User
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Eine solche Angabe mit Plus-Zeichen
    Code:
    div.submenu a&#58;hover+div.submenu a
    ist mir bisher nicht bekannt. Wenn ein Style für mehrere Klassen gelten soll, dann schreib es so mit Komma:
    Code:
    div.submenu a&#58;hover, div.submenu a
    Der Effekt ist aber auch nicht zufriedenstellend.
    Versuch es nach dieser Anleitung.

  3. #3
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    auch noch eine Möglichkeit:
    Code:
    <ul id="navi">[*]Link>
    <ul>[*]Link[*]Link[*]Link[/list]
    [/list]
    css:
    Code:
    #navi, #navi ul &#123;
    margin&#58;0;
    padding&#58;0;
    list-style&#58;none;
    &#125;
    
    #navi a &#123;
    display&#58; block;
    width&#58; 100px;
    &#125;
    
    #navi li &#123;
    float&#58; left;
    width&#58; 100px;
    &#125;
    
    #navi li ul &#123;
    position&#58; absolute;
    left&#58; -999em;
    &#125;
    
    #navi li&#58;hover ul &#123;
    left&#58;auto;
    &#125;
    von: www.htmldog.com

    Gruß,
    Jojo

  4. #4
    Forum Guru
    Themenstarter
    Avatar von The User
    Registriert seit
    28.10.2007
    Ort
    Zwischen Pazifik und Atlantik...
    Beiträge
    4.044
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Sejuma, dass es ausfährt, funktioniert ja, dank plus-Zeichen.
    http://www.drweb.de/trickkiste/tricks226.shtml
    Das Menu erscheint.
    Allerdings geht es wieder weg, wenn ich in das Submenu gehe.
    So jetzt habe ich etwas probiert:
    Code:
    div.navibutton a.main&#58;hover+div.submenu a, div.submenu a&#58;hover, div.submenu a&#58;hover+a &#123;display&#58; block; height&#58; 25px; font-size&#58; 20px; width&#58;100px; background-color&#58; #0000ff;&#125;
    Dann bleibt das Menü allerdings nur bis zum ersten Unterpunkt, beim zweiten hält es nicht mehr.

    Viele liebe Grüße
    The User

    Edit:
    Sejuma, Sejuma, ich hab´s geschafft:
    CSS:
    Code:
    li.submenu a &#123;display&#58; none;&#125;
    li.submenu &#123;list-style-type&#58; none;&#125;
    div.navibutton ul &#123;padding&#58; 0; margin&#58; 0;&#125;
    div.navibutton a.main &#123;height&#58; 20px; font-size&#58; 15px; width&#58; 100px; background-color&#58; #ff0000; &#125;
    div.navibutton a.main&#58;hover+ul li.submenu a, ul li.submenu&#58;hover a &#123;display&#58; block; height&#58; 25px; font-size&#58; 20px; width&#58;100px; background-color&#58; #0000ff;&#125;
    HTML:
    Code:
    <div class="navibutton">
    Hallihallo
    <ul>
    <li class="submenu">
    Hallo
    Halli
    [/list]
    </div>
    Halleluja!
    Es musste halt eine Hover-Bedingung fürs ganze Menü angegeben werden!
    Juhuu!

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Sieht auf den ersten Blick gut aus, muss ich mal näher unter die Lupe nehmen.
    Wie schaut's aber, wenn da noch mehrere Hauptlinks mit Unternavi daneben oder darunter kommen?

    Jojo's Lösung klappt m.W. im IE nicht, weil der Hovern bei li/ul nicht kann. Deshalb die Erweiterung wie bei drweg mit der csshover.htc

  6. #6
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von sejuma
    Jojo's Lösung klappt m.W. im IE nicht, weil der Hovern bei li/ul nicht kann. Deshalb die Erweiterung wie bei drweg mit der csshover.htc
    Oder mit nem kleinen Javascript für den ie6

    @The_User:
    Die display: none Technik hat allerdings einen Nachteil

  7. #7
    Forum Guru
    Themenstarter
    Avatar von The User
    Registriert seit
    28.10.2007
    Ort
    Zwischen Pazifik und Atlantik...
    Beiträge
    4.044
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Naja, so viele mit Screenreader gibt es nun auch wieder nicht, wichtiger sind eigentlich alte IE-Versionen und google-bots.
    Screenreader werden wohl auch eher auf spezielleren Seiten angewandt, unter Javascript hat man doch dasselbe Problem, und Bots sowie das Deaktivieren kommen noch dazu.

  8. #8
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

    Standard

    Zitat Zitat von The User
    Naja, so viele mit Screenreader gibt es nun auch wieder nicht, wichtiger sind eigentlich alte IE-Versionen und google-bots.
    Wenn Deine Eltern blind wären würdest Du es vermutlich anders sehen.... Wobei alte Menschen sollte eh nicht mehr ins Internet. Ist viel zu gefährlich.

  9. #9
    Forum Guru
    Themenstarter
    Avatar von The User
    Registriert seit
    28.10.2007
    Ort
    Zwischen Pazifik und Atlantik...
    Beiträge
    4.044
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard


    Ja komm, wie viele Blinde kennst du?

  10. #10
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

    Standard

    Eine und das reicht mir um so eine Einstellung scheiße zu finden.

Ähnliche Themen

  1. Pulldown Menü
    Von Gast im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 28.11.2006, 21:26
  2. Pulldown Menü
    Von Hilfe im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 28.11.2006, 21:22
  3. Problem mit Pulldown
    Von mlspider im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 11.11.2006, 13:15
  4. Pulldown-Menü
    Von Lauzijungs im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 08.08.2006, 16:28
  5. Pulldown? Menü für meine HP
    Von Basti im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 07.11.2005, 22:08

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •