Ergebnis 1 bis 10 von 14

Thema: Horizontales Menü für Adminforce

Hybrid-Darstellung

Vorheriger Beitrag Vorheriger Beitrag   Nächster Beitrag Nächster Beitrag
  1. #1
    Erfahrener Benutzer
    Registriert seit
    26.08.2007
    Beiträge
    231

    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:



    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

  2. #2
    Erfahrener Benutzer
    Registriert seit
    26.08.2007
    Beiträge
    231
    Dies ist jetzt mit Absicht ein Doppelpost Damit ihr seht das es was neues gibt.

    Die Sprachschule neigt sich dem Ende und ich habe in Kürze wieder mehr Zeit.
    Ich werde, wenn der Wunsch besteht, das BackEnd auf Basis des Standart-AF komplett fertigstellen. Ist ja nur ne Fleißarbeit.
    Zunächst werde ich nur Codeteile so verschieben und taggen das möglichst viele Informationen auf möglichst wenig Seiten möglichst sinnvoll angeordnet sind. Ich werde keine weiteren Funktionalitäten einbauen.
    Selbstverständlich gibts das dann für User von DSN 4free, von Vorbehalten der Lizenzgeber mal abgesehen.

    In einem weiteren Schritt, Lust und Zeit vorausgesetzt, werde ich zusätzliche Funktionalitäten einbauen (hatte ich schon die grafischen Anpassungen erwähnt?). Dazu benötige ich aber mehr oder minder detaillierte, freie Codeschnippsel. Dazu später mehr.

    Einen User/Mod mit fundierten Sprachkenntnissen müsste ich dann aber (selten) anschreiben können wenn sich mir der ein oder andere Dialekt so gar nicht erschließen mag.

    eaxo

  3. #3
    Erfahrener Benutzer
    Registriert seit
    23.04.2009
    Beiträge
    155
    Wird hier noch etwas weiter gearbeitet?

  4. #4
    Erfahrener Benutzer
    Registriert seit
    26.08.2007
    Beiträge
    231
    Sorry, das kann ich derzeit nicht mit Gewissheit sagen.
    Ich hatte weiter umgeschrieben, musste es aber auf die Seite legen.

    Es wäre schön wenn ich Zeit und Muße dazu haben würde, im Moment sieht es aber nicht danach aus.

    -------------------------------------------
    powered by HTC and Tapatalk

  5. #5
    Benutzer
    Registriert seit
    31.12.2007
    Beiträge
    50
    Sieht ja edel aus
    Werde ich bei Gelegenheit mal bei mir so umbauen

  6. #6
    eaxo, ich habe deine Schritte befolgt, aber du hast leider nicht beschrieben, an welcher Stelle Du die CSS getrennt hast. Bei mir ist hierbei ein chaos entstanden. Ich hab ein Backup gemacht, keine Soge, aber irgendwie sieht das nach nix aus, da die css offensichtlichfalsch ist.

  7. #7
    Erfahrener Benutzer
    Registriert seit
    23.04.2009
    Beiträge
    155
    PHP-Code:
    <style type="text/css">

    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */

    .suckertreemenu ul{
    margin0;
    padding0;
    list-
    style-typenone;
    }

    /*Top level list items*/
    .suckertreemenu ul li{
    positionrelative;
    displayinline;
    floatleft;
    background-color#F3F3F3; /*overall menu background color*/
    }

    /*Top level menu link items style*/
    .suckertreemenu ul li a{
    displayblock;
    width90px/*Width of top level menu link items*/
    padding1px 8px;
    border1px solid black;
    border-left-width0;
    text-decorationnone;
    colornavy;
    }
        
    /*1st sub level menu*/
    .suckertreemenu ul li ul{
    left0;
    positionabsolute;
    top1em/* no need to change, as true value set by script */
    displayblock;
    visibilityhidden;
    }

    /*Sub level menu list items (undo style from Top level List Items)*/
    .suckertreemenu ul li ul li{
    display: list-item;
    floatnone;
    }

    /*All subsequent sub menu levels offset after 1st level sub menu */
    .suckertreemenu ul li ul li ul
    left159px/* no need to change, as true value set by script */
    top0;
    }

    /* Sub level menu links style */
    .suckertreemenu ul li ul li a{
    displayblock;
    width160px/*width of sub menu levels*/
    colornavy;
    text-decorationnone;
    padding1px 5px;
    border1px solid #ccc;
    }

    .
    suckertreemenu ul li a:hover{
    background-colorblack;
    colorwhite;
    }

    /*Background image for top level menu list links */
    .suckertreemenu .mainfoldericon{
    background#F3F3F3 url(media/arrow-down.gif) no-repeat center right;
    }

    /*Background image for subsequent level menu list links */
    .suckertreemenu .subfoldericon{
    background#F3F3F3 url(media/arrow-right.gif) no-repeat center right;
    }

    html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
    padding-top1em;
    }
        
    /* Holly Hack for IE \*/
    html .suckertreemenu ul li floatleftheight1%; }
    html .suckertreemenu ul li a height1%; }
    /* End */

    </style
    PHP-Code:
    <script type="text/javascript">

    //SuckerTree Horizontal Menu (Sept 14th, 06)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/

    var menuids=["treemenu1"//Enter id(s) of SuckerTree UL menus, separated by commas

    function buildsubmenus_horizontal(){
    for (var 
    i=0i<menuids.lengthi++){
      var 
    ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var 
    t=0t<ultags.lengtht++){
            if (
    ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
                
    ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
                
    ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
            
    }
            else{ 
    //else if this is a sub level menu (ul)
              
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
            
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
            
    }
        
    ultags[t].parentNode.onmouseover=function(){
        
    this.getElementsByTagName("ul")[0].style.visibility="visible"
        
    }
        
    ultags[t].parentNode.onmouseout=function(){
        
    this.getElementsByTagName("ul")[0].style.visibility="hidden"
        
    }
        }
      }
    }

    if (
    window.addEventListener)
    window.addEventListener("load"buildsubmenus_horizontalfalse)
    else if (
    window.attachEvent)
    window.attachEvent("onload"buildsubmenus_horizontal)

    </
    script

    Den Rest kann man sich ja denken oder?

  8. #8
    Erfahrener Benutzer
    Registriert seit
    26.08.2007
    Beiträge
    231
    Zitat Zitat von eaxo
    Die auf obiger Seite aufgeführte CSS habe ich gesplittet und unter suckertree.css und suckertree.js nach /backend/css gespeichert.
    Zitat Zitat von CeleronD Beitrag anzeigen
    PHP-Code:
    <style type="text/css">
    [...]
    </
    style
    PHP-Code:
    <script type="text/javascript">
    [...]
    </
    script
    Den Rest kann man sich ja denken oder?
    Korrekt so, ich habe es oben nicht angeführt, da ich annahm das es sich aus den Dateinamen ergibt.
    Auch hier ein Nachtrag: Den CSS- bzw. JS-Code ZWISCHEN den HTML-Tags in die Datein speichern.
    Gruß
    eaxo

  9. #9
    Erfahrener Benutzer
    Registriert seit
    26.08.2007
    Beiträge
    231
    Ich mach morgen mal mein Laptop an und schau mal was ihr mit # meint. Heute ist mir nicht so gut...

    Eaxo


    -------------------------------------------

    powered by HTC and Tapatalk



    EDIT:
    Hmmm...
    natürlich kann das nicht so wie es soll, die CSS und JS Anweisungen sind ja in eigenen Dateien beschrieben.

    Entfernt aus suckertree.css und suckertree.js die HTML-Tags am Anfang (<style type="text/css"> bzw. <script type="text/javascript"> ) und am Ende (</style> bzw. </script>). Jetzt sollte es gehen.

    Hab das oben mal dazugeschrieben.

  10. #10
    Wunderbar, vielen Dank. Jetzt funzt es :-D

Ähnliche Themen

  1. Menü umbau
    Von rene_1992 im Forum Support zum VMSone
    Antworten: 7
    Letzter Beitrag: 06.04.2011, 00:15
  2. Rechtes Menü
    Von Diabolo99 im Forum Support zum VMSone
    Antworten: 8
    Letzter Beitrag: 17.04.2010, 17:28
  3. Sponsoren im Menü
    Von Thor82 im Forum Support zu Addons & Erweiterungen
    Antworten: 10
    Letzter Beitrag: 18.04.2008, 23:17
  4. Rahmen-menü
    Von FLash im Forum Support zum VMSone
    Antworten: 2
    Letzter Beitrag: 10.02.2008, 07:45
  5. VMS 1.2: Adminforce Professional v2 / Adminforce Pro
    Von SebbyPHM im Forum Support zu Addons & Erweiterungen
    Antworten: 11
    Letzter Beitrag: 02.10.2007, 23:08

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •