Horizontales Menü für Adminforce

**eaxo** · 17.09.2009, 00:35

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:

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">&nbsp;</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 &copy; <a href="http://www.designerscripte.net/" target="_blank">Designerscipte.net</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
SuckerTree Horizontal Menu &copy; <a href="http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/" target="_blank">Dynamic Drive</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
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

eaxo

Thema: Horizontales Menü für Adminforce

Themen-Optionen

Anzeige

Baum-Darstellung

Horizontales Menü für Adminforce

Ähnliche Themen

Menü umbau

Rechtes Menü

Sponsoren im Menü

Rahmen-menü

VMS 1.2: Adminforce Professional v2 / Adminforce Pro

Berechtigungen