CSS, HTML, ilch, jQuery, Web

Dynamische Subnavigation in ilch

von Michel Käser am Sep 4, 2011 - Keine Kommentare

Gestern bin ich auf ilch.de, der Webseite meines früheren favorisierten Content Management Systems (CMS) auf einen spannenden Topic gestossen. Ein Community Mitglied wollte wissen, ob es möglich sei, in ilch dynamische Subnavigationen zu realisieren. Im Gegensatz zu WordPress, in welchem eine solche Funktion bereits von Haus auf integriert ist, muss beim ilch CMS selbst Hand angelegt und gebastelt werden.

Ich habe mich deshalb daran gemacht, eine möglichst einfache und flexible Lösung zu finden, welche sich gut in das CMS integriert und selbst für “Neulinge” einfach anzuwenden ist. Ziemlich schnell ist mir dabei einmal mehr jQuery in den Sinn gekommen. Das JavaScript Framework umfasst eine grosse Anzahl an super Funktionen, wobei uns für diese Baustelle parent() sehr entgegenkommt.

Aber von Anfang. ilch bietet die Möglichkeit, im Backend dynamische Menüs und Navigationen zu erstellen, welche nach einem festgelegten Muster generiert werden. Um mehrstufige Navigationen zu erstellen bietet sich die Möglichkeit, einzelne Links eine Ebene einzurücken, wodurch sie “Tochterelement” des vorhergehenden Menüpunkts werden. Dropdown Navigationen können daher ohne viel Aufwand realisiert werden.

Für den spezifischen Fall des Community Mitglieds sollten die eingerückten Menüpunkte jedoch nur sichtbar sein, wenn die “Elternseite” aufgerufen ist. In einem Beispiel könnte die Navigation wie folgt aussehen:

  •  Home
  • News
    • Lesen
    • Eintragen
  • Forum
  • Kontakt

Würde man die Seite besuchen, bekäme man lediglich die Punkte: Home, News, Forum & Kontakt zu sehen, also die Elemente 1-ster Stufe. Alle “Tochterelemente” (Lesen, Eintragen) würden erst sichtbar, wenn die Seite News aktiv ist.

Wo ist das Problem?

Würde man das Design statisch anfertigen, also ohne die Möglichkeit die Navigationen im Backend des CMS zu verwalten, gäbe es kein Problem. Das Kunststück liegt aber darin, der Navigation dieses Verhalten aufzudrücken, auch wenn es dynamisch generiert wurde, weil:

  • die Navigation “wissen” muss, wo sich der Besucher zur Zeit befindet.
  • die Subnavigation nur angezeigt werden soll, wenn ein Kriterium (eine bestimmte Seite aktiv) erfüllt wird.

Zuerst muss deshalb erreicht werden, dass ilch dem Menüpunkt der momentan aktiven Seite eine Klasse übermittelt, welche den aktiven Zustand signalisiert. Mairu, Coder bei ilch, hat dazu vor längerer Zeit im Forum eine design.php veröffentlicht, welche Besagtes tut.

  1. <?php
  2. // Copyright by Manuel
  3. // Support www.ilch.de
  4. defined (‘main’) or die (‘no direct access’);
  5.  
  6. if (!isset($ILCH_HEADER_ADDITIONS)) {
  7. $ILCH_HEADER_ADDITIONS = ”;
  8. }
  9. if (!isset($ILCH_BODYEND_ADDITIONS)) {
  10. $ILCH_BODYEND_ADDITIONS = ”;
  11. }
  12. class design extends tpl {
  13. var $html;
  14. var $design;
  15. var $vars;
  16. var $was;
  17. var $file;
  18.  
  19. function design ($title, $hmenu, $was = 1, $file = null)
  20. {
  21. global $allgAr;
  22.  
  23. if (!is_null($file)) {
  24. echo ‘<div style="display: block; background-color: #FFFFFF; border: 2px solid #ff0000;">!!Man konnte in einer PHP Datei eine spezielle Index angeben. Damit das Design fuer diese Datei anders aussieht. Diese Funktion wurde ersetzt. Weitere Informationen im Forum auf ilch.de … Thema: <a href="http://www.ilch.de/forum-showposts-13758-p1.html#108812">http://www.ilch.de/forum-showposts-13758-p1.html#108812</a></div>’;
  25. }
  26.  
  27. $this->vars = array();
  28. $this->file = $file; # setzte das file standart 0 weil durch was definiert
  29. $this->was = $was; # 0 = smalindex, 1 = normal index , 2 = admin
  30.  
  31. $this->design = $this->get_design();
  32. $link = $this->htmlfile();
  33.  
  34. $tpl = new tpl ($link, 2);
  35. if ($tpl->list_exists (‘boxleft’)) {
  36. $tpl->set (‘boxleft’ , $this->get_boxes (‘l’, $tpl));
  37. }
  38. if ($tpl->list_exists (‘boxright’)) {
  39. $tpl->set (‘boxright’ , $this->get_boxes (‘r’, $tpl));
  40. }
  41. // ab 0.6 =  … 5 menu listen moeglich
  42. for($i = 1;$i <= 5;$i++) {
  43. if ($tpl->list_exists (‘menunr’ . $i)) {
  44. $tpl->set (‘menunr’ . $i , $this->get_boxes ($i, $tpl));
  45. }
  46. }
  47.  
  48. $ar = array
  49. (‘TITLE’ => $this->escape_explode($title),
  50. ‘HMENU’ => $this->escape_explode($hmenu),
  51. ‘SITENAME’ => $this->escape_explode($allgAr[‘title’]),
  52. ‘hmenuende’ => ”,
  53. ‘vmenuende’ => ”,
  54. ‘hmenubegi’ => ”,
  55. ‘vmenubegi’ => ”,
  56. ‘hmenupoint’ => ”,
  57. ‘vmenupoint’ => ”,
  58. ‘DESIGN’ => $this->design
  59. );
  60. $tpl->set_ar($ar);
  61. $this->html = $tpl->get(0);
  62. $this->html .= ‘{EXPLODE}’;
  63. $this->html .= $tpl->get(1);
  64. unset ($tpl);
  65.  
  66. $zsave0 = array();
  67. preg_match_all ("/\{_boxes_([^\{\}]+)\}/" , $this->html , $zsave0);
  68.  
  69. $this->replace_boxes($zsave0[1]);
  70. unset ($zsave0);
  71. $this->vars_replace();
  72. unset ($this->vars);
  73.  
  74. $this->html = explode(‘{EXPLODE}’, $this->html);
  75. }
  76.  
  77. function addheader($text)
  78. {
  79. if (isset($this->html[0])) {
  80. $this->html[0] = str_replace(‘</head>’,$text."\n</head>" , $this->html[0] );
  81. return true;
  82. } else {
  83. return false;
  84. }
  85. }
  86.  
  87. function header ()
  88. {
  89. global $ILCH_HEADER_ADDITIONS;
  90. $this->addheader($ILCH_HEADER_ADDITIONS);
  91. echo $this->html[0];
  92. unset ($this->html[0]);
  93. }
  94.  
  95. function addtobodyend($text)
  96. {
  97. if (isset($this->html[1])) {
  98. $this->html[1] = str_replace(‘</body>’,$text."\n</body>" , $this->html[1] );
  99. return true;
  100. } else {
  101. return false;
  102. }
  103. }
  104.  
  105. function footer ($exit = 0)
  106. {
  107. global $ILCH_BODYEND_ADDITIONS;
  108. $this->addtobodyend($ILCH_BODYEND_ADDITIONS);
  109. echo $this->html[1];
  110. unset ($this->html[1]);
  111. if ($exit == 1) {
  112. exit();
  113. }
  114. }
  115.  
  116. function escape_explode ($s)
  117. {
  118. $s = str_replace(‘{EXPLODE}’, ‘&#123;EXPLODE&#125;’, $s);
  119. return ($s);
  120. }
  121.  
  122. function htmlfile_ini ()
  123. {
  124. global $menu;
  125. $ma = $menu->get_string_ar();
  126. $ia = array();
  127. if (!file_exists(‘include/designs/’ . $this->design . ‘/design.ini’)) {
  128. return (false);
  129. }
  130. $ia = parse_ini_file (‘include/designs/’ . $this->design . ‘/design.ini’);
  131. arsort($ma);
  132. krsort ($ia);
  133. foreach ($ia as $k => $v) {
  134. $k = preg_replace("/[^a-zA-Z0-9-*]/", "", $k);
  135. $k = str_replace(‘*’, ‘[^-]+’, $k);
  136. foreach ($ma as $k1 => $v1) {
  137. if (preg_match("/" . $k . "/", $k1) AND file_exists(‘include/designs/’ . $this->design . ‘/’ . $v)) {
  138. return ($v);
  139. }
  140. }
  141. }
  142. return (false);
  143. }
  144.  
  145. function htmlfile ()
  146. {
  147. $ini = $this->htmlfile_ini ();
  148. /*
  149. if ( !is_null ($this->file) AND file_exists (‘include/designs/’.$this->design.’/templates/’.$this->file)) {
  150. $f = ‘designs/’.$this->design.’/templates/’.$this->file;
  151. } elseif ( !is_null ($this->file) AND file_exists (‘include/templates/’.$this->file)) {
  152. $f = ‘templates/’.$this->file;
  153. */
  154. if ($this->was == 1 AND $ini !== false) {
  155. $f = ‘designs/’ . $this->design . ‘/’ . $ini;
  156. } elseif ($this->was == 0 AND file_exists (‘include/templates/’ . $this->design . ‘/templates/small_index.htm’)) {
  157. $f = ‘templates/’ . $this->design . ‘/templates/small_index.htm’;
  158. } elseif ($this->was == 0) {
  159. $f = ‘templates/small_index.htm’;
  160. } elseif ($this->was == 1) {
  161. $f = ‘designs/’ . $this->design . ‘/index.htm’;
  162. } elseif ($this->was == 2) {
  163. $f = ‘admin/templates/index.htm’;
  164. }
  165. return ($f);
  166. }
  167.  
  168. function replace_boxes ($zsave0)
  169. {
  170. foreach ($zsave0 as $v) {
  171. $dat = strtolower($v);
  172. $buffer = $this->get_boxcontent ($dat);
  173. if ($buffer !== false) {
  174. $this->vars[‘_boxes_’ . $v] = $buffer;
  175. }
  176. }
  177. if (!is_array($this->vars)) {
  178. $this->vars = array();
  179. }
  180. }
  181.  
  182. function vars_replace()
  183. {
  184. foreach ($this->vars as $k => $v) {
  185. $this->html = str_replace(‘{‘ . $k . ‘}’, $v, $this->html);
  186. }
  187. }
  188. // ####
  189. function get_boxes ($wo , $tpl)
  190. {
  191. global $lang, $allgAr, $menu;
  192. if (is_numeric($wo)) {
  193. $datei = ‘menunr’ . $wo;
  194. } elseif ($wo == ‘l’) {
  195. $datei = ‘boxleft’;
  196. $wo = 1;
  197. } elseif ($wo == ‘r’) {
  198. $datei = ‘boxright’;
  199. $wo = 2;
  200. }
  201.  
  202. $retur = ”;
  203. $ex_ebene = 0;
  204. $ex_was = 1;
  205. $firstmep = false;
  206. $hovmenup = ”;
  207. $abf = "SELECT * FROM `prefix_menu` WHERE wo = " . $wo . " AND ( recht >= " . $_SESSION[‘authright’] . " OR recht = 0 ) ORDER by pos";
  208. $erg = db_query($abf);
  209. while ($r = db_fetch_assoc($erg)) {
  210. $menuar[$r[‘pos’]] = $r;
  211. $menupaths[$r[‘path’]] = $r[‘pos’];
  212. }
  213. //Aktiven Punkt herausfinden
  214. foreach(array_reverse($menu->get_string_ar()) as $path){
  215. $path = str_replace(‘self-’,”,$path);
  216. if (isset($menupaths[$path])) {
  217. $act_pos = $menupaths[$path];
  218. break;
  219. }
  220. }
  221.  
  222. foreach ($menuar as $pos => $row) {
  223. $subhauptx = $row[‘was’];
  224. $whileMenP = ($subhauptx >= 7 ? true : false);
  225. if (($row[‘was’] >= 7 AND $ex_was == 1) OR ($ex_ebene < ($row[‘ebene’]-1)) OR ($ex_was <= 4 AND $row[‘ebene’] <> 0) OR ($row[‘was’] >= 7 AND !$tpl->list_exists($hovmenup))) {
  226. continue;
  227. }
  228. // nur wenn ein menu in die variable $menuzw geschrieben wurde
  229. // wird in diese if abfrage gesprungen
  230. if (($whileMenP === false) AND !empty($menuzw)) {
  231. $menuzw .= $this->get_boxes_get_menu_close ($ex_ebene, 0, $menuzw, $wmpE, $wmpTE, $wmpTEE);
  232. $retur .= $tpl->list_get($datei, array (htmlentities($boxname), $menuzw . $menuzwE));
  233. $menuzw = ”;
  234. }
  235. if ($row[‘was’] == 1) {
  236. // die box wird direkt in die to return variable geschrieben
  237. $buffer = $this->get_boxcontent($row[‘path’]);
  238. $retur .= $tpl->list_get($datei, array ($row[‘name’] , $buffer));
  239. } elseif ($row[‘was’] >= 2 AND $row[‘was’] <= 4) {
  240. // der name des menues wird gesetzt
  241. // und die variable wird gesetzt.
  242. $boxname = $row[‘name’];
  243. $menuzw = ”;
  244. $menuzwE = ”;
  245. $ex_ebene = 0; # ex ebene
  246. $hovmenu = ”;
  247. if ($row[‘was’] == 2 AND $tpl->list_exists(‘hmenupoint’)) {
  248. $hovmenu = ‘hmenu’;
  249. } elseif ($row[‘was’] == 3 AND $tpl->list_exists(‘vmenupoint’)) {
  250. $hovmenu = ‘vmenu’;
  251. }
  252. $firstmep = true;
  253. if (!empty($hovmenu)) {
  254. $menuzw .= $tpl->list_get($hovmenu . ‘begi’, array());
  255. $menuzwE .= $tpl->list_get($hovmenu . ‘ende’, array());
  256. }
  257. $hovmenup = $hovmenu . ‘point’;
  258. } elseif ($whileMenP) {
  259. // menupunkt wird generiert
  260. $ebene = $row[‘ebene’];
  261. $menuTarget = ($subhauptx == 8 ? ‘_blank’ : ‘_self’);
  262. list ($wmpA, $wmpE, $wmpTE, $wmpTEE) = explode (‘|’, $tpl->list_get ($hovmenup, array ($menuTarget, ($subhauptx == 8 ? ” : ‘index.php?’) . $row[‘path’], $row[‘name’], ($row[‘pos’] == $act_pos ? ‘active’ : ‘inactive’))));
  263. if (!empty($menuzw) AND $firstmep === false) {
  264. $menuzw .= $this->get_boxes_get_menu_close ($ex_ebene, $ebene, $menuzw, $wmpE, $wmpTE, $wmpTEE);
  265. }
  266. $menuzw .= $wmpA;
  267. $firstmep = false;
  268. }
  269.  
  270. $ex_was = $row[‘was’];
  271. $ex_ebene = $row[‘ebene’];
  272. }
  273. if (!empty($menuzw)) {
  274. $menuzw .= $this->get_boxes_get_menu_close ($ex_ebene, 0, $menuzw, $wmpE, $wmpTE, $wmpTEE);
  275. $retur .= $tpl->list_get($datei, array (htmlentities($boxname), $menuzw . $menuzwE));
  276. }
  277. return ($retur);
  278. }
  279.  
  280. function get_boxes_get_menu_close ($ex_ebene, $ebene, $menuzw, $wmpE, $wmpTE, $wmpTEE)
  281. {
  282. $menu1 = ”;
  283. if ($ex_ebene == $ebene AND !empty($menuzw)) {
  284. $menu1 .= $wmpE . "\n";
  285. } elseif ($ex_ebene > $ebene) {
  286. $menu1 .= $wmpE . "\n";
  287. for($i = 0;$i < ($ex_ebene - $ebene); $i++) {
  288. $menu1 .= $wmpTEE . "\n";
  289. }
  290. } elseif ($ex_ebene < $ebene) {
  291. $menu1 .= $wmpTE . "\n";
  292. }
  293. return ($menu1);
  294. }
  295.  
  296. function get_boxcontent ($box)
  297. {
  298. global $lang, $allgAr, $menu,$ILCH_HEADER_ADDITIONS,$ILCH_BODYEND_ADDITIONS;
  299. if (file_exists(‘include/boxes/’ . $box)) {
  300. $pfad = ‘include/boxes/’ . $box;
  301. } elseif (file_exists (‘include/contents/selfbp/selfb/’ . str_replace(‘self_’, ”, $box))) {
  302. $pfad = ‘include/contents/selfbp/selfb/’ . str_replace(‘self_’, ”, $box);
  303. } elseif (file_exists(‘include/boxes/’ . $box . ‘.php’)) {
  304. $pfad = ‘include/boxes/’ . $box . ‘.php’;
  305. } elseif (file_exists(‘include/boxes/’ . $box . ‘.htm’)) {
  306. $pfad = ‘include/boxes/’ . $box . ‘.htm’;
  307. } elseif (file_exists (‘include/contents/selfbp/selfb/’ . str_replace(‘self_’, ”, $box) . ‘.php’)) {
  308. $pfad = ‘include/contents/selfbp/selfb/’ . str_replace(‘self_’, ”, $box) . ‘.php’;
  309. } elseif (file_exists (‘include/contents/selfbp/selfb/’ . str_replace(‘self_’, ”, $box) . ‘.htm’)) {
  310. $pfad = ‘include/contents/selfbp/selfb/’ . str_replace(‘self_’, ”, $box) . ‘.htm’;
  311. } else {
  312. return (false);
  313. }
  314. ob_start();
  315. require_once($pfad);
  316. $buffer = $this->escape_explode(ob_get_contents());
  317. ob_end_clean();
  318. return($buffer);
  319. }
  320. }
  321. ?>
<?php
// Copyright by Manuel
// Support www.ilch.de
defined ('main') or die ('no direct access');
if (!isset($ILCH_HEADER_ADDITIONS)) {
$ILCH_HEADER_ADDITIONS = '';
}
if (!isset($ILCH_BODYEND_ADDITIONS)) {
$ILCH_BODYEND_ADDITIONS = '';
}
class design extends tpl {
var $html;
var $design;
var $vars;
var $was;
var $file;
function design ($title, $hmenu, $was = 1, $file = null)
{
global $allgAr;
if (!is_null($file)) {
echo '<div style="display: block; background-color: #FFFFFF; border: 2px solid #ff0000;">!!Man konnte in einer PHP Datei eine spezielle Index angeben. Damit das Design fuer diese Datei anders aussieht. Diese Funktion wurde ersetzt. Weitere Informationen im Forum auf ilch.de ... Thema: <a href="http://www.ilch.de/forum-showposts-13758-p1.html#108812">http://www.ilch.de/forum-showposts-13758-p1.html#108812</a></div>';
}
$this->vars = array();
$this->file = $file; # setzte das file standart 0 weil durch was definiert
$this->was = $was; # 0 = smalindex, 1 = normal index , 2 = admin
$this->design = $this->get_design();
$link = $this->htmlfile();
$tpl = new tpl ($link, 2);
if ($tpl->list_exists ('boxleft')) {
$tpl->set ('boxleft' , $this->get_boxes ('l', $tpl));
}
if ($tpl->list_exists ('boxright')) {
$tpl->set ('boxright' , $this->get_boxes ('r', $tpl));
}
// ab 0.6 =  ... 5 menu listen moeglich
for($i = 1;$i <= 5;$i++) {
if ($tpl->list_exists ('menunr' . $i)) {
$tpl->set ('menunr' . $i , $this->get_boxes ($i, $tpl));
}
}
$ar = array
('TITLE' => $this->escape_explode($title),
'HMENU' => $this->escape_explode($hmenu),
'SITENAME' => $this->escape_explode($allgAr['title']),
'hmenuende' => '',
'vmenuende' => '',
'hmenubegi' => '',
'vmenubegi' => '',
'hmenupoint' => '',
'vmenupoint' => '',
'DESIGN' => $this->design
);
$tpl->set_ar($ar);
$this->html = $tpl->get(0);
$this->html .= '{EXPLODE}';
$this->html .= $tpl->get(1);
unset ($tpl);
$zsave0 = array();
preg_match_all ("/\{_boxes_([^\{\}]+)\}/" , $this->html , $zsave0);
$this->replace_boxes($zsave0[1]);
unset ($zsave0);
$this->vars_replace();
unset ($this->vars);
$this->html = explode('{EXPLODE}', $this->html);
}
function addheader($text)
{
if (isset($this->html[0])) {
$this->html[0] = str_replace('</head>',$text."\n</head>" , $this->html[0] );
return true;
} else {
return false;
}
}
function header ()
{
global $ILCH_HEADER_ADDITIONS;
$this->addheader($ILCH_HEADER_ADDITIONS);
echo $this->html[0];
unset ($this->html[0]);
}
function addtobodyend($text)
{
if (isset($this->html[1])) {
$this->html[1] = str_replace('</body>',$text."\n</body>" , $this->html[1] );
return true;
} else {
return false;
}
}
function footer ($exit = 0)
{
global $ILCH_BODYEND_ADDITIONS;
$this->addtobodyend($ILCH_BODYEND_ADDITIONS);
echo $this->html[1];
unset ($this->html[1]);
if ($exit == 1) {
exit();
}
}
function escape_explode ($s)
{
$s = str_replace('{EXPLODE}', '&#123;EXPLODE&#125;', $s);
return ($s);
}
function htmlfile_ini ()
{
global $menu;
$ma = $menu->get_string_ar();
$ia = array();
if (!file_exists('include/designs/' . $this->design . '/design.ini')) {
return (false);
}
$ia = parse_ini_file ('include/designs/' . $this->design . '/design.ini');
arsort($ma);
krsort ($ia);
foreach ($ia as $k => $v) {
$k = preg_replace("/[^a-zA-Z0-9-*]/", "", $k);
$k = str_replace('*', '[^-]+', $k);
foreach ($ma as $k1 => $v1) {
if (preg_match("/" . $k . "/", $k1) AND file_exists('include/designs/' . $this->design . '/' . $v)) {
return ($v);
}
}
}
return (false);
}
function htmlfile ()
{
$ini = $this->htmlfile_ini ();
/*
if ( !is_null ($this->file) AND file_exists ('include/designs/'.$this->design.'/templates/'.$this->file)) {
$f = 'designs/'.$this->design.'/templates/'.$this->file;
} elseif ( !is_null ($this->file) AND file_exists ('include/templates/'.$this->file)) {
$f = 'templates/'.$this->file;
*/
if ($this->was == 1 AND $ini !== false) {
$f = 'designs/' . $this->design . '/' . $ini;
} elseif ($this->was == 0 AND file_exists ('include/templates/' . $this->design . '/templates/small_index.htm')) {
$f = 'templates/' . $this->design . '/templates/small_index.htm';
} elseif ($this->was == 0) {
$f = 'templates/small_index.htm';
} elseif ($this->was == 1) {
$f = 'designs/' . $this->design . '/index.htm';
} elseif ($this->was == 2) {
$f = 'admin/templates/index.htm';
}
return ($f);
}
function replace_boxes ($zsave0)
{
foreach ($zsave0 as $v) {
$dat = strtolower($v);
$buffer = $this->get_boxcontent ($dat);
if ($buffer !== false) {
$this->vars['_boxes_' . $v] = $buffer;
}
}
if (!is_array($this->vars)) {
$this->vars = array();
}
}
function vars_replace()
{
foreach ($this->vars as $k => $v) {
$this->html = str_replace('{' . $k . '}', $v, $this->html);
}
}
// ####
function get_boxes ($wo , $tpl)
{
global $lang, $allgAr, $menu;
if (is_numeric($wo)) {
$datei = 'menunr' . $wo;
} elseif ($wo == 'l') {
$datei = 'boxleft';
$wo = 1;
} elseif ($wo == 'r') {
$datei = 'boxright';
$wo = 2;
}
$retur = '';
$ex_ebene = 0;
$ex_was = 1;
$firstmep = false;
$hovmenup = '';
$abf = "SELECT * FROM `prefix_menu` WHERE wo = " . $wo . " AND ( recht >= " . $_SESSION['authright'] . " OR recht = 0 ) ORDER by pos";
$erg = db_query($abf);
while ($r = db_fetch_assoc($erg)) {
$menuar[$r['pos']] = $r;
$menupaths[$r['path']] = $r['pos'];
}
//Aktiven Punkt herausfinden
foreach(array_reverse($menu->get_string_ar()) as $path){
$path = str_replace('self-','',$path);
if (isset($menupaths[$path])) {
$act_pos = $menupaths[$path];
break;
}
}
foreach ($menuar as $pos => $row) {
$subhauptx = $row['was'];
$whileMenP = ($subhauptx >= 7 ? true : false);
if (($row['was'] >= 7 AND $ex_was == 1) OR ($ex_ebene < ($row['ebene']-1)) OR ($ex_was <= 4 AND $row['ebene'] <> 0) OR ($row['was'] >= 7 AND !$tpl->list_exists($hovmenup))) {
continue;
}
// nur wenn ein menu in die variable $menuzw geschrieben wurde
// wird in diese if abfrage gesprungen
if (($whileMenP === false) AND !empty($menuzw)) {
$menuzw .= $this->get_boxes_get_menu_close ($ex_ebene, 0, $menuzw, $wmpE, $wmpTE, $wmpTEE);
$retur .= $tpl->list_get($datei, array (htmlentities($boxname), $menuzw . $menuzwE));
$menuzw = '';
}
if ($row['was'] == 1) {
// die box wird direkt in die to return variable geschrieben
$buffer = $this->get_boxcontent($row['path']);
$retur .= $tpl->list_get($datei, array ($row['name'] , $buffer));
} elseif ($row['was'] >= 2 AND $row['was'] <= 4) {
// der name des menues wird gesetzt
// und die variable wird gesetzt.
$boxname = $row['name'];
$menuzw = '';
$menuzwE = '';
$ex_ebene = 0; # ex ebene
$hovmenu = '';
if ($row['was'] == 2 AND $tpl->list_exists('hmenupoint')) {
$hovmenu = 'hmenu';
} elseif ($row['was'] == 3 AND $tpl->list_exists('vmenupoint')) {
$hovmenu = 'vmenu';
}
$firstmep = true;
if (!empty($hovmenu)) {
$menuzw .= $tpl->list_get($hovmenu . 'begi', array());
$menuzwE .= $tpl->list_get($hovmenu . 'ende', array());
}
$hovmenup = $hovmenu . 'point';
} elseif ($whileMenP) {
// menupunkt wird generiert
$ebene = $row['ebene'];
$menuTarget = ($subhauptx == 8 ? '_blank' : '_self');
list ($wmpA, $wmpE, $wmpTE, $wmpTEE) = explode ('|', $tpl->list_get ($hovmenup, array ($menuTarget, ($subhauptx == 8 ? '' : 'index.php?') . $row['path'], $row['name'], ($row['pos'] == $act_pos ? 'active' : 'inactive'))));
if (!empty($menuzw) AND $firstmep === false) {
$menuzw .= $this->get_boxes_get_menu_close ($ex_ebene, $ebene, $menuzw, $wmpE, $wmpTE, $wmpTEE);
}
$menuzw .= $wmpA;
$firstmep = false;
}
$ex_was = $row['was'];
$ex_ebene = $row['ebene'];
}
if (!empty($menuzw)) {
$menuzw .= $this->get_boxes_get_menu_close ($ex_ebene, 0, $menuzw, $wmpE, $wmpTE, $wmpTEE);
$retur .= $tpl->list_get($datei, array (htmlentities($boxname), $menuzw . $menuzwE));
}
return ($retur);
}
function get_boxes_get_menu_close ($ex_ebene, $ebene, $menuzw, $wmpE, $wmpTE, $wmpTEE)
{
$menu1 = '';
if ($ex_ebene == $ebene AND !empty($menuzw)) {
$menu1 .= $wmpE . "\n";
} elseif ($ex_ebene > $ebene) {
$menu1 .= $wmpE . "\n";
for($i = 0;$i < ($ex_ebene - $ebene); $i++) {
$menu1 .= $wmpTEE . "\n";
}
} elseif ($ex_ebene < $ebene) {
$menu1 .= $wmpTE . "\n";
}
return ($menu1);
}
function get_boxcontent ($box)
{
global $lang, $allgAr, $menu,$ILCH_HEADER_ADDITIONS,$ILCH_BODYEND_ADDITIONS;
if (file_exists('include/boxes/' . $box)) {
$pfad = 'include/boxes/' . $box;
} elseif (file_exists ('include/contents/selfbp/selfb/' . str_replace('self_', '', $box))) {
$pfad = 'include/contents/selfbp/selfb/' . str_replace('self_', '', $box);
} elseif (file_exists('include/boxes/' . $box . '.php')) {
$pfad = 'include/boxes/' . $box . '.php';
} elseif (file_exists('include/boxes/' . $box . '.htm')) {
$pfad = 'include/boxes/' . $box . '.htm';
} elseif (file_exists ('include/contents/selfbp/selfb/' . str_replace('self_', '', $box) . '.php')) {
$pfad = 'include/contents/selfbp/selfb/' . str_replace('self_', '', $box) . '.php';
} elseif (file_exists ('include/contents/selfbp/selfb/' . str_replace('self_', '', $box) . '.htm')) {
$pfad = 'include/contents/selfbp/selfb/' . str_replace('self_', '', $box) . '.htm';
} else {
return (false);
}
ob_start();
require_once($pfad);
$buffer = $this->escape_explode(ob_get_contents());
ob_end_clean();
return($buffer);
}
}
?>

Zuerst muss jetzt die design.php im Ordner “include/includes/class” mit einer design.php mit Inhalt des obrigen Codes ersetzt werden.

Der Wert der Funktion wird in %4 gespeichert und kann als Variabel im Design verwendet werden. Dazu erweitern wir die  index.htm des Designs, bzw. den Code darin, welcher für die dynamischen Menus zuständig ist. Dieser könnte editiert wie folgt aussehen:

  1. {_list_vmenupoint@<li class="%4"><a target="%1" href="%2">%3</a></li>|}
{_list_vmenupoint@<li class="%4"><a target="%1" href="%2">%3</a></li>|}

Ist der Besucher nach dieser Änderung auf unserer Webseite auf der Seite News, wird dem Navigationspunkt die Klasse “active” hinzugefügt.

 CSS Eigenschaften

Der erste Schritt ist damit abgeschlossen. Von nun an haben wir die Möglichkeit, die Eigenschaften von aktiven/inaktiven Menüpunkten zu unterscheiden. Der CSS Code hängt davon ab, wie die Subnavigation aussehen soll. Wichtig und in den meisten Fällen richtig, sind folgende Elemente:

  1. ul li ul {display: none} /* Die Subnavigation wird standardmässig nicht angezeigt */
  2. ul li.active ul {display: block} /* Bei aktivem Menüpunkt wird die Subnavigation des Punktes sichtbar */
ul li ul {display: none} /* Die Subnavigation wird standardmässig nicht angezeigt */
ul li.active ul {display: block} /* Bei aktivem Menüpunkt wird die Subnavigation des Punktes sichtbar */

Das ganze funktioniert natürlich nur, wenn das Gerüst, welches durch die dynamische Navigation erzeugt wird, so ist:

  1. <ul>
  2. <li><a href="#">Link</a></li>
  3. <li><a href="#">Link</a></li>
  4. <li><a href="#">Link</a>
  5. <ul>
  6. <li><a href="#">Link</a></li>
  7. <li><a href="#">Link</a></li>
  8. </ul>
  9. </li>
  10. <li><a href="#">Link</a></li>
  11. </ul>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>

jQuery parent()

Zum Schluss kommt das Problem, welches am meisten Zeit in Anspruch genommen hat. ilch vergibt nun zwar die Klasse “active” an den momentanen Menüpunkt, ist dieser aber in der Subnavigation hilft uns das nicht weiter, da wir das vorhergehende <ul> nicht mit CSS ansprechen können.

  1. <ul>
  2. <li><a href="#">Link</a></li>
  3. <li><a href="#">Link</a></li>
  4. <li><a href="#">Link</a>
  5. <ul>
  6. <li><a href="#">Link</a></li>
  7. <li><a href="#">Link</a></li>
  8. </ul>
  9. </li>
  10. <li><a href="#">Link</a></li>
  11. </ul>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>

Wir binden also jQuery in den <head> Bereich unseres Designs ein:

  1. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

als auch die jQuery parent() Funktion, kurz vor dem </body> Tag.

  1. $(‘li.active’).parent().addClass(‘active-parent’);
$('li.active').parent().addClass('active-parent');

Wie wir sehen, fügt diese Funktion dem vorhergehenden <ul> des aktiven li (li.active) die Klasse “active-parent” hinzu. Dieses können wir erneut via CSS ansprechen:

  1. ul li ul.active-parent {display: block} /* Falls ein Unterelement aktiv ist, die Subnavigation aktiv stellen */
ul li ul.active-parent {display: block} /* Falls ein Unterelement aktiv ist, die Subnavigation aktiv stellen */

Ende

Fertig ist das Werk. Damit ihr euch das alles besser vorstellen könnt, habe ich euch die nötigen Dateien in der richtigen Hirarchie zum Download zusammengestellt.

 

Download

Michel Käser

Jahrelange Kenntnisse mit Webdesign, HTML/CSS sowie Search Engine Optimization (SEO) & umfassende Erfahrungen im Web Business machen ihn zu einem starken Mitglied von impres-sign.

Webseite - Twitter - Facebook - Weitere Beiträge

Kommentar hinterlassen