Frage zur Navigation
Frage zur Navigation
Hallo,
Nachdem ich das Forum hoch und runter gesucht habe, Millionen (nicht ganz aber nahe dran) von verschiedenen Navigationen gefunden habe aber bei keiner so richtig und wirklich durchblicke (mal ein paar Brocken in deutsch, dann wieder nur englisch) mach ich nun diesen Beitrag auf und hoffe auf Hilfe.
Das was ich brauche ist eine ganz normale vertikale Navigation. Das Sahnehäubchen wäre es, wenn es sowas als ähnliche Version zum aufklappen wie es auch für die Horizontale Version gibt. In Css kann ich mich recht gut einfuchsen, von PHP hab ich keinen Plan, kann mir also leider nicht selber was bauen ...
Danke schon mal im Voraus falls mir wirklich noch zu helfen ist
Nachdem ich das Forum hoch und runter gesucht habe, Millionen (nicht ganz aber nahe dran) von verschiedenen Navigationen gefunden habe aber bei keiner so richtig und wirklich durchblicke (mal ein paar Brocken in deutsch, dann wieder nur englisch) mach ich nun diesen Beitrag auf und hoffe auf Hilfe.
Das was ich brauche ist eine ganz normale vertikale Navigation. Das Sahnehäubchen wäre es, wenn es sowas als ähnliche Version zum aufklappen wie es auch für die Horizontale Version gibt. In Css kann ich mich recht gut einfuchsen, von PHP hab ich keinen Plan, kann mir also leider nicht selber was bauen ...
Danke schon mal im Voraus falls mir wirklich noch zu helfen ist
Liebe Grüße
Nicole
Nicole
Re: Frage zur Navigation
Moin Nicole...wieso hast du Zeit, dir die Nacht um die Ohren zu schlagen???
Das ist PFLICHT: http://forum.phpwcms.org/viewtopic.php?p=83839#p83839 Und keine Widerworte, bitte!!! Da mußt du durch...
Da bauen nahezu alle "modernen Navis" drauf auf... oder stammen davon ab.
flip-flop hat alle zusammengetragen, was du brauchst!
Erst mal nur kopieren, wie beschrieben... dann kleine Änderungen in den CSS machen und die Auswirkungen beobachten... nur so geht's
Viel Spaß dabei
Das ist PFLICHT: http://forum.phpwcms.org/viewtopic.php?p=83839#p83839 Und keine Widerworte, bitte!!! Da mußt du durch...
Da bauen nahezu alle "modernen Navis" drauf auf... oder stammen davon ab.
flip-flop hat alle zusammengetragen, was du brauchst!
Erst mal nur kopieren, wie beschrieben... dann kleine Änderungen in den CSS machen und die Auswirkungen beobachten... nur so geht's
Viel Spaß dabei
Re: Frage zur Navigation
Hi Pepe,
Ich hab es schon befürchtet das es nur eine horizontale Navi mit flyout gibt
dann muss ich mir für die Unterpunkte was ausdenken und mich noch mal durch den von dir verlinkten Beitrag wühlen - bisher verstehe ich leider nur Baukasten
Danke an dich ...
Ich hab es schon befürchtet das es nur eine horizontale Navi mit flyout gibt
dann muss ich mir für die Unterpunkte was ausdenken und mich noch mal durch den von dir verlinkten Beitrag wühlen - bisher verstehe ich leider nur Baukasten
Danke an dich ...
Liebe Grüße
Nicole
Nicole
Re: Frage zur Navigation
Was für eine Musterlösung hast du denn "im Auge" ???
Also welche Site hat denn dein "muss ich haben" geweckt?
Also welche Site hat denn dein "muss ich haben" geweckt?
Re: Frage zur Navigation
Natürlich gibt es so etwas und funktioniert auch. Es ist halt nur ein wenig Arbeit notwendig.Ich hab es schon befürchtet das es nur eine horizontale Navi mit flyout gibt
- {NAV_HORIZ_DD:ID,Level-depth} -> hier die CSS-Vorlage vertikal: http://www.cssplay.co.uk/menus/flyout_4level.html
Und es geht definitiv.
Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Re: Frage zur Navigation
Na ja ich hab eben beschlossen meiner Seite ein komplett neues Design zu widmen, dabei soll die Navigation oben neben dem Header sein. Keine Ahnung wo ich das mal gesehen habe aber das "Muss ich haben" kam so nebenherpepe wrote:Was für eine Musterlösung hast du denn "im Auge" ???
Also welche Site hat denn dein "muss ich haben" geweckt?
Na wenn das keine guten Neuigkeiten sind - leider bin ich wohl blind und find im letzen Link die CSS Datei nicht oder ist das nur ein Beispiel wie es aussehen kann wenn man wei? wie?flip-flop wrote: Natürlich gibt es so etwas und funktioniert auch. Es ist halt nur ein wenig Arbeit notwendig.
- {NAV_HORIZ_DD:ID,Level-depth} -> hier die CSS-Vorlage vertikal: http://www.cssplay.co.uk/menus/flyout_4level.html
Liebe Grüße
Nicole
Nicole
Re: Frage zur Navigation
Großes Sorry, hab die CSS gefunden (für alle die auch suchen, im Quelltext der Seite und nicht als extra Datei)
Gut dann werd ich mich mal austoben und rumprobieren.
Danke für die prompte Hilfe
Gut dann werd ich mich mal austoben und rumprobieren.
Danke für die prompte Hilfe
Liebe Grüße
Nicole
Nicole
Re: Frage zur Navigation
Hier das Skript für {NAV_VERT_FO:ID,Depth} für die CSS von http://www.cssplay.co.uk/menus/flyout_4level.html (CSS siehe auch unten).
nach /template/inc_script/frontend_render/rt_nav_vert_fly_out.php
Aufruf: <div class="vert_menu">{NAV_VERT_FO:0,10}</div> (Klassenname eventuell anpassen)
[EDIT +22.05.08] CSS-Datei: /template/inc_css/rt_nav_vert_fly_out.css
[/EDIT]
[EDIT +23.05.08]
Neue Variante unter http://www.cssplay.co.uk/menus/flyout_4level.html erschienen.
Die PHP-Datei sollte dazu ab ~ Zeile 82 geändert werden:
Jetzt kann auch der neue Menügenerator verwendet werden. (Innerhalb von 10 Minuten kann nun eine CSS-Datei generiert werden). Unglaublich.
Aufruf mit generierter CSS z.B.: <div class="menu">{NAV_VERT_FO:0,10}</div>
Soll der aktive Pfad auch kenntlich gemacht werden, kann in die CSS-Datei folgendes eingesetzt werden:
Neuer tread: Komplette - {NAV_VERT_FO:ID,level-depth}
[/EDIT]
Knut
nach /template/inc_script/frontend_render/rt_nav_vert_fly_out.php
Aufruf: <div class="vert_menu">{NAV_VERT_FO:0,10}</div> (Klassenname eventuell anpassen)
Code: Select all
<?php
// **************************************************************************
// 08.11.07 vertical fly-out with ID output -> NAVI VERTICAL FLY-OUT
// Oliver Georgi
// http://www.phpwcms.de/forum/viewtopic.php?p=89743#89743
// 08.11.07 KH (flip-flop) Enhanced: Start[ID] {NAV_VERT_FO:ID}
// 08.05.08 KH (flip-flop) Enhanced: Level depth {NAV_VERT_FO:ID,Depth}
// TAG [horizontal]: http://www.phpwcms.de/forum/viewtopic.php?p=89743#89743
// TAG [vertical]: http://forum.phpwcms.org/viewtopic.php?p=103442#p103442
//
// TAG: {NAV_VERT_FO:ID,Depth}
// Location: Put it into the file e.g.:
// /template/inc_script/frontend_render/rt_nav_vert_fly_out.php
// Switch in conf.inc.php: $phpwcms['allow_ext_render'] = 1;
// **************************************************************************
// ----------------------------------------------------------------
// obligate check for phpwcms constants
if (!defined('PHPWCMS_ROOT')) {
die("You Cannot Access This Script Directly, Have a Nice Day.");
}
// ----------------------------------------------------------------
if( ! ( strpos($content["all"],'{NAV_VERT_FO')==false ) ) {
$content["all"] = str_replace('{NAV_VERT_FO}','{NAV_VERT_FO:0,100}',$content["all"]);
$content["all"] = preg_replace('/\{NAV_VERT_FO:(.*?)\}/i','{NAV_VERT_FO:$1,100}', $content["all"]);
$content["all"] = preg_replace('/\{NAV_VERT_FO:(.*?),(.*?)\}/e','buildNavi_vert("$1","0","$2"-1);', $content["all"]);
}
// $content['all'] = str_replace('{NAVI}', buildNavi(), $content['all']);
function buildNavi_vert($start=0, $counter=0, $depth=0) {
$t = array();
$struct = getStructureChildData($start); // Catch structure
if($counter == 0) {
$last = count($struct) - 1;
} else {
$last = 0;
}
$x = 0;
foreach($struct as $value) {
// Is it a active path ? ========
// Ist dies der aktive Pfad ? ========
if( isset($GLOBALS['LEVEL_KEY'][ $value['acat_id'] ]) ) {
$p1 = ' act_path';
} else {
$s = ''; // Reset $struct
$p1 = '';
}
// Only if there is a sub level ========
// Nur wenn SubLevel vorhanden ist ========
if($GLOBALS['content']['cat_id'] == $value['acat_id']) {
$a1 = ' act_path'; // Only for a direct call // Nur bei direktem Aufruf (FirstLevel active)
$a3 = ''; // Not in use
} else { // If first level isn´t active // Wenn FirstLevel nicht aktiv
$a1 = $p1;
$a3 = '';
}
// ==========================
// -- <D01> -------------------------------------------------------------------
// Preset level depth added
// Ebenetiefenvorgabe hinzugefuegt
// $s = buildNavi_horiz($value['acat_id'], $counter+1);
if (($counter) < $depth) {$s = buildNavi_vert($value['acat_id'], $counter+1, $depth);
}
else {$s = '';}
// -- <D01> -------------------------------------------------------------------
if($s) {
$g = '<!--[if IE 7]><!--></a><!--<![endif]-->';
$g .= $s;
$g .= LF . str_repeat(' ', $counter);
// $class = $counter ? (' class="fly_ul '.$a1.'"') : (' class="sub_ul '.$a1.'"'); // Second level with activ category
$class = $counter ? (' class="fly_ul"') : (' class="sub_ul '.$a1.'"');
$close_li = str_repeat(' ', $counter+1);
} else {
$g = '</a>';
$class = ' class="sub_no"'; // If you don´t use the sub_no please change to: $class = '';
// -- <P01> -------------------------------------------------------------------
// Only the first level if there is no sub level
// Ausschlieszlich das erste Level wenn kein Sublevel vorhanden ist
if ($counter == 0) {
$class = ' class="sub_no'.$a1.'"'; // Set it, it is active or not // Es ist aktiv oder nicht
}
// -- <P01> -------------------------------------------------------------------
$close_li = '';
}
// first li in block =======
// Erstes li im letzten Block =======
if( $last && $last == $x ) {
$enclose = ' class="vert_enclose"';
} elseif( $x || ($counter == 0 && $x == 0) ) {
$enclose = '';
} else {
$enclose = ' class="vert_enclose"';
}
// IDs for every li ======= If you need the ID class, please uncomment/comment
// IDs fuer jedes li ======= Wenn sie die ID Klassen benötigen, bitte dekommentieren/kommentieren
// $l = str_repeat(' ', $counter+1) . '<li'. $class . ' id="cat-id_' . $value['acat_id'] . '">';
$l = str_repeat(' ', $counter+1) . '<li'. $class . '>';
$l .= get_level_ahref($value['acat_id'], $enclose) . html_specialchars($value['acat_name']);
$l .= $g;
$l .= $close_li . '</li>';
$t[] = $l;
$x++;
}
if($counter) {
$A = LF . str_repeat(' ', $counter) . '<!--[if lte IE 6]><table><tr><td><![endif]-->';
$B = LF . str_repeat(' ', $counter) . '<!--[if lte IE 6]></td></tr></table></a><![endif]-->';
} else {
$A = '';
$B = '';
}
$t = implode(LF, $t);
if($t) {
$t = $A . LF . str_repeat(' ', $counter) . '<ul>' . LF . $t . LF . str_repeat(' ', $counter) . '</ul>'. $B ;
}
/*
// -- <E01> -------------------------------------------------------------------
// EDIT: 07/11/25 KH. (flip-flop) including simple Tags in category headline from the file
// /include/inc_front/front.func.inc.php and the function html_parser($string)
// you can copy&paste what you want.
// ========== copy&paste ===========
// typical html formattings
$search[18] = '/\[i\](.*?)\[\/i\]/is'; $replace[18] = '<i>$1</i>';
$search[19] = '/\[u\](.*?)\[\/u\]/is'; $replace[19] = '<u>$1</u>';
$search[20] = '/\[s\](.*?)\[\/s\]/is'; $replace[20] = '<strike>$1</strike>';
$search[21] = '/\[b\](.*?)\[\/b\]/is'; $replace[21] = '<strong>$1</strong>';
// added simple [br] -> <br />
$search[25] = '/\[br\]/i'; $replace[25] = '<br />';
// ========== end copy&paste ========
$t = preg_replace($search, $replace, $t);
// -- <E01> -------------------------------------------------------------------
*/
return $t;
}
?>
Code: Select all
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout_4level.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
08.11.07 KH (flip-flop) Enhanced: Start[ID] {NAV_VERT_FO:ID}
08.05.08 KH (flip-flop) Enhanced: Level depth {NAV_VERT_FO:ID,Depth}
Tag [horizontal]: http://www.phpwcms.de/forum/viewtopic.php?p=89743#89743
Tag [vertical]: http://forum.phpwcms.org/viewtopic.php?p=103442#p103442
=================================================================== */
.vert_menu {
height:150px;
font-size:90%;
margin:0px 0 50px 0px; /* this page only */
}
/* remove all the bullets, borders and padding from the default list styling */
.vert_menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:200px; /* Kh 150px; */
}
/* style the list items */
.vert_menu li {
background:#d4d8bd url(../../img/article/navi/shade.gif);
height:26px;
list-style-type:none;
/* for IE7 */
float:left;
}
.vert_menu li.sub_ul, .vert_menu li.fly_ul {background:#d4d8bd url(../../img/article/navi/sub.gif) no-repeat right center;}
.vert_menu li.act_path {background:#cccccc url(../../img/article/navi/sub.gif) no-repeat right center;}
/* get rid of the table */
.vert_menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
.vert_menu a, .vert_menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:199px; /* KH 149px; */
color:#000;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 1px;
}
/* hack for IE5.5 */
* html .vert_menu a, * html .vert_menu a:visited {width:200px; w\idth:199px;} /* KH {width:150px; w\idth:149px;} */
/* style the link hover */
* html .vert_menu a:hover {color:#efa; background:#aa7; position:relative;}
.vert_menu li:hover {position:relative;}
/* For accessibility of the top level menu when tabbing */
.vert_menu a:active, .vert_menu a:focus {color:#efa; background:#aa7;}
/* retain the hover colors for each sublevel IE7 and Firefox etc */
.vert_menu li:hover > a {color:#efa; background:#aa7;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.vert_menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left: 150px; /* KH 100px; */
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(../../img/article/navi/transparent.gif);
}
/* for browsers that understand this is all you need for the flyouts */
.vert_menu li:hover > ul {visibility:visible;}
/* for IE5.5 and IE6 you need to style each level hover */
/* keep the third level+ hidden when you hover on first level link */
.vert_menu ul a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
.vert_menu ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
.vert_menu ul a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* make the second level visible when hover on first level link */
.vert_menu ul a:hover ul {
visibility:visible;
}
/* make the third level visible when you hover over second level link */
.vert_menu ul a:hover ul a:hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level link */
.vert_menu ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
.vert_menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
[EDIT +23.05.08]
Neue Variante unter http://www.cssplay.co.uk/menus/flyout_4level.html erschienen.
Die PHP-Datei sollte dazu ab ~ Zeile 82 geändert werden:
Code: Select all
// $class = $counter ? (' class="fly_ul"') : (' class="sub_ul '.$a1.'"');
$class = $counter ? (' class="sub fly_ul"') : (' class="sub '.$a1.'"');
Aufruf mit generierter CSS z.B.: <div class="menu">{NAV_VERT_FO:0,10}</div>
Soll der aktive Pfad auch kenntlich gemacht werden, kann in die CSS-Datei folgendes eingesetzt werden:
Code: Select all
.menu li.act_path {background:#cccccc url(../../img/article/navi/sub.gif) no-repeat right center;}
[/EDIT]
Knut
Last edited by flip-flop on Fri 23. May 2008, 17:53, edited 5 times in total.
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Re: Frage zur Navigation
ein ganz dickes fettes riesen Dankeschön .. es hat ohne größere Probleme funktioniert
Liebe Grüße
Nicole
Nicole