[HaBo]

b4ck · 11.12.06, 22:14

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 :)

**Mackz** · 11.12.06, 23:05

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/n...ten.htm#modern (letztes Beispiel) <- etwas JS

Ich pers. habe das 1. genommen und für meine Bedürfnisse modifiziert.

Anzeige

- Anzeige -

LX · 12.12.06, 01:03

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 () 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.

.:L · 14.12.06, 18:20

Servus

Ich habs mit CSS in Z-Index gemacht....müsstest dann halt noch irgendwas zum closen hinmachen....

Foster · 12.05.07, 17:51

Hi, auch wenn das hier schon etwas älter ist:

Zitat:

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/n...ten.htm#modern (letztes Beispiel) <- etwas JS

Ich pers. habe das 1. genommen und für meine Bedürfnisse modifiziert.

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)?

**Mackz** · 12.05.07, 18:09

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.

Schau mal hier: http://www.webhits.de/deutsch/index..../webstats.html

LX · 12.05.07, 18:29

Zitat:

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)?

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

Foster · 12.05.07, 19:48

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</a> 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)?

**Mackz** · 12.05.07, 22:39

Zitat:

Original von Foster
und nur <li><a>Startseite</a> stehen lassen

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)

Anzeige

- Anzeige -

11.12.06, 22:14	#1 (permalink)
b4ck Registriert seit: 13.02.06 Likes: 1	Drop Down Menü(möglichst ohne JS) Anzeige 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 :)

11.12.06, 23:05	#2 (permalink)
Mackz Administrator Registriert seit: 02.10.01 Likes: 30	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/n...ten.htm#modern (letztes Beispiel) <- etwas JS Ich pers. habe das 1. genommen und für meine Bedürfnisse modifiziert. __________________ RL sux big time... auch 2012! Deleting pr0n is like killing your best friend [HaBo] bei Facebook - Werde Fan

12.12.06, 01:03	#3 (permalink)
LX Moderator Registriert seit: 14.02.06 Likes: 21	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. __________________ "Ever tried. Ever failed. No matter. Try again. Fail again. Fail better." - Samuel Beckett JS BB LX UP

14.12.06, 18:20	#4 (permalink)
.:L Senior Member Registriert seit: 05.05.06 Likes: 24	Servus Ich habs mit CSS in Z-Index gemacht....müsstest dann halt noch irgendwas zum closen hinmachen.... __________________ fat people are hard to kidnap

12.05.07, 18:09	#6 (permalink)
Mackz Administrator Registriert seit: 02.10.01 Likes: 30	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. Schau mal hier: http://www.webhits.de/deutsch/index..../webstats.html __________________ RL sux big time... auch 2012! Deleting pr0n is like killing your best friend [HaBo] bei Facebook - Werde Fan

12.05.07, 19:48	#8 (permalink)
Foster Registriert seit: 12.05.07 Likes: 0	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)?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Vertrag für Blackberry - möglichst günstig	3lan	Kaufberatung	2	09.05.09 07:57
IE-Drop-Down-Menü / hover-Problem	ghost	(Web-) Design und webbasierte Sprachen	0	03.09.07 12:21
Flash Drop-Down Menü Editor(help)	tim3	(Web-) Design und webbasierte Sprachen	10	30.06.05 08:09
Drop down menü	Gerda	(Web-) Design und webbasierte Sprachen	3	13.04.03 14:57
Drop-Down menü	mido	(Web-) Design und webbasierte Sprachen	2	01.02.03 11:15

[HaBo]

Drop Down Menü(möglichst ohne JS)