PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Horizontales Menü für Adminforce


eaxo
16.09.2009, 23:35
So,
ich hab mich mal hingesetzt und die Schritte nachvollzogen beim Einbau des
SuckerTree Horizontal Menu © Dynamic Drive (http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/).
Bei mir hab ich bereits die userbearbeiten.php umgebaut, so schauts aus:
http://www.vms1.de/thumbs/backend16dj.png
(http://www.vms1.de/?img=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

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>
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

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

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

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:

<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

<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:

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
eaxo
25.09.2009, 15:18
Dies ist jetzt mit Absicht ein Doppelpost :knueppel: 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
CeleronD
25.05.2011, 20:54
Wird hier noch etwas weiter gearbeitet?
eaxo
25.05.2011, 21:32
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
Most_Wanted
26.05.2011, 02:04
Sieht ja edel aus :yes:
Werde ich bei Gelegenheit mal bei mir so umbauen :)
MasterDix
28.05.2011, 01:21
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
28.05.2011, 09:34
<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
28.05.2011, 14:11
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
28.05.2011, 15:09
Ja so is richtig. Nun noch die Datein richtig benennen und in die richtigen Ordner tun.
MasterDix
30.05.2011, 21:48
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
30.05.2011, 23:02
Nein ich hab es auch nicht geschafft. Die Links zu den einzelnen Kategorien enden bei mir immer mit #. Jeder Link ist nicht anklickbar.
MasterDix
01.06.2011, 00:26
ich komm auch nur auf die # und es klappt kein Menü auf. Es wäre halt schön, wenn eaxo uns sagten könnte, wo der Fehler liegt :)
eaxo
01.06.2011, 22:43
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.
MasterDix
03.06.2011, 02:06
Wunderbar, vielen Dank. Jetzt funzt es :-D