CONTENIDO Forum

Hallo,

ich erstelle gerade eine Internetseite und würde gern die Hilfnavigation als Horizontalesmenü verwenden.

Es sollte so aussehen wie hier: http://www.t-home.de/is-bin/INTERSHOP.e ... heme-Start

Grafik Entertainment , grafik Surfen.......usw.

Grafik und der jeweiliger Menüpunkt dahinter, die Grafik (19 x 19 px) sollte beim Hovereffekt wechseln.

Dieses Modul nutze ich dafür:

Code: Alles auswählen


<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname  :      Hilfsnavigation
* Author(s)   :     Andreas Lindner
* Copyright   :     Contenido - four for business, Andreas Lindner
* Created     :     05.08.2005
************************************************/

cInclude("frontend", "includes/functions.navigation.php");
cInclude('classes', 'class.template.php');
	
$catStart = "CMS_VALUE[0]";
if(($catStart=='')||($catStart=='0')){
    $cApiClient = new cApiClient($client);
    $catStart= $cApiClient->getProperty('navigation', 'idcat_hilfsnavi');
}
if(!is_object($oClient)) {
	$oClient = new cApiClient($client);
}

$navigation = array();
$navigation = createNavigationArray($catStart, $db);


if (count($navigation) > 0) { 
	foreach ($navigation as $key => $data) {
		echo '<img src="images/point_normal.gif" width="19" height="19">&nbsp;&nbsp;<a href="'.$sess->url('front_content.php?idcat='.$data['idcat']).'" class="additionalnavi">'.$data['name'].'</a>';
	} 
}

?>

und das ist der CSS eintrag dafür:

Code: Alles auswählen

 a.additionalnavi, a.additionalnavi:link, a.additionalnavi:visited, a.additionalnavi:active
    {
 
   float:center;
      text-decoration: none;
    padding-right: 20px;  
   text-align:center;
color:rgb(160,160,160);
    }


    a.additionalnavi, a.additionalnavi:hover
    {    
  color: #000000;
    text-decoration: none;  }

Wie kann ich das so einrichten wie bei der oben genanten Seite?

Komischer Aufbau. Das sind zwei Links. Einer mit einem Image drin und einer mit dem Text. Ich würde das dann gleich mit einem CSS background-image machen. Dem Link ein padding-left verpassen, damit das image davor passt und gleich noch den :hover-effekt definieren. Im Prinzip kannst Du das dann über CSS-Klassen lösen.

Code: Alles auswählen

<a href="#" title="title" class="entertainment">Entertainment</a>

Und CSS dann in etwa so

Code: Alles auswählen

a.entertainment{background:url{"entertainment.gif};}
a.entertainment:hover{background:url{"entertainment-hover.gif};}

ok, danke und wir baue ich das dann passend in das Modul ein?

Code: Alles auswählen


if (count($navigation) > 0) {
   foreach ($navigation as $key => $data) {
      echo '<img src="images/point_normal.gif" width="19" height="19">&nbsp;&nbsp;<a href="'.$sess->url('front_content.php?idcat='.$data['idcat']).'" class="additionalnavi">'.$data['name'].'</a>';
   }
}

Naja, die CSS-Klasse musst Du Dir schon selber zusammenbauen.

Code: Alles auswählen

if (count($navigation) > 0) {
   foreach ($navigation as $key => $data) {
      /*
       *  Leerzeichen raus bzw. durch "-" ersetzten. 
       *  Umlaute und Sonderzeichen umwandeln ä = ae
       *  Bsp: "Nasse Füße" wird nasse-fuesze oder nasse-fuesse
       */
      $meineCssKlasse = bereinigeDenKategorienamen($data['name']);

      echo '<a class="' . $meineCssKlasse . '" href="'.$sess->url('front_content.php?idcat='.$data['idcat']).'" class="additionalnavi">'.$data['name'].'</a>';
   }
}

ok, danke

werde es mal versuchen.

Schau Dir auf php.net mal String-Operationen an.

CONTENIDO Forum

Menu mit grafikbuttons in CSS

Menu mit grafikbuttons in CSS

Re: Menu mit grafikbuttons in CSS

Re: Menu mit grafikbuttons in CSS

Re: Menu mit grafikbuttons in CSS

Re: Menu mit grafikbuttons in CSS

Re: Menu mit grafikbuttons in CSS