Drop Down Menü(möglichst ohne JS)

b4ck

b4ck

0
Hi ich hätte gerne ein Dropdown Menü auf meiner Seit (in der Navi Leiste)
bisher sieht meine navi leist so aus:
HTML:
Code: 
<div id="navi">
<ul>
<li><a href="c++.php">C++</a></li>
<li><a href="php.php">PHP</a></li>
<li><a href="network_security.php">Network/Security</a></li>
<li><a href="http://hackerboard.de" target="_blank">HaBo</a></li>
</ul>
</div>

in der css file:
Code: 
div#navi {
	position: absolute;
	background-color: #D6D6D6;
	border: 1px solid navy;	
	width: 150px;
}
#navi ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#navi li {
	border-bottom: 1px solid navy;
}

#navi a {
	padding: 5px;
	text-decoration: none;
	display:block;
}
#navi a:hover {
	background-color: Black;
	color: white;
}

ich weis ich weis net sehr schön geschrieben aber es erfüllt den zweck
wie stelle ich es an das wenn man über zB C++ mit der Maus fährt andere Punkte nach unten hin geöffnet werden.

Ich denke ich werde nicht um JS herum kommen aber leider kann ich kein JS^^
Ich kann PHP/CSS/HTML also wenns ne andere lösung gibt als JS wäre ich euch sehr verbunden :)
 
Hi.
Zufällig hab ich sowas auch vor kurzer Zeit gesucht ;)
Möglich ist sowas ohne JS, nur durch Verwendung von CSS. Allerdings muss man dort dann einige Browser zu ihrem Glück zwingen. ;)

http://www.cssplay.co.uk/menus/drop_down.html <- ohne JS
http://www.cssplay.co.uk/menus/dropdown.html <- ohne JS
http://www.htmldog.com/articles/suckerfish/dropdowns/ <- etwas JS
http://www.alistapart.com/articles/horizdropdowns <- ohne JS
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern (letztes Beispiel) <- etwas JS

Ich pers. habe das 1. genommen und für meine Bedürfnisse modifiziert.
 
Blöderweise wirst du's ohne JavaScript nicht hinbekommen, das Ding einerseits im IE6 funktionsfähig zu bekommen und andererseits auch noch W3C-konformen Code zu haben. Das liegt daran, dass der IE Hover-Events ausschließlich auf Links kennt.

Einzige Möglichkeit ist, den Validator mit Conditional Comments (<!--[if IE]> ... <!--[endif]-->) entsprechend auszutricksen und dem IE so invaliden, aber für ihn funktionsfähigen Code unterzujubeln (Beispiel)... aber das sollte eigentlich auch nicht Sinn der Sache sein.
 
Servus

Ich habs mit CSS in Z-Index gemacht....müsstest dann halt noch irgendwas zum closen hinmachen....
 
Hi, auch wenn das hier schon etwas älter ist:

Hi.
Zufällig hab ich sowas auch vor kurzer Zeit gesucht
Möglich ist sowas ohne JS, nur durch Verwendung von CSS. Allerdings muss man dort dann einige Browser zu ihrem Glück zwingen.

http://www.cssplay.co.uk/menus/drop_down.html <- ohne JS
http://www.cssplay.co.uk/menus/dropdown.html <- ohne JS
http://www.htmldog.com/articles/suckerfish/dropdowns/ <- etwas JS
http://www.alistapart.com/articles/horizdropdowns <- ohne JS
http://de.selfhtml.org/css/layouts/navig...sten.htm#modern (letztes Beispiel) <- etwas JS

Ich pers. habe das 1. genommen und für meine Bedürfnisse modifiziert.
Zum Vergrößern anklicken....

Mit dem vorletzten hab ich mich gerade rumgeärgert. Ich bin zwar ziemlich unerfahren aber ich finde es ziemlich buggy, da es schon nicht mehr funktioniert, wenn man nur kleine Elemente verändert oder überflüssig scheinende entfernt.
Auf der Suche nach einer Alternative bin ich dann (mal wieder) auf euer Forum gestoßen und hab mir nun man die Zeit genommen mich zu registrieren.

Eine Frage hab ich aber auch noch:
Ursprünglich hatte ich auch ein JS-Dropdown Menü auf meiner Page; ein Bekannter hat mir aber davon abgeraten, da es gefährlich sei, wenn mein Besucher JS deaktiviert hat.
Ist da was dran oder haben sowieso etwa 99% der Surfer JS an (meine Zielgruppe ist der Otto-Normalverbraucher, also praktisch die breite Masse)?
 
Die breite Masse der Otto-Normal-User hat JS aktiviert. (Schon alleine deswegen weil es standardmäßig in allen Browsern aktiviert ist.) Und das wird auch so bleiben/die Prozentzahl sich vielleicht sogar erhöhen, denn ohne JS funktioniert der ganze Web2.0/Ajax/*blingbling* - "Quatsch" nicht oder nur teilweise und das will $user natürlich nicht. ;)

Hier im Habo haben 31% JS deaktiviert. Aber das ist nicht representativ, denn hier sind einige Sicherheits-Paranoide-Nerds unterwegs. :D


Schau mal hier: http://www.webhits.de/deutsch/index.shtml?/deutsch/webstats.html
 
Original von Foster
Ursprünglich hatte ich auch ein JS-Dropdown Menü auf meiner Page; ein Bekannter hat mir aber davon abgeraten, da es gefährlich sei, wenn mein Besucher JS deaktiviert hat.
Ist da was dran oder haben sowieso etwa 99% der Surfer JS an (meine Zielgruppe ist der Otto-Normalverbraucher, also praktisch die breite Masse)?
Zum Vergrößern anklicken....
JavaScript ist in vielen Firmen deaktiviert, Privatuser haben es meistens an.

Aber warum ein Risiko eingehen? JS kann man als Unterstützung betrachten, aber es sollte nie Voraussetzung sein. Sorge dafür, dass deine Seiten auch alle ohne JavaScript durchnavigiert werden können, dann hast du keine Probleme. Das ganze dann mittels JS etwas fluppiger machen kann man dann immernoch.

[EDIT]
Zu Mackz' Link: Ich weiß nicht, ob ich einer Statistik trauen möchte, die JavaScript mit Java durcheinanderbringt =)
 
Danke für die schnellen Antworten. Ich werde es jetzt trotdzem mit CSS machen.
Einen kleine Tipp brauch ich aber noch:
Ich verwende nun eine Nachfolgerversion dieses Menüs.
Da ich die Menüpunkte (die, die angezeigt werden, auch wenn man noch nicht mit der Maus drüber fährt) aber nicht als Links haben will, hab ich das href="..." einfach rausgenommen und nur <li><a>Startseite<!--[if IE 7]><!--></a><!--<![endif]--> stehen lassen.
Im IE geht dann aber das gesamte Submenü nicht mehr.
Gibt es da noch einen anderen Weg den Effekt zu erzielen, dass beim Klick auf den Link nichts geladen wird, alle Submenüs aber trotzdem funktionieren, ohne dass die Hälfe des Code wieder umgeschrieben werden muss (was der Fall wäre, wenn ich das <a> mit löschen würde)?
 
Original von Foster
und nur <li><a>Startseite<!--[if IE 7]><!--></a><!--<![endif]--> stehen lassen
Zum Vergrößern anklicken....
Welchen Sinn soll das machen? Kein Wunder das das Menü nicht mehr geht, wenn du im IE7 das Endtag entfernst. Davon abgesehen brauchst du für den IE7 eigentlich garkeine Browserweiche sondern für den IE6.

Mach doch einfach:
<a class="inner" href="#" title="bla">bla</a>

(oder halt class="outer" je nachdem wo du das einsetzt)
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben