[DHTML] Floating Navigation ohne Flash

value

Commander
Dabei seit
Dez. 2003
Beiträge
2.086
Hi, Suchfunktion hat nichts ausgespuckt, also hier mein Thread :heuldoch:

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

Ist das ohne Flash realisierbar ?

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

Gruß value
 

value

Commander
Ersteller dieses Themas
Dabei seit
Dez. 2003
Beiträge
2.086
Zuletzt bearbeitet:

migl

Lt. Junior Grade
Dabei seit
März 2003
Beiträge
310
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
 
Zuletzt bearbeitet:

value

Commander
Ersteller dieses Themas
Dabei seit
Dez. 2003
Beiträge
2.086
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 :o

// 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 :)
 
Zuletzt bearbeitet:

value

Commander
Ersteller dieses Themas
Dabei seit
Dez. 2003
Beiträge
2.086

Nase

Lieutenant
Dabei seit
Jan. 2004
Beiträge
587
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

Commander
Ersteller dieses Themas
Dabei seit
Dez. 2003
Beiträge
2.086
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 ? :o
 

Nase

Lieutenant
Dabei seit
Jan. 2004
Beiträge
587
Ich weiss jetzt nicht genau, was du meinst. Aber das liegt ganz bestimmt an dir :D.
 

value

Commander
Ersteller dieses Themas
Dabei seit
Dez. 2003
Beiträge
2.086
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

Lieutenant
Dabei seit
Jan. 2004
Beiträge
587
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

Commander
Ersteller dieses Themas
Dabei seit
Dez. 2003
Beiträge
2.086
Öhm, was genau wo reinfummeln ? :o
 

Nase

Lieutenant
Dabei seit
Jan. 2004
Beiträge
587
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 :(.
 
Zuletzt bearbeitet:
Top