TP: CSS-Only-Pulldown-Menü (mit JS-"Hilfsmotor" für IE) - Seite 2 - TP Hilfe Forum -- Anleitung - Tutorial

alf · 17.08.2004, 12:03

Hallo Leute ( seb ich hab's gefunden :-) ),

ich bin absoluter Neuling in Sachen CSS und ich finde dieses Menü
genial aber hat zufällig jemand ein Tip wie ich es so hinbekomme
dass es von oben nach unten öffnet ?

Ich habe mir Mal die URL -> http://www.alistapart.com/articles/dropdowns/
angechaut jedoch sind meine Englischkenntnisse nicht wirklich prikelnd.

Ich würde es gerne anpassen wie beo www.geo.de und auch eine
Halbtransparenz mit reinbauen ( eine Farbstufe reicht jedoch ).

Für eine Hilfestellung wäre ich dankbar.

Gruss Alf

paul123 · 17.08.2004, 15:11

Hi alf. Zur Transparenz gibts hier infos: http://www.css4you.de/trickkiste/tr00018.html (funkt. aber nicht überall; aber dort wo es nicht geht, ist eben der Hintergrund normal).

alf · 17.08.2004, 16:05

Danke ! Habe das Menü von geo.de mal auseinander genommen und auch soweit auf meine Seite gestellt ( und ein bissle was gelernt ) musste jedoch nun feststellen das das hier erwähnte (???) doch das BESTE ist, denn die benutzen für jeden Agent eine andere CSS ( bohhh wie umständlich ). Hast Du ne Idee wie ich das Menü in die Waagerechte bekomme ?

Gruss und Danke Alf

paul123 · 17.08.2004, 16:23

Hallo Alf. Also ich habe das noch nie selbst benutzt, aber es ist ja eine Liste; somit geht das per display:inline; für die Liste; hier ein beispiel: http://css.fractatulum.net/sample/menu3format.htm Das sollte als Denkhilfe schon ausreichen.

alf · 17.08.2004, 16:41

Da war ich mit dem zweiten Post wohl zu langsam :-)

Ich habe die HTML-Datei nun folgendermassen geändert :

Code:

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
       <title>Title here!</title>
    <link rel="stylesheet" type="text/css" href="dropdownmenu.css" />
</head>

<script type="text/javascript" src="css_dropdown.js"></script>

<body onload="enable_menues_for_ie();">
<table>
<tr>
<td>
 <ul id="nav1" class="dropdown">
  <li> <a href="#" class="has_submenu">first Level menu</a>
   <ul>
   <li><a href="#">second Level menu</a></li>
    <li><a href="#" class="has_submenu">second Level menu</a></li>
    <li><a href="#">second Level menu</a></li>
    <li><a href="#" class="has_submenu">second Level menu</a></li>
    <li><a href="#">second Level menu</a></li>
   </ul>
  </li>
 </ul>
</td>
<td>
 <ul id="nav2" class="dropdown">
  <li> <a href="#" class="has_submenu">first Level menu</a>
   <ul>
    <li><a href="#">second Level menu</a></li>
    <li><a href="#" class="has_submenu">second Level menu</a></li>
    <li><a href="#">second Level menu</a></li>
    <li><a href="#" class="has_submenu">second Level menu</a></li>
    <li><a href="#">second Level menu</a></li>
   </ul>
  </li>
 </ul>
</td>
</tr>

und die CSS-Datei müsste ich nun auf zwei Menüs anpassen
da ich ja dann auch z.B. verschiedene Farbe zuweisen möchte
also dann wohl 'nav1' und 'nav2' aber das zweite Menü funktioniert nicht.

Das zweite Menü 'nav2' zieht die richtigen Daten aus der CSS da eine Farbänderungen von nav2 sich nur auf das zweite Menü auswirkt

desweiteren habe ich in der CSS-Datei folgenden Punkt abgeändert

Code:

ul.dropdown ul, ul.dropdown ul ul, ul.dropdown ul ul ul
{
    display:none;
    position:absolute;
    top:0;
    left:0; -> vorher left:99%
}

LINK :

Vielleicht benutzt ja jemand das Menü und hat schon erfahrungen mit den Änderungen.

Gruss und Danke Alf

paul123 · 17.08.2004, 16:48

Zitat:

'nav2' aber das zweite Menü funktioniert nicht.

im Firefox schon; nur ist das etwas schmäler. Außerdem müsste das um eine Buttonhöhe navch unten da es den Hauptbutton verdeckt...

alf · 17.08.2004, 17:14

Habe mal ein drittes Menü dazu gefügt und ein bisschen Farbe reingebracht.
Das Dritte öffnet wieder aber das zweite absolut nicht, obwohl ich eigentlich alles richtig eingetragen habe ( jedenfalls nicht im IE )

Das mit dem verdeckten Button habe ich auch versucht zu ändern und dachte ich könne die Zeile :

Code:

ul.dropdown ul, ul.dropdown ul ul, ul.dropdown ul ul ul
{
    display:none;
    position:absolute;
    top:300; -> vorher top:0;
    left:0;
}

abändern aber da kann ich reinschreiben wass ich möchte überlappend ist es trotzdem ( s. obigen Link ).

Gruss und Danke Alf

paul123 · 17.08.2004, 17:33

Also... ich hab nur mal kurz angeschaut... aber soweit funkt. das irgendwie im IE und FF. Das die Änderung bei dir nicht zu sehen ist: dann mach mal die tabelle ringsum weg - dann siehste das die navi weiter unten ausklappt.

alf · 17.08.2004, 19:35

Mhhh sehr merkwürdig, ich habe nun mal den Border vom
mittleren Menüpunkt entfern kann aber nicht rausklapen
sehen ( IE 6.0 ). Desweiteren habe ich jetzt alles versucht
das ausgeklappte Menü weiter unten zu plazieren, damit
sich dieses nicht mit dem oberen Menüpunkt überlappt
-> OHNE ERFOLG ! Vielleicht kann sich ja mal der Poster von
dem Menü zu Wort melden, habe es inzwischen auch
Transparent gemacht, sieht schon genial aus, jedoch
finde ich es etwas langsam, selbst wenn ich alle Spielereien
entferne ( liegt vielleicht am ISDN )

Gruss und Danke Alf

paul123 · 17.08.2004, 19:51

also im IE6 klappts rechts und links auf; im FF klappen alle 3 auf. Überlappen tut sich nichts, nur ist das Menü was nach unten geht ca. 1-2 px nach rechts verschoben; ganz minimal.

PS.: Das wiederholende Hintergrundbild ist nicht sonderlich schön...

alf · 17.08.2004, 20:09

Richtig das erste und zweite gehen und das mittlere nicht.
Im Opera gehen alle Drei, wobei hier das Menü nur ausgelöst
wird, wenn man mit dem Curser unterhalb vom Menüpunkt geht.

Ich denke Mal, dass das mit dem mittleren Menü vielleicht
was mit dem

Code:

onload="enable_menues_for_ie();"

zu tun hat

Das mit dem Hintergund hatte ich nur gemacht um zu sehen
ob die Transparenz funktioniert.

Mit der Position des Untermenüs werde ich warscheinlich noch
ein bisschen zu tun haben.

Vielleicht fällt Dir oder jemanden anderen ja später spontan noch was ein an was es liegen könnte - trotzdem Danke !!!!!

Gruss Alf

Gruss und Danke Alf

alf · 18.08.2004, 16:12

KEINER EINE IDEE FÜR MICH ?

Gruss Alf

holunda · 18.08.2004, 16:52

hi alf,

ich verwende das menü in einer Webapplikation:

XHTML:

Code:

<div id="menu">
<ul id="nav" class="dropdown" style="padding:0;margin:0;">

<li><a href="http://poseidon/tm/start.php">START </a></li>
<li><a href="http://poseidon/tm/termine/index.php?day=18&month=08&year=2004&cal=day">TERMINE</a>
<ul>
<li><a href="http://poseidon/tm/termine/index.php?day=18&month=08&year=2004&cal=day">Tagesansicht</a></li>
<li><a href="http://poseidon/tm/termine/index.php?cal=week">Wochenansicht</a></li>
</ul>
</li>
<li><a href="http://poseidon/tm/adressen/index.php">ADRESSEN</a>
<ul>
<li><a href="http://poseidon/tm/adressen/index.php">&Uuml;bersicht</a></li>								<li><a href="#" class="has_submenu">Neu</a>

<ul>
<li><a href="http://poseidon/tm/adressen/ad_edit.php">Adresse</a></li>					</ul>
</li>
<li><a href="http://poseidon/tm/adressen/kategorie.php">Kategorie</a></li>				<li><a href="http://poseidon/tm/adressen/export.php">Export</a></li>			</ul>
</li>
<li><a href="#">BUCHHALTUNG</a>
<ul>
<li><a href="http://poseidon/tm/rechnungen/index.php" class="has_submenu">Rechnungen</a>
<ul>

<li><a href="http://poseidon/tm/rechnungen/newBarbeleg.php">Barbeleg erstellen</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">OPTIONEN</a>
<ul>
<li><a href="#">&Ouml;ffnungszeiten</a></li>				<li><a href="#">Feiertage</a></li>				<li><a href="#" class="has_submenu">Mandantenwechsel</a>
<ul>
<li><a href="http://poseidon/tm/optionen/change_mandant.php?mandant_id=9af65e7524f3cf3427528acad2eac67a">Heilmasseur</a></li>

</ul>
</li>
<li><a href="#" class="has_submenu">Buchungsjahr</a>
<ul>
<li><a href="http://poseidon/tm/optionen/change_b_jahr.php?jahr=2002">2002</a></li>
<li><a href="http://poseidon/tm/optionen/change_b_jahr.php?jahr=2003">2003</a></li>
<li><a href="http://poseidon/tm/optionen/change_b_jahr.php?jahr=2004">2004</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://poseidon/tm/logout.php">LOGOUT</a></li>

</ul>
</div>

CSS

Code:

ul.dropdown * ul {
	list-style: none;
	margin:0px;
	padding:0px;
	display:none;
	position:absolute;
}

ul.dropdown li {
	list-style:none;
	float:left;	
	font-weight:bold;
    	padding:2px; /* helps Opera < 7.5x with hover - do not remove! */
}

ul.dropdown li * li {
	float:none;
	background-color:#fff;
	font-size:10px;
	font-weight:normal;
	border-left:3px solid #cfcfcf;
	position: relative;     /* required? */
}

ul.dropdown ul * ul {
	left:98%;
	top:0;
	width:100%;
}

ul.dropdown a {
	display:block;
}


ul.dropdown ul * a {
	width:13em;
}

ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul {
	display:none;
}

ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul {
	display:block;
} 

ul.dropdown a.has_submenu {
	background:url(../../images/menu/open_submenu.gif) no-repeat right;
}

#nav {
	font:10px verdana;
    	background-color:#f9f9f9;
}

#nav a {
	color:#000;
	padding:3px;
	text-decoration:none;
}

#nav a:hover {
	background-color:#e4faec;
	color:#000;
}

#nav a.is_blind {
	color:#cfcfcf;
}

#nav a.is_blind:hover {
	color:#cfcfcf;
}

#nav ul {
	background-color:#fff;
	border:1px solid #999;
}

alf · 18.08.2004, 20:38

Super danke das klappt wunderbar :-)

Nur ich finde es recht langsam oder liegt das an meinem
altmodischen ISDN-Anschluss, denn auch meins ging sehr langsam
und das original geht recht schnell ..... ?!

Aber egal hauptsache es funzt * SUPER *

Gruss und Danke an Alle

Alf

jow · 19.08.2004, 23:47

hui,

danke für das Mneü seb, sowas suche ich schon seit einiger Zeit.