[DHTML] Floating Navigation ohne Flash

value · 10. Februar 2004

Hi, Suchfunktion hat nichts ausgespuckt, also hier mein Thread

Ich möchte gerne eine horizontale Navigation, zb. So wie hier bei FB mit News Feed / 7 Tage-News / ...
und wenn ich mit der Maus über eines dieser Felder fahre, darunter eine weitere, vom jeweiligen Hauptmenüpunkt abhängige neue Navigationsleiste ( optisch ein Klon von der oberen, fixen Leiste ) die wieder verschwindet wenn ich mit der Maus wegfahre, bzw. sich an den angewählten Menüpunkt der fixen Leiste anpasst.

Das ganze halt ohne das sich bei jedem MouseOver die Seite neu läd, was wohl eigentlich klar sein dürfte

Ist das ohne Flash realisierbar ?

Ich hoffe ihr habt verstanden was ich meine und gleich ein paar konstruktive Vorschläge

Gruß value

migl · 10. Februar 2004

Meinst du so *klick*?

value · 10. Februar 2004

migl schrieb:
Meinst du so *klick*?

Du hast den Nagel auf den Kopf getroffen

Also, ich kopier mir das einfach mal raus und versuch draus schlau zu werden, wobei die ganze Navi 100 Zeilen Code hat.

Aber wenn jemand noch beschreiben möchte wie das Ganze funktioniert sag ich auch nicht nein

migl · 10. Februar 2004

schnelle erklärung: sind versteckt div boxen (visibility:hidden) mit dem inhalt von den menüs, die absolut positioniert werden, und dann über js sichtbar gemacht werden, soblad man über die beschreibung (onMouseover) geht.

edit: ja, des teil is ganz schön lang

wird aus ner db geholt

value · 10. Februar 2004

PHP:

</div><div align="left" class=Menu id=secdiv_1313 onMouseOver=TimerStop(); style="height: 0px; Z-INDEX: 7; VISIBILITY: hidden;background:transparent;POSITION: absolute;" onMouseOut=TimerStart(); name="secdiv_1313"> 
<table class=Menu style='margin-left:130px;height: 0px; border-left: #73A6CC 1px solid;border-right: #73A6CC 1px solid;border-bottom: #73A6CC 1px solid; border-collapse:collapse;' cellspacing=0 cellpadding=3 border=0><tbody><tr><td><a class="secnav" onMouseOver="shownavThird('thirddiv_131'); TimerStop();" href="?abt=fbj&site=news&PHPSESSID=dfafd2f53eb3a872ac7390eed2945a11">News</a></td></tr><tr><td><a class="secnav" onMouseOver="shownavThird('thirddiv_1321'); TimerStop();" href="?abt=fbj&site=abt&PHPSESSID=dfafd2f53eb3a872ac7390eed2945a11">Abteilungsleitung</a></td></tr><tr><td><a class="secnav" onMouseOver="shownavThird('thirddiv_1349'); TimerStop();" href="?abt=fbj&site=training&PHPSESSID=dfafd2f53eb3a872ac7390eed2945a11">Trainingszeiten</a></td></tr><tr><td><a class="secnav" onMouseOver="shownavThird('thirddiv_1352'); TimerStop();" href="?abt=fbj&site=tabellen&PHPSESSID=dfafd2f53eb3a872ac7390eed2945a11">Ergebnisse & Tabellen</a></td></tr><tr><td><a class="secnav" onMouseOver="shownavThird('thirddiv_1338'); TimerStop();" href="?abt=fbj&site=berichte&PHPSESSID=dfafd2f53eb3a872ac7390eed2945a11">Spielberichte</a></td></tr><tr><td><a class="secnav" onMouseOver="shownavThird('thirddiv_1354'); TimerStop();" href="?abt=fbj&site=suchen&PHPSESSID=dfafd2f53eb3a872ac7390eed2945a11">Wir suchen</a></td></tr></tbody>
</table>

Das ist mal der Inhalt einer dieser Boxen. Soweit so gut, hätte jemand evtl. auch noch eine Idee was die Funktionen TimerStop, TimerStart und shownav beinhalten könnten ? Die sind wohl aus einer externen .js Datei

// PHP für den Code nur weils übersichtlicher dargestellt wird

edit: Oder hat jemand evtl. ein Tutorial, oder Beispiel wo ähnliche Inhalte erklärt werden ? Damit wäre mir auch schon sehr geholfen, muss ja nicht genau diese sein

migl · 10. Februar 2004

schau mal in den header, da wird dieses scritp eingebunden:
http://www.fchertha.de/includes/functions.js

value · 10. Februar 2004

migl schrieb:
schau mal in den header, da wird dieses scritp eingebunden:
http://www.fchertha.de/includes/functions.js

Die selbe Idee hatte ich auch gerade, nur warst du einen Tick schneller. Das es so einfach ist dachte ich anfangs nicht

Wenn noch jemand ein ähnliches Beispiel oder Tutorial kennt wär ich dann endlich wunschlos glücklich

Nase · 10. Februar 2004

Ich habe gerade eben mal was zusammengebastelt. Basiert zu Teilen allerdings auf einem Script von jemanden, dessen Name mir gerade entfallen ist.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function swap_content( span ) {
	displayType = ( document.getElementById( span ).style.display == 'none' ) ? 'block' : 'none';
	document.getElementById( span ).style.display = displayType;
}
//-->
</script>
</head>

<body>
<a href="#" onMouseover="swap_content('1'); return false;" onMouseout="swap_content('1'); return false;">Hauptmenu 1</a> 
<a href="#" onMouseover="swap_content('2'); return false;" onMouseout="swap_content('2'); return false;">Hauptmenu 2</a> 
<a href="#" onMouseover="swap_content('3'); return false;" onMouseout="swap_content('3'); return false;">Hauptmenu 3</a> 
<a href="#" onMouseover="swap_content('4'); return false;" onMouseout="swap_content('4'); return false;">Hauptmenu 4</a>


<span id="1" onMouseover="swap_content('1'); return false;" onMouseout="swap_content('1'); return false;" style="display: none"><br>
<div style="background-color: #cdcdcd; padding: 5px; position: absolute; top: 35px; width: 200px;">
Menupunkt 1<br>
Menupunkt 2<br>
Menupunkt 3<br>
Menupunkt 4
</div>
</span>

<span id="2" onMouseover="swap_content('2'); return false;" onMouseout="swap_content('2'); return false;" style="display: none"><br>
<div style="background-color: #dedede; padding: 5px; position: absolute; left: 90px; top: 35px; width: 200px;">
Menupunkt 1<br>
Menupunkt 2<br>
Menupunkt 3<br>
Menupunkt 4
</div>
</span>

<span id="3" onMouseover="swap_content('3'); return false;" onMouseout="swap_content('3'); return false;" style="display: none"><br>
<div style="background-color: #efefef; padding: 5px; position: absolute; left: 180px; top: 35px; width: 200px;">
Menupunkt 1<br>
Menupunkt 2<br>
Menupunkt 3<br>
Menupunkt 4
</div>
</span>

<span id="4" onMouseover="swap_content('4'); return false;" onMouseout="swap_content('4'); return false;" style="display: none"><br>
<div style="background-color: #bcbcbc; padding: 5px; position: absolute; left: 270px; top: 35px; width: 200px;">
Menupunkt 1<br>
Menupunkt 2<br>
Menupunkt 3<br>
Menupunkt 4
</div>
</span>


</body>
</html>

Bitte nicht lachen! Ich weiss ja selbst, dass ich keine Ahnung von Javascript haben

.

value · 11. Februar 2004

Also, ich hab auch deine Version mal getestet Nase, nur 2 gröbere Probleme.

1. Beim aufklappen wird der gesamte Inahlt darunter um 1 Zeile verschoben, und beim zuklappen wieder zurück.

2. Die horizontale Position der Boxen ist nicht gleichmäßig unter dem Menü, oder an einer Stelle, sondern bei jeder Box irgendwo ...

Findet jemand den Fehler oder liegt der bei mir ?

Nase · 11. Februar 2004

Ich weiss jetzt nicht genau, was du meinst. Aber das liegt ganz bestimmt an dir

.

value · 11. Februar 2004

Also, ich meine das sich die <div> elemente am Fenster orientieren, und je nach Fenstergröße verschoben sind, sowie wenn ich mit der Maus über einen Hauptmenüpunkt fahre sich unweigerlich alles unter der Navi um eine Zeile nach unten verschiebt :|

Nase · 11. Februar 2004

Ich bekomme gerade überhaupt nichts auf die Reihe, sorry. Ich widme mich des Problems morgen nochmal. Wobei eigentlich das Problem schon gelöst sein sollte, wenn man den Link und die Submenubox in ein eigenes <div> reinfummelt. Dann ist die Submenubox auf von dem Link abhängig und sieht somit dann auch besser aus, weil direkt unter dem Link.

value · 11. Februar 2004

Öhm, was genau wo reinfummeln ?

Nase · 11. Februar 2004

Naja, sowas in der Art:

HTML:

<div style="float: left; width: 150px;">
<a href="#" onMouseover="swap_content('1'); return false;" onMouseout="swap_content('1'); return false;">Hauptmenu 1</a> 
<span id="1" onMouseover="swap_content('1'); return false;" onMouseout="swap_content('1'); return false;" style="display: none"><br>
<div style="background-color: #cdcdcd; padding: 5px; position: relative; top: -20px; width: 100px;">
Menupunkt 1<br>
Menupunkt 2<br>
Menupunkt 3<br>
Menupunkt 4
</div>
</span>
</div>

Allerdings passt das alles vorne und hinten nicht zusammen. Am besten, ich denk mir da nochmal was ganz anderes aus.

Edit:
Nach stundenlangem Herumprobieren und tagelangem, intensivem Nachdenken ist immer noch nichts Brauchbares rausgekommen. Ich glaube, ich bekomme das nicht mehr hin

.

Suche

[DHTML] Floating Navigation ohne Flash

value

Commander

migl

Lt. Junior Grade

value

Commander

migl

Lt. Junior Grade

value

Commander

migl

Lt. Junior Grade

value

Commander

Nase

Gast

value

Commander

Nase

Gast

value

Commander

Nase

Gast

value

Commander

Nase

Gast