Menu mit grafikbuttons in CSS

[divox]

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?

[DerFrank]

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};}

[divox]

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>';
   }
}

[DerFrank]

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>';
   }
}

[divox]

ok, danke

werde es mal versuchen.

[DerFrank]

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