Horizontales Menü für Adminforce
So,
ich hab mich mal hingesetzt und die Schritte nachvollzogen beim Einbau des
SuckerTree Horizontal Menu © Dynamic Drive.
Bei mir hab ich bereits die userbearbeiten.php umgebaut, so schauts aus:
http://www.vms1.de/thumbs/backend16dj.png
Erstmal eine Kopie vom originalen adminforce erstellet und backend genannt.
Die auf obiger Seite aufgeführte CSS habe ich gesplittet und unter suckertree.css und suckertree.js nach /backend/css gespeichert.
Nachtrag: Den Bereich zwischen <style type="text/css"> und </style> bzw zwischen <script type="text/javascript"> und </script> OHNE diese einleitenden und abschließenden HTML-Tags in die Dateien schreiben.
Dann ein bisschen rumgefrickelt und Tabellen verflucht :-P
folgende Dateien habe ich verändert:
backend\lib\header.php
HTML-Code:
suche
<link rel="stylesheet" href="css/main.css" type="text/css">
füge danach ein
<link rel="stylesheet" href="css/suckertree.css" type="text/css">
<script type="text/javascript" src="css/suckertree.js"></script>
HTML-Code:
suche, lösche das und alles was danach kommt
<body style="topmargin:5;leftmargin:0;">
füge stattdessen ein:
<body style="topmargin:0;leftmargin:0;">
<noscript><div style="font: 10pt Arial; color: #ff0000; text-align: center;">Um alle Funktionen zu nutzen muss JavaScript aktiviert sein!</div></noscript>
<div id="page">
<div id="header"> <?=$seitenname;?> Backend</div>
<div id="subheader"><? require ( 'lib/menue_links.php' ); ?></div>
<div id="content">
Ich war ja grad in /lib deshalb backend/lib/layout.lib.php
PHP-Code:
lösche alles
füge ein:
<?
function head($titel){
echo '
<p class="head">'.$titel.'</p>';
}
function foot(){
echo '
<p class="foot"> </p>';
}
?>
Tabellen killen in backend/lib/footer.php
HTML-Code:
soll so aussehen:
</div>
<div id="footer"><? require ( 'lib/menue_rechts.php' ); ?></div>
</div>
</body>
</html>
<? db_close (); ?>
Da ich das © rausgenommen hatte => rein in backend/lib/menue_rechts.php
HTML-Code:
soll so aussehen:
<p class="copy">
VMS © <a href="http://www.designerscripte.net/" target="_blank">Designerscipte.net</a>
|
SuckerTree Horizontal Menu © <a href="http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/" target="_blank">Dynamic Drive</a>
|
Anpassung von <a href="http://eaxo.de/" target="_blank">eaxo</a>
</p>
Das Herzstück ist die Liste in backend/lib/menue_links.php, die als Menü dargestellt wird.
Jedes <li> ist ein Link.
Jedes daraufvolgende <ul>erzeugt eine ausklappende Liste.
Beispiel:
HTML-Code:
<ul id="treemenu1">
<li>1</li>
<li>2</li>
<ul>
<li>2.1</li>
</ul>
<li>3</li>
<li>4</li>
<ul>
<li>4.1</li>
<li>4.2</li>
<ul>
<li>4.2.1</li>
</ul>
<li>4.3</li>
</ul>
<li>5</li>
<ul>
<li>5.1</li>
</ul>
</ul>
Also <ul> startet Untermenü, </ul> beendet es. Genug der Trockenübung
backend/lib/menue_links.php
HTML-Code:
<div class="suckertreemenu">
<ul id="treemenu1">
<li><a href="#" style="border-left: 1px solid black">Allgemeines</a>
<ul>
<li><a href="?content=/startseite">Adminstart</a></li>
<li><a href="?content=/usersystem/liste">Userliste</a></li>
<li><a href="?content=/usersystem/doppelaccis">Doppelaccounts</a></li>
<li><a href="?content=/module">Module</a></li>
<li><a href="?content=/bilanzsystem">Bilanz</a></li>
</ul>
</li>
<li><a href="#">Nachrichten</a>
<ul>
<li><a href="?content=/newssystem/news">News schreiben</a></li>
</ul>
</li>
<li><a href="#">Ralleys</a>
<ul>
<li><a href="?content=/ralleysystem/aktiv">Aktivralley</a></li>
<li><a href="?content=/ralleysystem/klick">Klickralley</a></li>
<li><a href="?content=/ralleysystem/ref">Refralley</a></li>
</ul>
</li>
<li><a href="#">Konfiguration</a>
<ul>
<li><a href="?content=/interfacedaten/pageconfig">Seiteneinstellungen</a></li>
<li><a href="?content=/interfacedaten/crons">Crons</a></li>
<li><a href="?content=/interfacedaten/betreiber">Betreiberdaten</a></li>
<li><a href="#">Texte bearbeiten</a>
<li><a href="?content=/texte/modifikationen">Modifikationen</a></li>
<ul>
<li><a href="?content=/texte/alternativwerbung">Alternativwerbung</a></li>
<li><a href="?content=/texte/klickralley">Klickralley</a></li>
<li><a href="?content=/texte/aktivralley">Aktivralley</a></li>
<li><a href="?content=/texte/refralley">Refralley</a></li>
<li><a href="?content=/texte/agb">AGB</a></li>
<li><a href="?content=/texte/faq">FAQ</a></li>
<li><a href="?content=/texte/wartung">Wartungstext</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Werbung</a>
<ul>
<li><a href="#">Eigene</a>
<ul>
<li><a href="?content=/werbesystem/forcedbanner_468">Forcedbanner</a></li>
<li><a href="#">Textlinks</a></li>
<li><a href="?content=/werbesystem/paidmail">Paidmails</a></li>
</ul>
</li>
<li><a href="?content=/interfacebanner/blacklist">Blacklist</a></li>
<li><a href="#">Interfaces</a>
<ul>
<li><a href="?content=/interfacedaten/sponsorenliste">Übersicht</a></li>
<li><a href="?content=/interfacedaten/dsn-ads">DSN-Ads</a></li>
<li><a href="?content=/interfacedaten/lose-ads">Lose-Ads</a></li>
<li><a href="?content=/interfacedaten/losebox">Losebox</a></li>
<li><a href="?content=/interfacedaten/losewerbung">Losewerbung</a></li>
<li><a href="?content=/interfacedaten/hp-lose">HP-Lose</a></li>
</ul>
</li>
<li><a href="#">Forcedbanner</a>
<ul>
<li><a href="?content=/interfacebanner/admin">Eigene</a></li>
<li><a href="?content=/interfacebanner/dsn-ads">DSN-Ads</a></li>
<li><a href="?content=/interfacebanner/lose-ads">Lose-Ads</a></li>
<li><a href="?content=/interfacebanner/losebox">Losebox</a></li>
<li><a href="?content=/interfacebanner/losewerbung">Losewerbung</a></li>
<li><a href="?content=/interfacebanner/hp-lose">HP-Lose</a></li>
</ul>
</li>
<li><a href="#">Textlinks</a>
<ul>
<li><a href="#">Eigene</a></li>
<li><a href="?content=/interfacedaten/dsn-ads">DSN-Ads</a></li>
<li><a href="#">Lose-Ads</a></li>
<li><a href="#">Losebox</a></li>
<li><a href="#">Losewerbung</a></li>
<li><a href="#">HP-Lose</a></li>
</ul>
</li>
<li><a href="#">Paidmails</a>
<ul>
<li><a href="?content=/werbesystem/paidmail_hist">Eigene</a></li>
<li><a href="?content=/interfacedaten/dsn-ads">DSN-Ads</a></li>
<li><a href="#">Lose-Ads</a></li>
<li><a href="#">Losebox</a></li>
<li><a href="#">Losewerbung</a></li>
<li><a href="#">HP-Lose</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Linkliste</a>
<ul>
<li><a href="http://www.designerscripte.net/in.php?to=news" target="_blank">VMS-News</a></li>
<li><a href="http://www.designerscripte.net/in.php?to=tut" target="_blank">VMS-Tutorial</a></li>
<li><a href="http://www.designerscripte.net/in.php?to=home" target="_blank">VMS-Supportforum</a></li>
<li><a href="http://www.designerscripte.net/in.php?to=dl" target="_blank">VMS-Downloadbereich</a></li>
<li><a href="http://www.designerscripte.net/in.php?to=donate" target="_blank">Spenden</a></li>
<li><a href="http://www.designerscripte.net/in.php?to=shops" target="_blank">VMS-Addonübersicht</a></li>
</ul></li>
</ul>
<br style="clear: left;">
</div>
so sieht meine main.css zurzeit aus:
HTML-Code:
body {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
margin-top:0;
margin-left:0;
}
#page {
position: relative;
width: 980px;
min-height: 750px;
background-color: #EEEECC;
}
#header {
font: bolder 20px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
height: 25px;
background-color: #464646;
padding: 10px;
}
#subheader {
font: bolder 12px Verdana, Arial, Helvetica, sans-serif !important;
background-color: #FFF;
margin-left: -1px;
}
#content {
margin-left: 5px;
margin-right: 5px;
}
#footer {
position:absolute;
width: 100%;
height: 20px;
bottom: 0px;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #464646;
}
.head {
font: bolder 14px Verdana, Arial, Helvetica, sans-serif;
display: block;
background-color: #C0C0C0;
text-align: center;
margin-top: 5px;
margin-bottom: 0px;
}
.foot {
}
td {
font: 11px Verdana, Arial, Helvetica, sans-serif;
}
.titel {
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
color: #666;
}
a {
color: #665;
text-decoration: none;
}
a:hover {
color: #F00;
text-decoration: underline;
}
.copy a {
font: bold 10px Verdana, Arial, Helvetica, sans-serif;
color: #FFF;
text-decoration: none;
}
#footer p {
text-align: center;
margin: 3px;
}
.tblbgcolor {
background-color: #336;
}
textarea {
font: bold 10px Verdana, Arial, Helvetica, sans-serif;
background-color: #C0C0C0;
border: 1px solid #000;
}
input {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #333;
width: 80%;
border: 1px solid #505050;
background-color: #E6E6E6;
}
input.submit {
font: bold 10px Verdana, Arial, Helvetica, sans-serif;
background-color: #C0C0C0;
width: 60%;
border: 1px solid #000;
}
select {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #333;
border: 1px solid #000;
background-color:#E6E6E6;
}
textarea {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
border: 1px solid #505050;
background-color: #E6E6E6;
}
option {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
border: 1px solid #000080;
background-color: #EEEEEE;
}
.tr_row0 {
background-color: #E2E2E2;
}
.tr_row1 {
background-color: #CDCDCD;
}
.tr_head {
font: 11px bolder Verdana, Arial, Helvetica, sans-serif;
color: #FFF;
background-color: #464646;
text-align: center;
}
#userbearbeiten {
border: 0px solid
}
#Userinfo1 {
float: left;
margin: 3px;
}
#Userinfo2 {
width: 610px;
margin: 3px;
}
Bei Fragen fragen, bei Bugs sagen :yes:
eaxo
