Hallo, Gast! (Registrieren)

Letzte Ankündigung: MyBB 1.8.8 veröffentlicht (17.10.16)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
Portal: CSS-Foren-Menü
#1
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>
Das Schema sollte klar sein.

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.


Angehängte Dateien Thumbnail(s)
   
TESTSIGNATUR
Zitieren


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Problem mit CSS Drop-Down Menü Jockl 2 745 19.12.2009, 15:49
Letzter Beitrag: Jockl
  Css Menü CuddelZ2 2 642 27.10.2007, 21:07
Letzter Beitrag: Don Carlos