Seitenspalte LEFT3 spaltiges LayoutDieses Layout entspricht nahezu dem bekannten free-XL template, besitzt aber als Navigation in der linken Seitenspalte die Variante NAV_LIST_UL, die sich innerhalb einer gesonderten CSS-Datei dem eigenen Geschmack anpassen läßt.
Beide Seitenspalten sind nun einheitlich 200px breit.
|
free-XL_2009 : Sub-Navigation als "ungeordnete Liste"
Hier wird die 2007er Version "navigationstechnisch modernisiert"
Wer von den Nutzern der beliebten free-XL-templates lieber die Navigationsvariante NAV_LIST_UL von flip-flop verwenden möchte, und dabei gleichzeitig die Funktion des sog. LevelLifts integrieren will, kann das selber "nachrüsten".
Einfach der nachfolgenden Anweisung folgen... und die Sache ist in 10 Minuten erledigt!
1. Neue CSS-Klassen in die verwendete frontend.css-Datei einfügen
In der verwendeten CSS-Datei ist die nachfolgende Klasse einzufügen:
/* --- linke Spalte ------------------------------------------ */
/* NEU bei der modifizierten Version: free-XL-2009 */
.content-BOX-links-2009 { padding:15px 0 5px; }
2. Für die Navigation zusätzlich benötigte CSS-Datei einfügen
Folgende CSS-Datei wir zusätzlich benötigt und ist abzuspeichern als:
.../template/inc_css/nlu_navi1.css
/*
================================================================
>= V1.30 CSS for an vertical menu
<div class="nlu_navi1">{ NAV_LIST_UL:F,0,,act_path,active}</div>
Level 0 - 3;
26.03.07 flip-flop (KH)
================================================================
*/
.nlu_navi1 {
margin: 0;
padding: 0;
border: 0;
text-decoration: none;
/* ++ e.g. 11px font and 19px height // z.B. 11px font und 19px hoch */
font: normal normal 11px/19px Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 200px; /* ++ Width of Menu Items // Breite der Navigation */
/* float:left; */
}
.nlu_navi1 em { font-style: normal; }
.nlu_navi1 ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
width: 200px; /* ++ Width of Menu Items // Breite der Navigation */
}
.nlu_navi1 ul li { position: relative; }
/* ==== Styles for Menu Items =================================== */
/* ==== LEVEL X ================================================= */
/* ==== simple link <a> // einfacher Link <a> ==== */
.nlu_navi1 ul li a,
.nlu_navi1 ul li a:link,
.nlu_navi1 ul li a:visited,
.nlu_navi1 ul li a:active {
display: block;
text-decoration: none;
text-transform: none;
color: #FFFFFF; /* ++ Text color // Textfarbe */
/* ++ background color; url of the image; image adjust e.g. left gap 10px */
/* ++ Hintergrundfarbe; URL der Grafik ; Grafik einrücken z.B. 10px */
background: #81909F url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;
/* ++ Text adjust e.g. upper gap and left gap 25px */
/* ++ Text justieren 1px oben und 25px von links */
padding: 1px 0 0 25px;
/* ++ bottom line if you want */
/* ++ Untere Linie wenn gewuenscht */
border-bottom: 1px solid #ccc; /* IE6 Bug */
/* ++ Den "white-space" Fehler im IE7 vermeiden */
/* ++ Killing the "white-space" bug in IE7 */
\width: 200px; /* IE5x Opera <= 5 */
widt\h: 175px; /* = (Width of Menu Items) - (padding-right + padding-left) */
}
/* ==== Aktiv, wenn ein Sublevel vorhanden ist // active point if there is a sub_level ==== */
.nlu_navi1 ul li.sub_ul_true a,
.nlu_navi1 ul li.sub_ul_true a:link,
.nlu_navi1 ul li.sub_ul_true a:visited,
.nlu_navi1 ul li.sub_ul_true a:active {
color: White;
font-weight: normal;
background: #839AAF url(../../img/article/navi1_sub_true.gif) 10px 1px no-repeat;
}
/* ==== Aktiver Pfad - Linkverfolgung im Baum // active path in tree (link tracing) ==== */
.nlu_navi1 ul li.act_path a,
.nlu_navi1 ul li.act_path a:link,
.nlu_navi1 ul li.act_path a:visited,
.nlu_navi1 ul li.act_path a:active {
color: White;
font-weight: bold;
background: #63819F url(../../img/article/navi1_act.gif) 10px 1px no-repeat;
}
/* ==== active link <a> // aktiver Link <a> ==== */
.nlu_navi1 ul li.active a,
.nlu_navi1 ul li.active a:link,
.nlu_navi1 ul li.active a:visited,
.nlu_navi1 ul li.active a:active {
color: White;
font-weight: bold;
background: #63819F url(../../img/article/navi1_act.gif) 10px 1px no-repeat;
}
/* ==== hover: Maus über Link <a> // hover link <a> ==== */
.nlu_navi1 ul li a:hover {
color: White;
/* text-decoration: underline; */
background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
.nlu_navi1 ul li.sub_no a:hover {
color: White;
background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
.nlu_navi1 ul li.sub_ul a:hover {
background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;
}
/* ==== hover: Wenn Sublevel vorhanden <a> // hover: "if there is a sub_level" <a> ==== */
.nlu_navi1 ul li.sub_ul_true a:hover {
background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
/* ==== hover: Der aktive Link <a> // hover: "Only for the active link" <a> ==== */
.nlu_navi1 ul li.active a:hover {
background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;
}
/* ==== LEVEL X+1 =============================================== */
.nlu_navi1 ul ul li.sub_no a,
.nlu_navi1 ul ul li.sub_no a:link,
.nlu_navi1 ul ul li.sub_no a:visited,
.nlu_navi1 ul ul li.sub_no a:active,
.nlu_navi1 ul ul li.sub_ul a,
.nlu_navi1 ul ul li.sub_ul a:link,
.nlu_navi1 ul ul li.sub_ul a:visited,
.nlu_navi1 ul ul li.sub_ul a:active {
display: block;
text-decoration: none;
text-transform: none;
font-weight: normal;
color: #FFFFFF;
background: #8E9FAF url(../../img/article/navi1_norm.gif) 25px 1px no-repeat;
padding: 1px 0 0 40px;
border-bottom: 1px solid #ccc; /* IE6 Bug */
\width: 200px; /* IE5x Opera <= 5 */
widt\h: 160px; /* = (Width of Menu Items) - (padding-right + left) */
}
/* state for the active point if there is a sub_level */
.nlu_navi1 ul ul li.sub_ul_true a,
.nlu_navi1 ul ul li.sub_ul_true a:link,
.nlu_navi1 ul ul li.sub_ul_true a:visited,
.nlu_navi1 ul ul li.sub_ul_true a:active {
color: White;
font-weight: normal;
background: #839AAF url(../../img/article/navi1_sub_true.gif) 25px 1px no-repeat;
}
/* state for the active path (link tracing) */
.nlu_navi1 ul ul li.act_path a,
.nlu_navi1 ul ul li.act_path a:link,
.nlu_navi1 ul ul li.act_path a:visited,
.nlu_navi1 ul ul li.act_path a:active {
color: White;
font-weight: bold;
background: #6D8EAF url(../../img/article/navi1_act.gif) 25px 1px no-repeat;
}
/* state for the active link */
.nlu_navi1 ul ul li.active a,
.nlu_navi1 ul ul li.active a:link,
.nlu_navi1 ul ul li.active a:visited,
.nlu_navi1 ul ul li.active a:active {
color: White;
font-weight: bold;
background: #6D8EAF url(../../img/article/navi1_act.gif) 25px 1px no-repeat;
}
.nlu_navi1 ul ul li a:hover {
color: White;
/* text-decoration: underline; */
background: #6B828F url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
}
.nlu_navi1 ul ul li.sub_no a:hover {
color: White;
background: #6B828F url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
}
.nlu_navi1 ul ul li.sub_ul a:hover {
background: #6B828F url(../../img/article/navi1_act_hov.gif) 25px 1px no-repeat;
}
/* Only for "if there is a sub_level" */
.nlu_navi1 ul ul li.sub_ul_true a:hover {
background: #6B828F url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
}
/* Only for the active link */
.nlu_navi1 ul ul li.active a:hover {
background: #6B828F url(../../img/article/navi1_act_hov.gif) 25px 1px no-repeat;
}
/* ==== LEVEL X+2 =============================================== */
.nlu_navi1 ul ul ul li.sub_no a,
.nlu_navi1 ul ul ul li.sub_no a:link,
.nlu_navi1 ul ul ul li.sub_no a:visited,
.nlu_navi1 ul ul ul li.sub_no a:active,
.nlu_navi1 ul ul ul li.sub_ul a,
.nlu_navi1 ul ul ul li.sub_ul a:link,
.nlu_navi1 ul ul ul li.sub_ul a:visited,
.nlu_navi1 ul ul ul li.sub_ul a:active {
display: block;
text-decoration: none;
text-transform: none;
font-weight: normal;
color: #FFFFFF;
background: #83A1BF url(../../img/article/navi1_norm.gif) 40px 1px no-repeat;
padding: 1px 0 0 55px;
border-bottom: 1px solid #ccc; /* IE6 Bug */
\width: 200px; /* IE5x Opera <= 5 */
widt\h: 145px; /* = (Width of Menu Items) - (padding-right + left) */
}
/* state for the active point if there is a sub_level */
.nlu_navi1 ul ul ul li.sub_ul_true a,
.nlu_navi1 ul ul ul li.sub_ul_true a:link,
.nlu_navi1 ul ul ul li.sub_ul_true a:visited,
.nlu_navi1 ul ul ul li.sub_ul_true a:active {
color: White;
font-weight: normal;
background: #83A1BF url(../../img/article/navi1_sub_true.gif) 40px 1px no-repeat;
}
/* state for the active path (link tracing) */
.nlu_navi1 ul ul ul li.act_path a,
.nlu_navi1 ul ul ul li.act_path a:link,
.nlu_navi1 ul ul ul li.act_path a:visited,
.nlu_navi1 ul ul ul li.act_path a:active {
color: White;
font-weight: bold;
background: #83A1BF url(../../img/article/navi1_act.gif) 40px 1px no-repeat;
}
/* state for the active link */
.nlu_navi1 ul ul ul li.active a,
.nlu_navi1 ul ul ul li.active a:link,
.nlu_navi1 ul ul ul li.active a:visited,
.nlu_navi1 ul ul ul li.active a:active {
color: White;
font-weight: bold;
background: #83A1BF url(../../img/article/navi1_act.gif) 40px 1px no-repeat;
}
.nlu_navi1 ul ul ul li a:hover {
color: White;
/* text-decoration: underline; */
background: #6D879F url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;
}
.nlu_navi1 ul ul ul li.sub_no a:hover {
color: White;
background: #6D879F url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;
}
.nlu_navi1 ul ul ul li.sub_ul a:hover {
background: #6D879F url(../../img/article/navi1_act_hov.gif) 40px 1px no-repeat;
}
/* Only for "if there is a sub_level" */
.nlu_navi1 ul ul ul li.sub_ul_true a:hover {
background: #6D879F url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;
}
/* Only for the active link */
.nlu_navi1 ul ul ul li.active a:hover {
background: #6D879F url(../../img/article/navi1_act_hov.gif) 40px 1px no-repeat;
}
/* ==== END LEVEL X ============================================= */
/* Holly Hack. IE Requirement \*/
* html .nlu_navi1 ul li { float: left; height: 1%; }
* html .nlu_navi1 ul li a { height: 1%; }
/* ==== End nlu_navi1 ========================================= */
3. Die neue CSS-Datei im Template aktivieren
Im verwendeten Template sind jetzt die folgenden CSS-Dateien zu aktivieren:
frontend.css
nlu_navi1.css
4. Aus dem Template zu entfernende Codezeilen
Im verwendeten Template ist folgende Code-Sequenz zu ersetzen:
<!-- ====================================== -->
<td class="TabellenSpalte-links">
<div class="logo-BOX">
{ IMAGE:../templates/free_XL/logo/logo.gif}</div>
<!-- ========== ========== ========== -->
<div class="navigation-BOX">
[ PHP]
$check_id = $GLOBALS['content']['cat_id'];
$struct_id = $GLOBALS['content']['struct'][$check_id]['acat_struct'];
$nav_id = $check_id;
while ($struct_id != 0) {
$nav_id = $struct_id;
$struct_id = $GLOBALS['content']['struct'][$struct_id]['acat_struct'];
}
echo '{ PEPES_NAV_LIST:' . $nav_id . '}';
[ /PHP]
</div>
<div class="content-BOX-links">{ LEFT}</div>
<div class="left-SPACER"> </div>
</td><!-- Ende TabellenSpalte-links -->
5. An der selben Stelle im Template einzusetzende Codezeilen
Dafür ist an der selben Stelle der folgende Code einzusetzen:
<!-- ====================================== -->
<td class="TabellenSpalte-links">
<div class="logo-BOX">
{ IMAGE:../templates/free_XL/logo/logo.gif}</div>
[ PHP]/*
<!-- ========== ========== ========== -->
<!-- vertikale Navigation / alle Ebenen -->
<div class="nlu_navi1">
{ NAV_LIST_UL:FP,0,,act_path,active}
</div><!-- /nlu_navi1 -->
<!-- ========== ========== ========== -->
*/[/PHP]
<!-- ========== ========== ========== -->
[ PHP]
// vertikale Sub-Navigation mit LevelLift - "NEU"
if(isset($GLOBALS['LEVEL_ID'][1])) {
$level_id = $GLOBALS['LEVEL_ID'][1];
echo ' <!-- vertikale Navigation / nur Subebenen -->'.LF;
echo ' <div class="nlu_navi1">'.LF;
echo ' { NAV_LIST_UL:F,'.$level_id.',,act_path,active}';
echo ' </div><!-- /nlu_navi1 -->';
}
[/PHP]
<!-- ========== ========== ========== -->
<div class="content-BOX-links-2009">{ LEFT}</div>
<div class="left-SPACER"> </div>
</td><!-- Ende TabellenSpalte-links -->
Aktualisierung: 05.01.2010 - 13:34 / Redakteur: Webmaster
|
Seitenspalte RIGHTUntertitel dieses ContentPartsDas ist der Fließtext für die rechte Seitenspalte. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Es wird valider Code generiert
Wer's nicht glauben will...
|
|
|
