Horizontales Menü für Adminforce

[Most_Wanted]

Sieht ja edel aus
Werde ich bei Gelegenheit mal bei mir so umbauen

[MasterDix]

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.

[CeleronD]

<style type="text/css">

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

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #F3F3F3; /*overall menu background color*/
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 1px solid black;
border-left-width: 0;
text-decoration: none;
color: navy;
}
    
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

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

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

.suckertreemenu ul li a:hover{
background-color: black;
color: white;
}

/*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-top: 1em;
}
    
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

</style> 

<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=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
        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_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)

</script> 

Den Rest kann man sich ja denken oder?

[eaxo]

Die auf obiger Seite aufgeführte CSS habe ich gesplittet und unter suckertree.css und suckertree.js nach /backend/css gespeichert.

<style type="text/css">
[...]
</style> 

<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

[CeleronD]

Ja so is richtig. Nun noch die Datein richtig benennen und in die richtigen Ordner tun.

[MasterDix]

Ich hab keine Ahnung was ich falsch mache, aber ich bekomme nur die Hauptkategorie angezeigt, die Untermenüs jedoch nicht. Hat jemand eine Idee woran es liegen kann?

[CeleronD]

Nein ich hab es auch nicht geschafft. Die Links zu den einzelnen Kategorien enden bei mir immer mit #. Jeder Link ist nicht anklickbar.