Forum

[agent008]

Hallo,

habe die Navigation von a-concept internet.studio "Dropdown-Navigation Horizontal (nur CSS, kein JS)" aus dem Downloadbereich eingebaut und sie funktioniert wirklich problemlos.

Nun sollen die gerade angewählte Menüpunkt der ersten Ebene hervorgehoben werden. Eben auch nach dem Klick soll man sehen wo man gerade in der Navi steht, es soll so aussehen wie auch beim "hover".

Habe hierzu leider keinen Beitrag gefunden, wobei ein Kommentator einen "realtiv einfachen Weg" weiss über http://www.redaxo.de/168-Templatedetail ... late_id=12. Dort sei die Lösung schon drin.

Mit active? current? Kann mir da jemand helfen? DANKE !

[Richard.Laing]

hi
schau mal in das css...

Code: Alles auswählen

#dropdown-navigation ul.nav1st li a.current,
#dropdown-navigation ul.nav1st li a.current:link,
#dropdown-navigation ul.nav1st li a:hover {
   color: #000;
   text-decoration: none;
   }

das hier ist für die erste ebene.
da kannst du das nach deinen wünschen einstellen.
hier gerade schriftfarbe schwarz und ohne unterstrich.
gruß richy

[agent008]

Hi richi,

danke für die Antwort. Komme da noch nicht klar, weil ich nicht genau weiss, wie ich das ansprechen muss. Derzeit steht bei mir im CSS

Code: Alles auswählen

  .menu ul li:hover a,
  .menu ul li a:hover {
   color:#FFFFFF;
   background-color: #8B724A;
}

Das ist der Bereich, der beim Hover die Farbe ändert in der ersten Ebene.
So soll nun auch der "Current"-Bereich aussehen. Habe verschiedenes probiert - leider erfolglos. Wie transferiere ich deinen Vorschlag auf dieses Element? ... Danke !

[Richard.Laing]

hi ohne den quelltext der seite zu sehen denke ich mal so, sollte klappen ungetestet.

hier die normale a und a:hover augaben
dann:

Code: Alles auswählen

.menu ul li a.current {
   color:#FFFFFF;
   background-color: #8B724A;
}

und das muß nach deinen hover eintrag kommen.
sollte da nicht gehen, gib mir bitte mal deinen quelltext der seite

gruß richy

[agent008]

Hallo nochmal,

es muss wohl doch irgendwie mit "nav1st" angesprochen werden.

Wie gesagt, es ist diese Programmierung:
http://www.redaxo.de/168-Templatedetail ... late_id=27

und mein Layout sieht momentan so aus:
http://www.test.gasthaus-zum-ritter.de/

Danke für deine Bemühungen.

[Richard.Laing]

hi
bin erst jetzt wieder im Büro ... wie ich sehe hat es ja schon geklappt.

gruß richy

PS: kannst deine lösung ja gerne hier posten, damit die anderen auch was davon haben.

[Richard.Laing]

kurzer nachtrag...

im IE6 geht garnix...

IE7 ok
FF3 ok
Safari ok
Gogle Chrome ok


nur zur info.

gruß richy

[agent008]

Hi richi,

"frisch" hat mir die Lösung geschickt.

Herzlichen Dank für Eure Bemühungen.

Im CSS war an der passenden Stelle einzutragen (es geht um die acitve zeile):

Code: Alles auswählen

.menu ul li:hover a,
  .menu ul li a.active,
  .menu ul li a:hover {
 
   color:#FFFFFF;
   background-color: #8B724A;
}

Und im PHP bereich war auch was zu ändern - weiss aber nicht was - hier der richtige Code:

Code: Alles auswählen

<?php
/*--------------------------------------------------
//--  HORIZONTAL DROPDOWN NAVIGATION
//--------------------------------------------------
//---TEMPLATE BASED ON A NAVIGATION TEMPLATE BY-----
//--  blumbeet web.studio
//--------------------------------------------------
//---TEMPLATE MODIFIED BY---------------------------
//--  a-concept internet.studio
//--  Sven Albert-Pedersen
//--  www.a-concept.de / www.svenalbert.de
//--------------------------------------------------
//--  version 1.0
//--  date 27-jul-2006
//--------------------------------------------------
//---CSS is COPYRIGHT by STU NICHOLLS---------------
//--  Please see Copyright Notice @
//--  http://www.cssplay.co.uk/menus/final_drop.html
//--------------------------------------------------
//---EINBINDEN IM TEMPLATE WIE FOLGT----------------
//--  1.)  Dieses Template im PHP-Teil includen
//--  2.)  Im HTML-Teil:
//--       <div class="menu"><?php print $horizontal_drop_down_nav; ?></div>
//--  3.)  CSS in der CSS-Datei einfügen
//--  4.)  Please note that you will also need a standards compliant !doctype
//--       for this menu to work correctly.
//--------------------------------------------------*/


// EXPLODE PATH
$PATH = explode("|",$this->getValue("path").$this->getValue("article_id")."|");

// GET CURRENTS
$path1 = $PATH[1];
$path2 = $PATH[2];
$path3 = $PATH[3];


// START 1st level categories
$horizontal_drop_down_nav .= '<ul class="nav1st">';
foreach (OOCategory::getRootCategories() as $lev1) {
 
  if ($lev1->isOnline(true)) {
    // 1st level has sub-categories?
    $lev1Size = sizeof($lev1->getChildren(true));

    $horizontal_drop_down_nav .= "\n".'<li><a ';

    if ($lev1->getId() == $path1) {
      $horizontal_drop_down_nav .= 'class="active" ';
    }
    if ($lev1Size != "0") {
      $horizontal_drop_down_nav .= 'class="drop" ';
    }

    $horizontal_drop_down_nav .= ' href="'.$lev1->getUrl().'">'.$lev1->getName().'';
   
    // 1st level had sub-categories? -> go on
    if ($lev1Size != "0") {
      $horizontal_drop_down_nav .= '</a>';
      $horizontal_drop_down_nav .= "\n".'<ul class="nav2nd">';

      // START 2nd level categories
      foreach ($lev1->getChildren() as $lev2) {
       
        if ($lev2->isOnline(true)) {
          // 2nd level has sub-categories?
          $lev2Size = sizeof($lev2->getChildren(true));
         
          $horizontal_drop_down_nav .= "\n".'<li><a';
          if ($lev2->getId() == $path2) {
            $horizontal_drop_down_nav .= ' class="active" ';
          }
          if ($lev2Size != "0") {
            $horizontal_drop_down_nav .= ' class="drop"';
          }
          $horizontal_drop_down_nav .= ' href="'.$lev2->getUrl().'">'.$lev2->getName().'';
         
          // 2nd level had sub-categories? -> go on
          if ($lev2Size != "0") {
            $horizontal_drop_down_nav .= '</a>';
            $horizontal_drop_down_nav .= "\n".'<ul class="nav3rd">';
           
            // START 3rd level categories
            foreach ($lev2->getChildren() as $lev3) {
             
              if ($lev3->isOnline(true)) {
               $horizontal_drop_down_nav .= "\n".'<li><a href="'.$lev3->getUrl().'">'.$lev3->getName().'</a></li>';
              }
            }
            // END 3rd level categories
           
            $horizontal_drop_down_nav .= "\n".'</ul>';
          } // END by if ($lev2Size != "0"):
          else {
            $horizontal_drop_down_nav .= '</a>';
          }
          $horizontal_drop_down_nav .= '</li>';
        }
      }
      // END 2nd level categories
     
      $horizontal_drop_down_nav .= "\n".'</ul>';
    } // END by if ($lev1Size != "0"):
    else {
      $horizontal_drop_down_nav .= '</a>';
    }
  $horizontal_drop_down_nav .= '</li>';
  } // END by if ($lev1->isOnline())
}
$horizontal_drop_down_nav .= "\n".'</ul>';
// END 1st level categories

// print $horizontal_drop_down_nav;
?>

[ralf.schlott]

kurzer nachtrag...

im IE6 geht garnix...

IE7 ok
FF3 ok
Safari ok
Gogle Chrome ok


nur zur info.

gruß richy

Heisst das, daß diese Navi mit IE6 gar nicht funktioniert? Oder gibts dazu Kniffe und Tricks? Müsste mir den Browser wohl nochmal laden.

Gruss
Ralf