tutorials.de Buch-Aktion 05/2012
Like Tree2Danke
  • 1 Beitrag von djheke
  • 1 Beitrag von hela
ERLEDIGT
NEIN
ANTWORTEN
6
ZUGRIFFE
449
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 24.10.11 11:00 #1
    Avatar von _opiWahn_
    _opiWahn_ _opiWahn_ ist offline Mitglied Bronze
    Registriert seit
    Jan 2011
    Ort
    zw. KL und MA
    Beiträge
    39
    Hallo,

    ich hab hier ein sehr schönes DropDownMenue, das fast schon zum Einbauen fertig ist - aber eben nur fast.
    Wo bzw. wie muß ich das CSS anpassen um dem ganzen auch noch Unterpunkte bei zu bringen, die sich dann seitlich daneben zeigen bzw runter klappen.

    PHP-Code:
    <html>
    <    head>
        <    title></title>
        <    link rel="stylesheet" href="menu_style.css" type="text/css" />
    </    head>
    <    body>
        <    div class="menu">
            <    ul>
                <    li><a href="#" >Home</a></li>
                <    li><a href="#" id="current">Seite 1</a>
                    <    ul>
                        <    li><a href="#">Seite 1.1</a>
                                             <    ul>
                               <    li><a href="#">Seite 1.1.1</a></li>
                               <    li><a href="#">Seite 1.1.2</a></li>
                                            </    ul>
                                            </    li>
                        <    li><a href="#">Seite 1.2</a>
                                             <    ul>
                               <    li><a href="#">Seite 1.2.1</a></li>
                               <    li><a href="#">Seite 1.2.2</a></li>
                                            </    ul>
                                            </    li>
                        <    li><a href="#">Seite 1.3</a>
                                             <    ul>
                               <    li><a href="#">Seite 1.3.1</a></li>
                               <    li><a href="#">Seite 1.3.2</a></li>
                                            </    ul>
                                            </    li>
                        <    li><a href="#">Seite 1.4</a></li>
                   </    ul>
                  </    li>
                  <    li><a href="#">Seite 2</a>
                              <    ul>
                        <    li><a href="#">Seite 2.1</a></li>
                        <    li><a href="#">Seite 2.2</a></li>
                        <    li><a href="#">Seite 2.3</a></li>
                        <    li><a href="#">Seite 2.4</a></li>
                             </    ul>
                        </    li>
                <    li><a href="kontaKt.html">Kontakt</a></li>
            </    ul>
        </    div>

    </    body>
    </    html> 
    PHP-Code:
    .menu{
            border:none;
            border:0px;
            margin:0px;
            padding:0px;
            font-family:verdana,geneva,arial,helvetica,sans-serif;
            font-size:14px;
            font-weight:bold;
            color:8e8e8e;
        }
    .    menu ul{
            background:url(images/menu-bg.gif) top left repeat-x;
            height:43px;
        list-    style:none;
            margin:0;
            padding:0;
        }
        .    menu li{
                float:left;
                padding:0px 8px 0px 8px;
            }
        .    menu li a{
                color:#666666;
                display:block;
                font-weight:bold;
                line-height:43px;
                padding:0px 25px;
                text-align:center;
                text-decoration:none;
            }
            .    menu li a:hover{
                    color:#000000;
                    text-decoration:none;
                }
        .    menu li ul{
                background:#e0e0e0;
                border-left:2px solid #f68618;
                border-right:2px solid #f68618;
                border-bottom:2px solid #f68618;
                display:none;
                height:auto;
                filter:alpha(opacity=95);
                opacity:0.95;
                position:absolute;
                width:225px;
                z-index:200;
                /*top:1em;
            /*left:0;*/
                }
        .    menu li:hover ul{
                display:block;
            }
        .    menu li li {
                display:block;
                float:none;
                padding:0px;
                width:225px;
            }
        .    menu li ul a{
                display:block;
                font-size:12px;
                font-style:normal;
                padding:0px 10px 0px 15px;
                text-align:left;
            }
            .    menu li ul a:hover{
                    background:#949494;
                    color:#000000;
                    opacity:1.0;
                    filter:alpha(opacity=100);
                }
        .    menu p{
                clear:left;
            }    
        .    menu #current{
                background:url(images/current-bg.gif) top left repeat-x;
                color:#ffffff;
                } 
    Danke im Voraus

    Grüße
    _opiWahn_
    Angehängte Dateien Angehängte Dateien
    Geändert von _opiWahn_ (24.10.11 um 21:32 Uhr) Grund: Quellcode als zip angehängt.
     
    Zitieren Zitieren
  2. 24.10.11 20:24 #2
    djheke djheke ist offline Mitglied Silber
    Registriert seit
    Sep 2011
    Beiträge
    96
    Schau mal hier
    http://www.gipspferd.de/css/anleitung/a20/a20.php
    _opiWahn_ bedankt sich. 
    Zitieren Zitieren
  3. 24.10.11 21:30 #3
    Avatar von _opiWahn_
    _opiWahn_ _opiWahn_ ist offline Mitglied Bronze
    Registriert seit
    Jan 2011
    Ort
    zw. KL und MA
    Beiträge
    39
    Hallo djheke,

    vielen Dank für deinen Tipp. Auch wenn's in diesem Beispiel um ein vertikales Menue geht, kann ich wenigstens mal eine grundsätzliche Richtung erkennen.
    Im Prinzip bin ich, glaub ich, garnicht soweit vom Ziel entfernt. Denoch bleibt mir die 3. Ebene sichtbar auf der Zweiten liegen. Ziel ist aber, daß Sie genau wie bei dem Beispiel erst beim hover sichtbar wird. Ich habe mir schon einige Teile angeschaut, aber offensichtlich gibt es hierfür keine Standardlösung. Ich habe, etwas verwirrt, schon mindestens 3-4 relativ unterschiedliche gesehen.
     
    Zitieren Zitieren
  4. 25.10.11 01:28 #4
    Avatar von hela
    hela hela ist offline Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Zitat Zitat von _opiWahn_ Beitrag anzeigen
    ... Ich habe mir schon einige Teile angeschaut, aber offensichtlich gibt es hierfür keine Standardlösung. Ich habe, etwas verwirrt, schon mindestens 3-4 relativ unterschiedliche gesehen.
    Hallo,
    es gibt m.E. auch keine Standardlösung. Aber sieh dir mal folgendes an:
    Create a multilevel Dropdown menu with CSS and improve it via jQuery

    Die Formatierung der Liste wird schrittweise erklärt und die jQuery-Animation kannst du problemlos weglassen.
    Vielleicht hilft dir das weiter.
    _opiWahn_ bedankt sich. 
    Zitieren Zitieren
  5. 25.10.11 09:15 #5
    Avatar von _opiWahn_
    _opiWahn_ _opiWahn_ ist offline Mitglied Bronze
    Registriert seit
    Jan 2011
    Ort
    zw. KL und MA
    Beiträge
    39
    Moinsen,

    mit der Ersetzung ab Zeile 56 im CSS

    .menu li:hover > ul{
    display:block;
    }
    .menu li li ul {
    position: absolute;
    top: 0;
    left: 100%;
    }

    und der Reduzierung der Breite in Zeile 50 auf 125px bin ich dem ganzen schon deutlich näher gekommen.
    Ein kleiner Wurm scheint noch drin zu sein:
    Ich komme mit der Maus nicht auf die 3. Ebene. Sobald ich versuche rüber zu gehen blendet sich das Fenster wieder aus!?

    Grüße
    _opiWahn_
     
    Zitieren Zitieren
  6. 25.10.11 14:48 #6
    djheke djheke ist offline Mitglied Silber
    Registriert seit
    Sep 2011
    Beiträge
    96
    Sorry erstmal. Ich dachte du möchtest eine vertikale navi. Nun hast du hier eine horizontale
    http://www.gipspferd.de/forumhilfe/h...%20navigation/
    Dies navi ist natürlich noch ausbaufähig.
    Viel Spaß damit. Achso, für den IE kleine 7 brauchst du noch JS
    Dein Problem mit dem Ausblenden der Listenpunkte beim Hovern besteht im IE 7 und ist im Beispiel behoben.
    Geändert von djheke (25.10.11 um 16:25 Uhr)
     
    Zitieren Zitieren
  7. 25.10.11 22:11 #7
    Avatar von hela
    hela hela ist offline Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Zitat Zitat von _opiWahn_ Beitrag anzeigen
    ... Wo bzw. wie muß ich das CSS anpassen um dem ganzen auch noch Unterpunkte bei zu bringen, die sich dann seitlich daneben zeigen bzw runter klappen...
    Ich habe das CSS vom o.g. Link mal auf dein (leicht modifiziertes) HTML angepasst. Das Klassenattribut "menu" kannst du dem ersten UL-Element deiner Menüliste geben. Der umhüllende DIV-Block liefert keinen entscheidenden Beitrag zum Menü, lediglich Formatierungen, die das Menü normalerweise aus dem Wurzel- oder BODY-Element erben würde.
    Angenommen dein HTML-Quelltext sieht so aus:
    HTML-Code:
    <body>
  <div class="menuWrapper">
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <!-- usw. usf. -->
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </div>
</body>
    Dann könntest du die Stylesheets dazu auch so gestalten:
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

    div.menuWrapper {
  margin: 0;
  border: 0;
  padding: 0;
  font-family: verdana,geneva,arial,helvetica,sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #888;
}
 
/*******************************************************************
 * Globale Listenformatierung:
 * Alle initialen Listenzeichen und Einrückungen entfernen,
 * "line-height" wird vererbt und bestimmt die Höhe der LI-Elemente.
 *******************************************************************/
ul.menu,
ul.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 43px;
}
 
/*************************************************************************
 * Formatierung der horizontal angeordneten Listenpunkte (1. Listenebene):
 *************************************************************************/
ul.menu {
  height: 43px;
  background: url(images/menu-bg.gif) top left repeat-x;
}
ul.menu li {
  float: left;
  position: relative;
  margin: 0;
  padding: 0; /*padding: 0 8px;*/
}
 
/**************************************
 * Globale Formatierung der A-Elemente:
 **************************************/
ul.menu li a {
  display: block;
  padding: 0 25px;
  text-decoration: none;
  font-weight: bold;
  color:#666;
}
ul.menu li a:hover {
  color: #000;
}
 
/*************************************************************************
 * Formatierung der vertikal angeordneten Listenpunkte (ab 2. Listenebene):
 **************************************************************************/
ul.menu ul {
  display: none;
  position: absolute;
  top: 43px;  /* = Höhe des horizontalen Menübalkens */
  left: 0;  /* urspr. 8px; */
  border: 2px solid #f68618;
  border-top: 0;
  background: #ddd;
/*
  opacity: 0.95;
  filter:alpha(opacity=95);
*/
}
ul.menu ul a {
  width: 225px;
  border-top: 1px solid #fff;
  font-size: 12px;
  font-style: normal;
  text-align: left;
}
ul.menu ul li:first-child > a {
  border-top: 2px solid #f68618;
}
ul.menu ul a:hover{
  background: #949494;
/*
  opacity:1.0;
  filter:alpha(opacity=100);
*/
}
 
/********************************************************
 * TOP-Wert ab 3. Listenebene zurücksetzen und Einrückung
 * um die Breite der vertikal angeordneten LI-Elemente:
 ********************************************************/
ul.menu li ul ul {
  top: 0;
  left: 225px;
  margin-left: 50px;  /* = Summe der PADDING-Werte im A-Element */
}
 
/******************
 * HOVER-Verhalten:
 ******************/
ul.menu li:hover ul ul,
ul.menu li:hover ul ul ul,
ul.menu li:hover ul ul ul ul {
  display: none;
}
ul.menu li:hover ul,
ul.menu li li:hover ul,
ul.menu li li li:hover ul,
ul.menu li li li li:hover ul {
  display: block;
}
 
/*********************
 * CURRENT-Markierung:
 *********************/
ul.menu #current{
  background: url(images/current-bg.gif) top left repeat-x;
  color: #fff;
}
    Bedingung für die Funktion ist, dass jedes LI-Element der Liste nur ein A-Element und ggf. ein UL-Element für Submenüs als Kindelement(e) hat. Würde man also in LI-Elementen, die Submenüs haben, auf das A-Element verzichten und statt dessen einfach nur Text dort einfügen, dann funktioniert das hier gezeigte nicht mehr und man müsste sich was anderes einfallen lassen.

    Funktioniert bei mir im aktuellen Firefox, Chrome, Opera und IE7+8.
     
    Zitieren Zitieren
« Bei Zoom Elemente nicht verschieben | problem mit totaler zentrierung »

Ähnliche Themen

  1. Dropdownmenue Item Label und nicht value
    Von Jayjoe im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 01.08.06, 21:43
  2. DropDownMenue bei Hover öffnen?!
    Von melistik im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 26.11.04, 03:07
  3. DropDownMenue bei Hover öffnen?!
    Von melistik im Forum HTML & XHTML
    Antworten: 0
    Letzter Beitrag: 24.11.04, 16:37
  4. Eingabefelder ueber DropDownmenue fuellen
    Von GERPitBull im Forum Javascript & Ajax
    Antworten: 0
    Letzter Beitrag: 25.04.04, 11:18
  5. Variablenübergabe aus DropdownMenue
    Von faBB im Forum PHP
    Antworten: 2
    Letzter Beitrag: 26.06.02, 16:25