YourWBB


yourWBB » WoltLab Burning Board Generation 2 * » Alles von und für das WBB 2.3.x » [WBB 2.3.x] Hacks und Addons » Horizontale CSS - Navigation » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag 14.256 Views | | Thema zu Favoriten hinzufügen
Seiten (3): [1] 2 3 nächste »
Neues Thema erstellen Antwort erstellen

Zum Ende der Seite springen Horizontale CSS - Navigation
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
foruni.de foruni.de ist männlich
Mitglied


Dabei seit: 18.01.04
Beiträge: 139

 Horizontale CSS - Navigation Antworten Zitieren Editieren Melden       UP

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

__________________

Dieser Beitrag wurde 2 mal editiert, zum letzten Mal von foruni.de: 29.04.08 19:22.

06.04.08 11:53 foruni.de ist offline E-Mail WWW Finden Als Freund hinzufügen Füge foruni.de in deine Kontaktliste ein
Xxplozive Xxplozive ist männlich
Mitglied


images/avatars/avatar-5072.jpg

Dabei seit: 17.01.04
Beiträge: 82
Fähigkeiten: WBB2 Fortgeschritten
Herkunft: Lübeck
Forenversion: 2.3

Antworten Zitieren Editieren Melden       UP

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

Dateianhang:
jpg fehler.jpg (9,12 KB, 1.088 mal heruntergeladen)


__________________
Ich hasse Signaturen die plötzlich
15.04.08 15:24 Xxplozive ist offline E-Mail WWW Finden Als Freund hinzufügen
Xannasavin
Mitglied


Dabei seit: 21.07.05
Beiträge: 345
Forenversion: 2.3

Antworten Zitieren Editieren Melden       UP

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

__________________

28.04.08 20:38 Xannasavin ist offline E-Mail Finden Als Freund hinzufügen
foruni.de foruni.de ist männlich
Mitglied


Dabei seit: 18.01.04
Beiträge: 139

Themenstarter Thema begonnen von foruni.de
Antworten Zitieren Editieren Melden       UP

@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.

__________________

29.04.08 18:26 foruni.de ist offline E-Mail WWW Finden Als Freund hinzufügen Füge foruni.de in deine Kontaktliste ein
Xannasavin
Mitglied


Dabei seit: 21.07.05
Beiträge: 345
Forenversion: 2.3

Antworten Zitieren Editieren Melden       UP

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

Dateianhang:
unknown css_menu_forum.tpl (4 KB, 9 mal heruntergeladen)


__________________

29.04.08 19:09 Xannasavin ist offline E-Mail Finden Als Freund hinzufügen
foruni.de foruni.de ist männlich
Mitglied


Dabei seit: 18.01.04
Beiträge: 139

Themenstarter Thema begonnen von foruni.de
Antworten Zitieren Editieren Melden       UP

Geb mir mal bitte den Link zur NAvi, der Code scheint in Ordnung.

__________________

29.04.08 19:22 foruni.de ist offline E-Mail WWW Finden Als Freund hinzufügen Füge foruni.de in deine Kontaktliste ein
Shinto Shinto ist männlich
Mitglied


images/avatars/avatar-5231.gif

Dabei seit: 24.09.07
Beiträge: 645

Antworten Zitieren Editieren Melden       UP

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>

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Shinto: 29.04.08 20:08.

29.04.08 19:53 Shinto ist offline E-Mail Finden Als Freund hinzufügen
foruni.de foruni.de ist männlich
Mitglied


Dabei seit: 18.01.04
Beiträge: 139

Themenstarter Thema begonnen von foruni.de
Antworten Zitieren Editieren Melden       UP

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.

__________________

29.04.08 20:42 foruni.de ist offline E-Mail WWW Finden Als Freund hinzufügen Füge foruni.de in deine Kontaktliste ein
Shinto Shinto ist männlich
Mitglied


images/avatars/avatar-5231.gif

Dabei seit: 24.09.07
Beiträge: 645

Antworten Zitieren Editieren Melden       UP

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

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Shinto: 29.04.08 20:46.

29.04.08 20:43 Shinto ist offline E-Mail Finden Als Freund hinzufügen
Xannasavin
Mitglied


Dabei seit: 21.07.05
Beiträge: 345
Forenversion: 2.3

Antworten Zitieren Editieren Melden       UP

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 Augenzwinkern
werd mich nochmal melden! danke auf jedenfall schonmal, dass du mir hilfst!

__________________

29.04.08 20:56 Xannasavin ist offline E-Mail Finden Als Freund hinzufügen
Shinto Shinto ist männlich
Mitglied


images/avatars/avatar-5231.gif

Dabei seit: 24.09.07
Beiträge: 645

Antworten Zitieren Editieren Melden       UP

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
29.04.08 20:59 Shinto ist offline E-Mail Finden Als Freund hinzufügen
foruni.de foruni.de ist männlich
Mitglied


Dabei seit: 18.01.04
Beiträge: 139

Themenstarter Thema begonnen von foruni.de
Antworten Zitieren Editieren Melden       UP

@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.

__________________

29.04.08 23:01 foruni.de ist offline E-Mail WWW Finden Als Freund hinzufügen Füge foruni.de in deine Kontaktliste ein
Xxplozive Xxplozive ist männlich
Mitglied


images/avatars/avatar-5072.jpg

Dabei seit: 17.01.04
Beiträge: 82
Fähigkeiten: WBB2 Fortgeschritten
Herkunft: Lübeck
Forenversion: 2.3

Antworten Zitieren Editieren Melden       UP

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?

__________________
Ich hasse Signaturen die plötzlich
01.05.08 21:43 Xxplozive ist offline E-Mail WWW Finden Als Freund hinzufügen
Shinto Shinto ist männlich
Mitglied


images/avatars/avatar-5231.gif

Dabei seit: 24.09.07
Beiträge: 645

Antworten Zitieren Editieren Melden       UP

@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.
01.05.08 21:52 Shinto ist offline E-Mail Finden Als Freund hinzufügen
Xannasavin
Mitglied


Dabei seit: 21.07.05
Beiträge: 345
Forenversion: 2.3

Antworten Zitieren Editieren Melden       UP

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

__________________

03.05.08 17:28 Xannasavin ist offline E-Mail Finden Als Freund hinzufügen
foruni.de foruni.de ist männlich
Mitglied


Dabei seit: 18.01.04
Beiträge: 139

Themenstarter Thema begonnen von foruni.de
Antworten Zitieren Editieren Melden       UP

@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;
}

__________________

06.05.08 22:19 foruni.de ist offline E-Mail WWW Finden Als Freund hinzufügen Füge foruni.de in deine Kontaktliste ein
Xannasavin
Mitglied


Dabei seit: 21.07.05
Beiträge: 345
Forenversion: 2.3

Antworten Zitieren Editieren Melden       UP

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 Augenzwinkern

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 =/

__________________

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Xannasavin: 06.05.08 22:57.

06.05.08 22:57 Xannasavin ist offline E-Mail Finden Als Freund hinzufügen
borussiamg
Mitglied


Dabei seit: 10.09.05
Beiträge: 7

Antworten Zitieren Editieren Melden       UP

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.
20.05.08 21:36 borussiamg ist offline E-Mail WWW Finden Als Freund hinzufügen
Xannasavin
Mitglied


Dabei seit: 21.07.05
Beiträge: 345
Forenversion: 2.3

Antworten Zitieren Editieren Melden       UP

Leider noch nicht, ich hänge auch noch an dem Problem!

__________________

20.05.08 21:51 Xannasavin ist offline E-Mail Finden Als Freund hinzufügen
borussiamg
Mitglied


Dabei seit: 10.09.05
Beiträge: 7

Antworten Zitieren Editieren Melden       UP

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
21.05.08 13:48 borussiamg ist offline E-Mail WWW Finden Als Freund hinzufügen
Seiten (3): [1] 2 3 nächste » Baumstruktur | Brettstruktur
Gehe zu:

Neues Thema erstellen Antwort erstellen

yourWBB » WoltLab Burning Board Generation 2 * » Alles von und für das WBB 2.3.x » [WBB 2.3.x] Hacks und Addons » Horizontale CSS - Navigation