+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Portal: CSS-Foren-Menü (/thread-8486.html)
Portal: CSS-Foren-Menü - morlock - 27.01.2008
Fürs Archiv:
Wie im Anhang zu sehen habe ich mit dieser Hilfe ein kleines CSS-Fly-Out-Menü für das direkte Anwählen der Foren fürs Portal erstellt. Nicht perfekt, aber vielleicht hilfts ja einem.
Zum Ausprobieren zwei Dateien anlegen:
HTML-Datei:
Code:
<style type="text/css">
@import "style2.css";
</style>
</head>
<html><div class="css_menue">
<ul class="parent">
<li><a href="forumdisplay.php?fid=xxx">Menüpunkt 1</a>
<ul>
<li><a href="forumdisplay.php?fid=xxx">Untermenü 1</a>
<ul>
<li><a href="forumdisplay.php?fid=x">Untermenüpunkt 1</a></li>
<li><a href="forumdisplay.php?fid=xxx">Untermenüpunkt 2</a></li>
</ul>
</li>
<li><a href="forumdisplay.php?fid=x">Untermenü 2</a>
<ul>
<li><a href="forumdisplay.php?fid=xxx">Untermenüpunkt 1</a></li>
<li><a href="forumdisplay.php?fid=xx">Untermenüpunkt 2</a></li>
</ul>
</li>
<li><a href="forumdisplay.php?fid=x">Menüpunkt</a></li>
</ul>
</li>
<li><a href="forumdisplay.php?fid=xxx">Menüpunkt 2</a><li>
</ul>
</div>
</html>CSS-Datei style2.css im selbem Ordner:
Code:
.css_menue ul.parent {
margin: 0;
padding: 0;
background: #89d60e;
list-style: none;
width: 10%; }
.css_menue li { white-space:nowrap;}
.css_menue ul {
margin: 0;
padding: 0;
background: #89d60e;
list-style: none;
}
.css_menue ul li {
position: relative;
}
.css_menue li ul {
position: absolute;
left: 100%; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
.css_menue ul li a {
display: block;
text-decoration: none;
background: #89d60e; /* IE6 Bug */
padding: 0px;
}
/* Fix IE. Hide from IE Mac \*/
* html .css_menue ul li { float: left; height: 1%; }
* html .css_menue ul li a { height: 1%; }
/* End */
.css_menue li ul li a { padding: 2px 1px; text-decoration: underline;} /* Sub Menu Styles */
.css_menue li:hover > ul, .css_menue li.over > ul { display: block; border: 2px solid black;} /* The magic */
.css_menue ul.parent > li > a {text-decoration: underline}Den HTML-Teil zu erstellen kann ziemliche nerven, wenn man viele Foren hat. Da lohnt es sich evtl. ein Python-/PHP-/Perl-/wasweiich-Skript zu schreiben. Ich habe eines in Python geschrieben, aber das ist ziemlich häßlich, von daher poste ich das hier nicht.
Wenn man das ganze ins Portal stellen will, muss man halt den HTML-Teil im portal-Template entsprechend einfügen. Jeder, der ein wenig Ahnung von HTML und Tabellen hat, sollte das ohne Probleme hinkiegen.
Der CSS-Teil muss entweder in jedem Theme ganz unten unter "zusätzliches CSS" (oder so ähnlich), oder man benutzt für alle Themes nur eine einzige CSS-Datei, die man irgendwo auf dem Server ablegt. Ersteres ist wahrscheinlich sinnvoller, auch wenn es mehr Arbeit ist. Für das Anpassen des CSS-Teils an eigene Themes empfehle ich die Kurzreferenz von css4you.de.