Nachfolgend die Css-Datei (Beschreibung ist in jener)
Speichern als bb_navigation.css
Code: Alles auswählen
/*******************************************************************************
Datei : bb_navigation.css
Projekt : Redaxo Navigation
Beschr : CSS Datei fuer NavigationsTemplate
bb_navigation.template
In eure Standard-CSS-Datei bitte folgendes notieren
@import url(/DEIN-CSS-PFAD/bb_navigation.css);
FOLGENDES SOLLTE IN EURER STANDARD-CSS-DATEI NICHT FEHLEN
body { padding:0px; margin:0px; background-color:#FFFFFF; color:#000000; font-family: verdana, arial, helvetica, sans-serif; font-size:11px; }
table { border:0px none #FFFFFF; padding:0px; margin:0px; border-spacing:0px; }
tr { border:0px none #FFFFFF; padding:0px; margin:0px; }
td { border:0px none #FFFFFF; padding:0px; margin:0px; vertical-align:top; }
img { border:0px none #FFFFFF; }
a, a:link, a:visited { text-decoration:none; color:#000000; }
a:hover { text-decoration:underline; color:#000000; }
DAMIT WIRD ALLES ERSTEINMAL AUF NULL GESETZT, DAMIT MAN DANACH AN DAS GESTALTEN GEHEN KANN
Autor : ORIGINAL
Thomas Blum (TBaDDadE)
mail[at]blumbeet.com
http://www.blumbeet.com
Erstellt : 06.09.2004
Modifiziert :
© BLUMBEET, http://www.blumbeet.com, 2004 BY THE GNU GENERAL PUBLIC LICENSE
*******************************************************************************/
/*******************************************************************************
NAVIGATION
Anmerkung:
MainMenu = Hauptnavigation = Hauptordner im RedaxoBackend
SubMenu = Unternavigation = Unterordner vom Hauptordnern im RedaxoBackend
Aktiv = Status bei der aufgerufenen Seite
Inaktiv = Status bei der nicht aufgerufenen Seiten
Icon = wenn Icon gewuenscht dann im Template die Pfade, Breite und Hoehe anpassen (Zeile 38 + 39)
wenn kein Icon gewuenscht dann im Template die Breite und Hoehe auf 0 einstellen (Zeile 38 + 39)
Button = der Button als solches
SourceCode der ausgegeben wird bzw. hier zur Veranschaulichung wo sich die einzelnen Klassen befinden
<table class="Menu" cellspacing="0">
<tr>
<td>
<table id=MainMenu class=MainMenu cellspacing=0>
<tr>
<td class=MainInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
<td class=MainInaktivButton><a href=index.php?article_id=1>HOME</a></td>
</tr>
<tr>
<td class=MainInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
<td class=MainInaktivButton><a href=index.php?article_id=3>NEWS</a></td>
</tr>
<tr>
<td class=MainAktivIcon><img src=/files/na.gif width=0 height=0 alt=blank /></td>
<td class=MainAktivButton><a href=index.php?article_id=2>BOARDS</a></td>
</tr>
<tr>
<td class=MainInaktivIcon></td>
<td>
<table id=SubMenu class=SubMenu cellspacing=0>
<tr>
<td class=SubInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
<td class=SubInaktivButton><a href=index.php?article_id=17>ALLGEMEIN</a></td>
</tr>
<tr>
<td class=SubInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
<td class=SubInaktivButton><a href=index.php?article_id=18>LERN MICH KENNEN</a></td>
</tr>
<tr>
<td class=SubInaktivIcon></td>
<td class=SubInaktivButtonLeer> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class=MainInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
<td class=MainInaktivButton><a href=index.php?article_id=8>OPEN BOARD</a></td>
</tr>
<tr>
<td class=MainInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
<td class=MainInaktivButton><a href=index.php?article_id=5>USERLISTE</a></td>
</tr>
<tr>
<td class=MainInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
<td class=MainInaktivButton><a href=index.php?article_id=21>TEST Board</a></td>
</tr>
<tr>
<td></td>
<td class=MainInaktivButtonLeer> </td>
</tr>
<tr>
<td class=MainInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
<td class=MainInaktivButton><a href=index.php?article_id=11>KONTAKT</a></td>
</tr>
<tr>
<td class=MainInaktivIcon><img src=/files/np.gif width=0 height=0 alt=blank /></td>
<td class=MainInaktivButton><a href=index.php?article_id=12>IMPRESSUM</a></td>
</tr>
</table>
</td>
</tr>
</table><br />
*******************************************************************************/
/* formatiert die Tabelle des Menu
<table class="Menu"> */
.Menu {
width:100%;
border:1px solid #D4D4D4;
background-color:#FFFFFF;
}
/* formatiert die Tabelle des MainMenu
<table class="MainMenu"> */
.MainMenu { width:100%; }
/* formatiert die Zelle des Icon im MainMenu
<td class="MainAktivIcon"> bzw. <td class="MainInaktivIcon"> */
.MainMenu .MainAktivIcon {
width:0px;
text-align:center;
vertical-align:middle;
background-color:transparent;
padding:0px 0px 0px 0px;
}
.MainMenu .MainInaktivIcon {
width:0px;
text-align:center;
vertical-align:middle;
background-color:transparent;
padding:0px 0px 0px 0px;
}
/* formatiert die Zelle des Button im MainMenu
<td class="MainAktivButton"> bzw. <td class="MainInaktivButton"> */
.MainMenu .MainAktivButton {
font-size:11px;
background-color:transparent;
vertical-align:middle;
}
.MainMenu .MainInaktivButton {
font-size:11px;
background-color:transparent;
vertical-align:middle;
}
/* formatiert den Link in der Zelle des Button im MainMenu
<a class="MainAktivButton"> bzw. <a class="MainInaktivButton"> */
.MainMenu .MainAktivButton a:link, .MainMenu .MainAktivButton a:visited {
display:block;
border-left:4px solid #CCCCCC;
border-right:8px solid #CCCCCC;
padding:10px 10px 10px 10px;
color:#333333;
text-decoration:none;
background-color:#DDDDDD;
}
.MainMenu .MainAktivButton a:hover {
display:block;
text-decoration:underline;
}
.MainMenu .MainInaktivButton a:link, .MainMenu .MainInaktivButton a:visited {
display:block;
border-left:4px solid #DDDDDD;
border-right:8px solid #DDDDDD;
padding:10px 10px 10px 10px;
color:#999999;
text-decoration:none;
background-color:#EEEEEE;
}
.MainMenu .MainInaktivButton a:hover {
display:block;
border-left:4px solid #CCCCCC;
border-right:8px solid #CCCCCC;
color:#333333;
text-decoration:none;
background-color:#DDDDDD;
}
/* formatiert den Button im MainMenu dessen Hauptordner keine Bezeichnung hat
<td class="MainInaktivButtonLeer"> */
.MainMenu .MainInaktivButtonLeer {
border-left:4px solid #DDDDDD;
border-right:8px solid #DDDDDD;
padding:10px 10px 10px 10px;
background-color:#EEEEEE;
}
/* formatiert die Tabelle des SubMenu
<table class="SubMenu"> */
.SubMenu { width:100%; margin:0px 0px 0px 0px; background-color:#CCCCCC; }
/* formatiert die Zelle des Icon im SubMenu
<td class="SubAktivIcon"> bzw. <td class="SubInaktivIcon"> */
.SubMenu .SubAktivIcon {
width:0px;
text-align:center;
vertical-align:middle;
background-color:transparent;
padding:0px 0px 0px 0px;
}
.SubMenu .SubInaktivIcon {
width:0px;
text-align:center;
vertical-align:middle;
background-color:transparent;
padding:0px 0px 0px 0px;
}
/* formatiert die Zelle des Button im SubMenu
<td class="SubAktivButton"> bzw. <td class="SubInaktivButton"> */
.SubMenu .SubAktivButton {
font-size:11px;
vertical-align:middle;
background-color:transparent;
border-left:8px solid #CCCCCC;
}
.SubMenu .SubInaktivButton {
font-size:11px;
vertical-align:middle;
background-color:transparent;
border-left:8px solid #CCCCCC;
}
/* formatiert den Link in der Zelle des Button im SubMenu
<a class="SubAktivButton"> bzw. <a class="SubInaktivButton"> */
.SubMenu .SubAktivButton a:link, .SubMenu .SubAktivButton a:visited {
display:block;
border-left:4px solid #CCCCCC;
border-right:8px solid #CCCCCC;
padding:10px 10px 10px 10px;
color:#333333;
text-decoration:none;
background-color:#DDDDDD;
}
.SubMenu .SubAktivButton a:hover {
display:block;
text-decoration:underline;
}
.SubMenu .SubInaktivButton a:link, .SubMenu .SubInaktivButton a:visited {
display:block;
border-left:4px solid #DDDDDD;
border-right:8px solid #DDDDDD;
padding:10px 10px 10px 10px;
color:#999999;
text-decoration:none;
background-color:#EEEEEE;
}
.SubMenu .SubInaktivButton a:hover {
display:block;
border-left:4px solid #CCCCCC;
border-right:8px solid #CCCCCC;
color:#333333;
text-decoration:none;
background-color:#DDDDDD;
}
/* formatiert den Button im SubMenu dessen Unterordner keine Bezeichnung hat
<td class="SubInaktivButtonLeer"> */
.SubMenu .SubInaktivButtonLeer {
height:24px;
font-size:2px;
border-left:4px solid #DDDDDD;
border-right:8px solid #DDDDDD;
padding:0px 0px 0px 0px;
background-color:#EEEEEE;
}
Nachfolgend die Template-Datei (Beschreibung ist in jener)
Speichern als bb_navigation.template
Code: Alles auswählen
<!-- ---------------------------------------------------------------------------
Datei : bb_navigation.template
Projekt : Redaxo Navigation
Beschr : Diese Datei als Template im RedaxoBackend speichern
und im Haupttemplate mit dieser Zeile aufrufen
include $REX[INCLUDE_PATH]."/generated/templates/??.template";
?? TemplateZahl einfuegen
Das Layout kann ueber die mitgelieferte CSS-Datei gestaltet werden
Wenn Icons gewuenscht dann in dieser Datei die Pfade, Breite und Hoehe anpassen (Zeile 38 + 39)
Wenn keine Icons gewuenscht dann in dieser Datei die Breite und Hoehe auf 0 einstellen (Zeile 38 + 39)
Autor : ORIGINAL
Redaxo Entwickler
MODIFIKATION
Thomas Blum (TBaDDadE)
mail[at]blumbeet.com
http://www.blumbeet.com
Erstellt :
Modifiziert : 06.09.2004
---------------------------------------------------------------------------- -->
<table class="Menu" cellspacing="0">
<tr>
<td><?
////////////////////////////////////////////////////////////////////////////////
// HIER DIE ICONS EINSTELLEN
$AktivIcon = "<img src=/files/na.gif width=0 height=0 alt=blank />";
$InaktivIcon = "<img src=/files/np.gif width=0 height=0 alt=blank />";
////////////////////////////////////////////////////////////////////////////////
// USER STATUS FUER PERSOENLICHE NAVI
$utype_id = 1;
if ($FORM[USR]) $utype_id = $FORM[USER]->getValue("singlestatus");
// PFAD AUSLESEN
$cat_id = $this->getValue("category_id");
$path = explode("-",$this->getValue("path"));
$showpath = "/ <a href=index.php?article_id=8 class=white>Home</a>";
$cat1 = current($path)+0;
next($path);
$cat2 = current($path)+0;
next($path);
$cat3 = current($path)+0;
// 2. NAVI
$NAV2 = "";
$cat_id = $cat2;
@include $REX[INCLUDE_PATH]."/generated/categories/$cat_id.list.category";
$NAV = $REX[RECAT][$cat_id];
for ($i=0;$i<count($NAV);$i++)
{
$id = current($NAV);
$aid = $REX[CAT][$id][article_id];
$name = $REX[CAT][$id][name];
if ($i==0) $NAV2 .= "<table id=SubMenu class=SubMenu cellspacing=0>";
//<table> Nochmal Eingerueckt um bessere Uebersicht zu bekommen
@include $REX[INCLUDE_PATH]."/generated/articles/$aid.article";
$type_id = $REX[ART][$aid][type_id];
if ($aid == 1) $type_id = 1; // HOME PAGE AUSNAHME
$CST = true;
if ($type_id>$utype_id) $CST = false;
if ($cat3==$id and $REX[CAT][$id][status]==1 and $CST)
{
$NAV2 .= "<tr>
<td class=SubAktivIcon>$AktivIcon</td>
<td class=SubAktivButton>"."<a href=index.php?article_id=$aid>$name</a></td>
</tr>";
}elseif ($REX[CAT][$id][status]==1 and $CST)
{
if ($name == "")
{
$NAV2 .= "<tr>
<td class=SubInaktivIcon></td>
<td class=SubInaktivButtonLeer> </td>
</tr>";
}else
{
$NAV2 .= "<tr>
<td class=SubInaktivIcon>$InaktivIcon</td>
<td class=SubInaktivButton><a href=index.php?article_id=$aid>$name</a></td>
</tr>";
}
}
if (($i+1)==count($NAV)) $NAV2 .= "</table>";
//</table> Nochmal Eingerueckt um bessere Uebersicht zu bekommen
next($NAV);
}
// 1. NAVI
$NAV1 = "";
$cat_id = 0;
@include $REX[INCLUDE_PATH]."/generated/categories/$cat_id.list.category";
$NAV = $REX[RECAT][$cat_id];
for ($i=0;$i<count($NAV);$i++)
{
$id = current($NAV);
$aid = $REX[CAT][$id][article_id];
$name = $REX[CAT][$id][name];
if ($i==0) $NAV1 .= "<table id=MainMenu class=MainMenu cellspacing=0>";
//<table> Nochmal Eingerueckt um bessere Uebersicht zu bekommen
@include $REX[INCLUDE_PATH]."/generated/articles/$aid.article";
$type_id = $REX[ART][$aid][type_id];
if ($aid == 1) $type_id = 1; // HOME PAGE AUSNAHME
$CST = true;
if ($type_id>$utype_id) $CST = false;
if ($cat2==$id and $REX[CAT][$id][status]==1 and $CST)
{
$NAV1 .= "<tr>
<td class=MainAktivIcon>$AktivIcon</td>
<td class=MainAktivButton>"."<a href=index.php?article_id=$aid>$name</a></td>
</tr>";
if ($NAV2 != "") $NAV1 .= "<tr>
<td class=MainInaktivIcon></td>
<td>$NAV2</td>
</tr>";
}elseif ($REX[CAT][$id][status]==1 and $CST)
{
if ($name == "")
{
$NAV1 .= "<tr>
<td></td>
<td class=MainInaktivButtonLeer> </td>
</tr>";
}else
{
$NAV1 .= "<tr>
<td class=MainInaktivIcon>$InaktivIcon</td>
<td class=MainInaktivButton><a href=index.php?article_id=$aid>$name</a></td>
</tr>";
}
}
if (($i+1)==count($NAV)) $NAV1 .= "</table>";
//</table> Nochmal Eingerueckt um bessere Uebersicht zu bekommen
next($NAV);
}
echo $NAV1;
?>
</td>
</tr>
</table><br />
Ich versteh zwar nichts von PHP, aber den Code so anzupassen das dieser per CSS gestaltet werden kann, das ist mein Ding. Wenn Ihr Hilfe braucht dann eMail an mich.
HOFFE es funktionert alles.
Gruss Thomas[/code]