Navigation inkl. hover-Effekte mit php erstellen?

rw1981 · 14.09.2010

Hallo zusammen,

ich habe eine Frage zu diesem Thema.

Weil es mich tierisch nervt Änderungen in der Navigation auf allen Seiten einzeln vornehmen zu müssen, bin ich auf php gestoßen.

ich habe mehrfach den Hinweis erhalten die Navigation in eine php-Datei zu schreiben und diese dann mit include in die einzelnen html-Dateien einzubinden.

Irgendwie finde ich das aber noch nicht so ganz hilfreich, denn mit Hilfe von hover-Effekten sieht die Navigation auf den einzelnen Seiten bei mir unterscheidlich aus. Eine einzelne Navigationsdatei genügt also nicht...

Ist es also garnicht möglich eine Navigation + dren hover-Effekte mit php zu erstellen?

ICH DANKE EUCH

Liebe Grüße
Rene

K3nt · 14.09.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

Doch,

z.b. Index.php inlcude menu.php,
die menu.php erstelle den Aufbau des Menüs <ul> <li> und liest dabei eine datei aus
menu.csv(oder .txt), wo die a-elemente drin stehen und die urls dazu.

im css gibts dann
#nav li ul
#nav a:hover

so habe ich es und es klappt

MyBad · 14.09.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

Also möglich ist es auf jeden Fall. PHP generiert ja nun auch nur eine HTML-Ausgabe.

Wäre gut, wenn du uns deinen Quellcode zeigst.

schnullerbacke · 14.09.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

rw1981 schrieb:
Irgendwie finde ich das aber noch nicht so ganz hilfreich, denn mit Hilfe von hover-Effekten sieht die Navigation auf den einzelnen Seiten bei mir unterscheidlich aus. Eine einzelne Navigationsdatei genügt also nicht...

Kannst du das näher erläutern?

Wie machst du die hover Effekte?

rw1981 · 14.09.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

Ihr seid ja Wahnsinn!!!!
4 Klicks und davon 3 Antworten - so eine Quote habe ich ja noch nie gesehen!

Ich danke euch jetzt schon!

Also das ist meine Navi in der html-Datei:

HTML:

            <ul class="navigation">
                    <li><a class="buttlinks aktiv">Home</a></li>
                    <li><a class="butt" href="ueberuns/index.html">Über uns</a></li>
                    <li><a class="butt" href="produkte/index.html">Produkte</a></li>
                    <li><a class="butt" href="aktuelles/index.html">Aktuelles</a></li>
                    <li><a class="butt" href="kontakt/index.php">Kontakt</a></li>
                    <li><a class="buttrechts" href="anfahrt/index.html">Anfahrt</a></li>
            </ul>

Das sind die css-Definitionen:
Ich verändere den Hintergrund des a, um einen hover-Effekt zu erzeugen...

Code:

/* NAVIGATION----------------------*/

ul.navigation {
    height: 2.2em;
    line-height: 2.2em;
    list-style-type: none;
    display: block;
    white-space: nowrap;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 0;
}

ul.navigation li{
    float:left;
    width: 6em;
    background-image: url(img/butt.png);
    background-repeat: repeat-x;
    background-position: top;
}

ul.navigation li a.butt{
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    float:left;
    width: 6em;
    border-left: #fff solid 1px;
    border-right: #fff solid 1px;
}

ul.navigation li a.buttlinks{
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    float:left;
    width: 6em;
    border-right: #fff solid 1px;
}

ul.navigation li a.buttrechts {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    float:left;
    width: 6em;
    border-left: #fff solid 1px;
}

a.aktiv{
    background-image: url(img/buttaktiv.png);
    background-repeat: repeat-x;
    background-position: top;
}

a.butt:hover,
a.butt:focus,
a.butt:active {
    background-image: url(img/buttaktiv.png);
    background-repeat: repeat-x;
    background-position: top;
}

Viele Grüße
Rene

Doitsu · 14.09.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

Hm, ich nehme jetzt einfach mal an, dass du statt 'hover' deine aktiv-Klasse meinst?
Wenn ja musst du erst mal alle deine Dateien in *.php umbenennen - anschliessend fuegst du in jede Datei in den ersten Zeilen ein

PHP:

<?php
$active = 'home';
?>

(Als Beispiel wir sind auf der Seite 'home', das dann halt je nach Seite abaendern.)

In der navi.php schreibst du dann sowas:

PHP:

            <ul class="navigation">
                    <li><a class="buttlinks<?php echo ($active == 'home' ?  ' aktiv' : ''); ?>">Home</a></li>
                    <li><a class="butt<?php echo ($active == 'over_us' ?  ' aktiv' : ''); ?>" href="ueberuns/index.html">Über uns</a></li>
                    [..]
            </ul>

Wenn nicht, verstehe ich wirklich dein Problem nicht.

sokie · 14.09.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

rw1981 schrieb:
Also das ist meine Navi in der html-Datei:...

hallo Rene, das sieht eigentlich alles genauso aus, wie es aussehen sollte

nun ist die frage, ob deine pfadangaben stimmen, denn das könnte das Problem sein, wenn du keine hovereffekte siehst.
(und natürlich siehst du eine unformatierte linkliste, wenn du diese html allein aufrufst)
Beim Aufruf der (php)Seite die alles entält, hast du einen Quelltext, als wenn du eine herkömmliche html-seite öffnest, dieser Code wäre für weitere Überlegungen interessant.

rw1981 · 19.10.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

Hallo!
Sorry, dass ich so lange abwesend war, aber nachdem ich einige Zeit "außer Gefecht" war, bin ich jetzt wieder am Start.

Ich danke euch für Eure Ideen. Ich werde mich jetzt gleich hinsetzen und das mal durcharbeiten.

Also mit dem hover-Effekt meinte ich tatsächlich meine Aktiv-Klasse

Ich melde mich!

Liebe Grüße
Rene

rw1981 · 19.10.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

Aaaalso

Ich hab jetzt mal ein wenig getestet und mich dabei an Doitsu gehalten.
Die Anwendung der "aktiv"-Klasse funktioniert so perfekt.

Leider stehe ich aber vor einem grundlegenden Problem bei den Links.
Die Verweise stimmen nicht auf allen Seiten.

Auf der ersten "Home"-Seite stimmen sie natürlich.
Da aber - ausgehend von einer anderen Seite - auf die gleiche hauptnavi.php zugegriffen wird, können die Links hier dann natürlich nicht stimmen.
Ich habe es auch schon mit absoluten Verweisen versucht, doch habe ich dann das Problem, dass ich immer alle Links (und somit auch die unerwünschten Deppenlinks) zur Verfügung habe.

Welchen Ansatz muss ich gehen - oder über welches Themas muss ich mehr lernen - , um die hauptnavi.php flexibler gestalten zu können.

index.php: (Home)

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
 
<style type="text/css" media="screen">
@import url(css.css);
</style>
</head>
 
<body>
 
    <?php
    $active = 'home';
    ?> 
 
<div id="kopfbereich">
    <?php
    include 'hauptnavi.php';
    ?> 
</div> <!-- kopfbereich-->
 
</body>
 
</html>

index.php: (Über uns)

PHP:

<body>
 
    <?php
    $active = 'ueber';
    ?> 
 
<div id="kopfbereich">
    <?php
    include '../hauptnavi.php';
    ?> 
</div> <!-- kopfbereich-->
 
</body>

hauptnavi.php:

PHP:

<ul class="navigation">
    <li><a class="buttlinks<?php echo ($active == 'home' ?  ' aktiv' : ''); ?>">Home</a></li>
    <li><a class="butt<?php echo ($active == 'ueber' ?  ' aktiv' : ''); ?>" href="ueberuns/index.php">Über uns</a></li>
    <li><a class="butt<?php echo ($active == 'anfahrt' ?  ' aktiv' : ''); ?>" href="anfahrt/index.php">Anfahrt</a></li>
</ul>

DANKE FÜR EURE HILFE

Beste Grüße
Rene

saila · 19.10.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

Hi,

du möchtest, dass jener Menüpunkt als aktive per class definiert ist, wenn er geklickt bzw. die Seite aufgerufen wurde?

Wenn ja übergibst du ja - hoffentlich - per get ein parameter. Mit diesem $_GET - Parameter kannst du dann wiederum beim hoffentlich dynamischen Aufbau des Menüs, ob dieser mit dem Menüpunkt übereinstimmt. Wenn ja wird die entsprechende CSS-Klasse eingebunden.

rw1981 · 20.10.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

Oh je, das hört sich für einen Anfänger ziemlich schlimm an!
Ich werde mich in diesen $_GET - Parameter mal einlesen.

Was muss ich tun, damit die Linkadressen von jeder Seite aus korrekt sind?

Danke!

saila · 20.10.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

So schlimm ist es nun nicht, nur weil kein Beispielcode dabei ist

Ein GET-Parameter wäre z.B. "index.php?p=pagename" also p wäre in diesem Fall GET und der zugehörige Value "pagename". Das bedeutet, ist nun:

PHP:

<?php
resultNavigation = '';
foreach($navigation as $k => $v) {
 $cssClass = '';
 if(isset($_GET['p']) && $_GET['p'] == $v['pages']) {
  $cssClass = ' active';
 }
 $resultNavigation .= '<a href="'. $v['pagelink'] .'" class="navigation'. $cssClass .'">'. $v['pageName'] .'</a>';
}

echo $resultNavigation;
?>

Auf diesem Weg erhälst du immer den aktuell aktiven Menüpunkt.

Wichtig:
PHP: htmlspecialchars - Manual
PHP: urlencode - Manual

rw1981 · 21.10.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

ui... danke aber!
Ich werde mich mal ransetzen und mich nächste Woche melden...
Ich hab irgendwo gelesen, dass ich arrays benötige... Auch das werde ich checken.

DANKE!

saila · 21.10.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

Bei einer foreach gehe ich von einem Array aus

rw1981 · 21.10.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

Du wirst sehen.. ich pack das!

saila · 21.10.2010

AW: Navigation inkl. hover-Effekte mit php erstellen?

Die Einstellung gefällt mir