foruni.de
Titel: Horizontale CSS - Navigation
Version: 1.0
Beschreibung:
Was macht der "Hack"
Ihr seid genervt von Zig-Buttons im Header eures Forum? Besucher beschweren sich, dass sie vor lauter Header-Buttons keine Menüpunkte mehr finden? Wenn ihr einen Hack einbaut, müsst ihr jedes mal eine Grafik für die Navigation erstellen?
Die Zeiten sind jetzt vorbei. Der Folgende Hack ersetzt eure altmodische Header-Button Navigation durch eine peppige CSS Menüführung.
Vorteile des Hacks
Keine Buttons mehr nötig
Übersichtliche Navigation
Google freundlich
Nachteile des Hacks
komplizierter Einbau
Demo
Wie das Menü aussehen kann, seht ihr unten, wenn ihr auf den Demo-Link klickt. Das Aussehen ist jedoch durch die nahezu unendlichen CSS-Möglichkeiten unbeschränkt.
Einbauzeit:
zwischen 30 Minunten und 2 Stunden - je nach CSS Erfahrung und Navigationsumfang.
Copyright?
Ganz klares Nein! Wer will, darf natürlich einen Link zu uns setzen. Näheres in der Anleitung!
Hinweis:
Ist zwar schon in der Anleitung vermerkt, hier aber trotzdem nochmal:
DER HACK SOLLTE NUR VON LEUTEN VERWENDET WERDEN, DIE SICH BEREITS MIT CSS AUSKENNEN!
Ich übernehme keine Haftung für eventuell entstandene Schäden an euren Boards!
Lg
----
Demo:
http://www.foruni.de
weiter zum Download
Xxplozive
Hey,
das ist mal eine geile Sache das das hier mal jemand zur Erklärung bringt. Ich bin gerade dabei das auf meiner Testseite einzubauen und klappt auch soweit. Nur mir ist jetzt ein Problem aufgefallen. Und zwar habe ich in Punkt 3 die Button Höhe von 25 auf 15 verändert. Nun werden die Submenues mit einem zwischenraum angezeigt. In welcher Zeile kann ich das wieder beheben?
Ausserdem wie kann man es einstellen das die Sub-Menues breiter sein können wie die Main Menues?
Beides siehe Anhang
Greetz Xx
Xannasavin
Jau, das interessiert mich eigl auch ^^
Noch etwas: Hab das Menü eingebaut, im FF tuts wunderprächtig, im IE wird allerdings nur das übermenü angezeigt - es klappt nix aus =(
Ich hasse IE - aber wie kann man das Problem beheben? laut Code sollte es ja klappen...
foruni.de
@xxplosive:
diese Zeile sollte dein Problem beheben:
| Zitat: |
/* EINSTELLUNGEN NICHT VERÄNDERN!!!! Positioniert das erste Sub-Menü direkt unter den Hauptmenüpunkt */
#pmenu > li:hover > ul {left:-30px; top:16px;} |
Interessant ist in deinem Fall eigentlich nur der top-Wert.
@xannasavin:
Das Problem hatte ich lange Zeit auch, du musst schauen, dass die Tags:
<![endif]--> und <!--[if IE 7]><!--> oder <!--[if lte IE 6]>
auf keinen Fall entfernt werden dürfen. Überprüf das bitte bei deinem Menü, falls es nicht klappt, helfe ich dir.
Xannasavin
Also z.B. im Forenbereich sieht das ganze so aus:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
|
<ul id="pmenu">
<li class="drop"><a>Forenoptionen<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="search.php?action=24h{$SID_ARG_2ND}">{$lang->items['LANG_START_CURRENT_THREADS']}</a></li>
<li><a href="search.php?action=polls{$SID_ARG_2ND}">{$lang->items['LANG_START_CURRENT_POLLS']}</a></li>
<li><a href="markread.php{$SID_ARG_1ST}">{$lang->items['LANG_START_MARKREAD_ALL']}</a></li>
<if($show_archive == 1)><then><li><a href="archive/index.html">{$lang->items['LANG_START_ARCHIVE']}</a></li></then></if>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div> |
|
Den CSS Code lasse ich über ein extra Template einbinden (funkioniert gut!), das hänge ich mal eben an...
Ich habe in dem Bereich nur ein solches Dropdownfeld das rechts angezeigt wird...
Eigentlich habe ich nur die Farbe geändert, sowie die Breite und die Ausrichtung...
foruni.de
Geb mir mal bitte den Link zur NAvi, der Code scheint in Ordnung.
Shinto
Warning: Cannot modify header information - headers already sent by (output started at C:\Programme\xampp\htdocs\sven\wbb2\global.php:2) in C:\Programme\xampp\htdocs\sven\wbb2\acp\lib\functions.php on line 82
Parse error: syntax error, unexpected '/' in C:\Programme\xampp\htdocs\sven\wbb2\global.php(195) : eval()'d code on line 15
das erscheint bei mir nach dem modifizieren der header.tpl =/
hab an den beiden dateien nich geändert, ist ein frisch aufgesetztes testforum!
e:// mein header template schaut so aus:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
|
<table style="width:{$style['tableoutwidth']}" cellpadding="{$style['tableoutcellpadding']}" cellspacing="{$style['tableoutcellspacing']}" align="center" border="{$style['tableoutborder']}" class="tableoutborder">
<tr>
<td class="mainpage" align="center">
<table style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="logobackground" align="center"><if($style['logoimage']!="")><then><a href="index.php{$SID_ARG_1ST}"><img src="{$style['logoimage']}" border="0" alt="$master_board_name" title="$master_board_name" /></a></then></if>
<div id="menu_container">
<ul id="pmenu">
<li><a href="index.php{$SID_ARG_1ST}">Startseite</a></li>
<li class="drop"><a>Games<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><if($wbbuserdata['userid'])><then><a href="usercp.php{$SID_ARG_1ST}">Profil</a></li>
<li><a href="pms.php{$SID_ARG_1ST}">PN-Box</a></then></li>
<li><else><a href="register.php{$SID_ARG_1ST}">Registrieren</a></else></if></li>
<li><a href="calendar.php{$SID_ARG_1ST}">Kalender</a></li>
<li><if($wbbuserdata['a_can_use_acp']==1 && $wbbuserdata['a_acp_or_mcp']==1)><then><a href="acp/index.php" target="_blank">ACP</a></then></if></li>
<li><if($wbbuserdata['a_can_use_acp']==1 && $wbbuserdata['a_acp_or_mcp']==0)><then><a href="acp/index.php" target="_blank"></a></then></if></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="drop"><a>Community<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="team.php{$SID_ARG_1ST}">Team</a></li>
<li><a href="memberslist.php{$SID_ARG_1ST}">Mitglieder</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="drop"><a>Hilfe<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="search.php{$SID_ARG_1ST}">Suche</a></li>
<li><a href="misc.php?action=faq{$SID_ARG_2ND}">F.A.Q.</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
|
|
foruni.de
Dieser Abschnitt:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
|
<li><if($wbbuserdata['userid'])><then><a href="usercp.php{$SID_ARG_1ST}">Profil</a></li>
<li><a href="pms.php{$SID_ARG_1ST}">PN-Box</a></then></li>
<li><else><a href="register.php{$SID_ARG_1ST}">Registrieren</a></else></if></li>
<li><a href="calendar.php{$SID_ARG_1ST}">Kalender</a></li>
<li><if($wbbuserdata['a_can_use_acp']==1 && $wbbuserdata['a_acp_or_mcp']==1)><then><a href="acp/index.php" target="_blank">ACP</a></then></if></li>
<li><if($wbbuserdata['a_can_use_acp']==1 && $wbbuserdata['a_acp_or_mcp']==0)><then><a href="acp/index.php" target="_blank"></a></then></if></li>
|
|
macht für mich keinen Sinn. Ersetz deine if-Abfragen mal testweise mit "normalen" Links.
Shinto
dann könnte ja jeder ins acp xD bzw den link sehen
e:// jetzt wird jedenfalls alles angezeigt.
nur über dem header steht noch:
Warning: Cannot modify header information - headers already sent by (output started at C:\Programme\xampp\htdocs\sven\wbb2\global.php:2) in C:\Programme\xampp\htdocs\sven\wbb2\acp\lib\functions.php on line 82
Xannasavin
also die if/then schleifen müssen auf jedenfall das <li> und </li> einschließen...
also nicht:
<li><if($wbbuserdata['a_can_use_acp']==1 && $wbbuserdata['a_acp_or_mcp']==1)><then><a href="acp/index.php" target="_blank">ACP</a></then></if></li>
sondern
<if($wbbuserdata['a_can_use_acp']==1 && $wbbuserdata['a_acp_or_mcp']==1)><then><li><a href="acp/index.php" target="_blank">ACP</a></li></then></if>
meckern tut er deswegen:
<li><if($wbbuserdata['userid'])><then><a href="usercp.php{$SID_ARG_1ST}">Profil</a></li>
<li><a href="pms.php{$SID_ARG_1ST}">PN-Box</a></then></li>
<li><else><a href="register.php{$SID_ARG_1ST}">Registrieren</a></else></if></li>
-->
<if($wbbuserdata['userid'])><then><li><a href="usercp.php{$SID_ARG_1ST}">Profil</a></li>
<li><a href="pms.php{$SID_ARG_1ST}">PN-Box</a></li>
</then><else><li><a href="register.php{$SID_ARG_1ST}">Registrieren</a></li></else></if>
@foruni.de
da muss ich dir eine "testseite" basteln - die navi ist im moment nur im pw-geschützten testforum am laufen, wäre mehr aufwand dir da zugriff zu beschaffen als die site hochzuladen
werd mich nochmal melden! danke auf jedenfall schonmal, dass du mir hilfst!
Shinto
ja, mit der if-anweisung ist mir vorhin auch schon aufgefallen, doch jetzt hab ich diese mal komplett rausgelassen und trotzdem diese fehlermeldung:
| Zitat: |
Warning: Cannot modify header information - headers already sent by (output started at C:\Programme\xampp\htdocs\sven\wbb2\global.php:2) in C:\Programme\xampp\htdocs\sven\wbb2\acp\lib\functions.php on line 82
|
foruni.de
@Xanna:
Okeli, schreib mir dann am besten ne PN, dann merk ichs schneller. Versuche gerne zu helfen, schließlich hab ich jahrelang hier auch viel Hilfe gefunden!
@Shinto:
Bitte dich ebenfalls mir den Link deiner Seite zukommen zu lassen. Oder du hängst hier mal dein headinclude und dein header template an.
Xxplozive
Super danke, das hat mir schonmal geholfen. Jetzt habe ich nur noch das Problem das wenn ich einen zu langen Menupunkt habe er in der nächsten Zeile übergeht. Wie auch in meinem Attachment zu sehen ist. Wie kann ich das jetzt noch verhindern?
Shinto
@foruni:
ich konnte mein problem lösen, lag wie vermutet an den if abfragen ^^.
@Xxplosive:
du musst in der Headinclude den 3. Punkt bearbeiten. Die Breite legst du durch die Formel, die in der Anleitung erläutert wurde, fest.
Xannasavin
| Zitat: |
Original von foruni.de
@Xanna:
Okeli, schreib mir dann am besten ne PN, dann merk ichs schneller. Versuche gerne zu helfen, schließlich hab ich jahrelang hier auch viel Hilfe gefunden!
@Shinto:
Bitte dich ebenfalls mir den Link deiner Seite zukommen zu lassen. Oder du hängst hier mal dein headinclude und dein header template an. |
also pn hab ich dir geschickt!
ich hab noch so ein "phänomen": bei einer anderen seite hab ich nicht nur einen sondern 2 menüpunkte. wenn ich nun über einen fahr und das menü aufklappt, "springt" das ganze auf einmal ein paar pixel nach links (ist rechtsbündig ausgerichtet)...
vllt könntest du den code diesezüglich mal anschaun (ist natürlich der gleiche)...
foruni.de
@xanna:
was soll bei deiner Testseite denn anders laufen?
Das Einzige, was mir auffällt ist, dass du sich bei dir wohl dein bereits vorhandener CSS-Code mit meinem Menü beisst, z.B.:
.hoverMenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.hoverMenu ul li {
text-align: left;
padding: 0;
}
Xannasavin
hmm ich bin gerade am überlegen, wozu die 2 punkte die du genannt hast gehören...
ich glaub die gehören zu dem "optionenhack ala y******" oder so, muss ich allerdings nochmal nachschaun...
//e hmm, also die 2 punkte sind von keinem hack und auch nicht unter extra css code eingefügt. ich hab mal auf dem blanken testboard nachgeschaut: die 2 punkte sind standardmäßig vorhanden, wenn die sich also beißen sollten bin ich (vermutlich) unschuldig
das problem an der testseite (und eben auch im "original") ist, dass sich beim internet explorer rein gar nichts tut, sprich es geht kein menü auf =/
borussiamg
Hallo,
ersteinmal möchte ich sagen das es ein klasse Addon ist.
Nun zu meinem Problem. Ich habe es in meinem Websoccer eingebaut. Im Firefox werden die Untermenüs angezeigt im IE7 leider nicht.
Die Tags: <![endif]--> und <!--[if IE 7]><!--> oder <!--[if lte IE 6]>
sind auch alle da.
Hoffe das Problem wurde bereits gelöst.
Xannasavin
Leider noch nicht, ich hänge auch noch an dem Problem!
borussiamg
Hallo,
ich habe mal diesen Code in meiner tpl Datei
| code: |
1:
|
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> |
|
Gegen den
| code: |
1:
2:
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> |
|
ersetzt und siehe da es geht dann auch im IE7
Doch leider hab ich jetzt mit dem FF ein Problem.
Schaut es euch einfach mal an ist aber nur im FF
http://testws.worldsoccersim.com
Gruss
Borussiamg