Frage zur Navigation

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
Post Reply
Blueberry
Posts: 19
Joined: Thu 3. May 2007, 23:29
Contact:

Frage zur Navigation

Post by Blueberry »

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 :mrgreen:
Liebe Grüße
Nicole
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Frage zur Navigation

Post by pepe »

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

Viel Spaß dabei :wink:
Blueberry
Posts: 19
Joined: Thu 3. May 2007, 23:29
Contact:

Re: Frage zur Navigation

Post by Blueberry »

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 ...
Liebe Grüße
Nicole
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Frage zur Navigation

Post by pepe »

Was für eine Musterlösung hast du denn "im Auge" ???

Also welche Site hat denn dein "muss ich haben" geweckt?
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: Frage zur Navigation

Post by flip-flop »

Ich hab es schon befürchtet das es nur eine horizontale Navi mit flyout gibt
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

Und es geht definitiv.

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Blueberry
Posts: 19
Joined: Thu 3. May 2007, 23:29
Contact:

Re: Frage zur Navigation

Post by Blueberry »

pepe wrote:Was für eine Musterlösung hast du denn "im Auge" ???

Also welche Site hat denn dein "muss ich haben" geweckt?
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 nebenher :wink:

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
Na wenn das keine guten Neuigkeiten sind :D - 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?
Liebe Grüße
Nicole
Blueberry
Posts: 19
Joined: Thu 3. May 2007, 23:29
Contact:

Re: Frage zur Navigation

Post by Blueberry »

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 :!:
Liebe Grüße
Nicole
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: Frage zur Navigation

Post by flip-flop »

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)

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;
}
?>
[EDIT +22.05.08] CSS-Datei: /template/inc_css/rt_nav_vert_fly_out.css

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]

[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.'"');
Jetzt kann auch der neue Menügenerator verwendet werden. (Innerhalb von 10 Minuten kann nun eine CSS-Datei generiert werden). Unglaublich. :D

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;}
Neuer tread: Komplette - {NAV_VERT_FO:ID,level-depth}

[/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 )
Blueberry
Posts: 19
Joined: Thu 3. May 2007, 23:29
Contact:

Re: Frage zur Navigation

Post by Blueberry »

ein ganz dickes fettes riesen Dankeschön .. es hat ohne größere Probleme funktioniert :D :D :D
Liebe Grüße
Nicole
Post Reply