Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Einfaches Navi-Script in DIV+CSS-Layout“

mihi

EDVler

Hallo Zusammen,

bin gerade dabei eine neue, einfache Website zu erstellen. Das ganze mache ich mit HTML+CSS. Hier z.b. mein Aufbau der index.php

<div id="container">
<div id="banner"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="infobox"></div>
</div>

Bisher habe ich in den div "Navigation" per include(); die navigation.html eingebunden und dann mit diesem Script in der index.php realisiert, dass bei einem klick auf z.b. Kontakt die kontakt.php in den div content includiert wird.

function content() {
$menu = $_GET['menu'];
if ($menu == 0) include ("startseite.html");
if ($menu == 1) include ("kontakt.php");
if ($menu == 2) include ("fotos.html");
if ($menu == 3) include ("impressum.html");
}

Die Links in der navigation.html haben z.B. so ausgesehen.
<ul>
<li><a href="index.php?menu=0">Home</a></li>
<li><a href="index.php?menu=1">Kontakt</a></li>
<li><a href="index.php?menu=2">Fotos</a></li>
<li><a href="index.php?menu=3">Impressum</a></li>
</ul>

Es funktioniert soweit alles super nur meine Frage ist ob das 1. so OK ist und 2. würde ich das kleine Script gerne erweitern um den aktiven Menüpunkt irgendwie per CSS formatieren zu können.

Ich habe jetzt schon eine Weile im I-net geschaut, habe auch einige solcher Scripte gefunden nur laden die immer die komplette Seite neu und ich würde gern wirklich nur den Inhalt neu laden, wie bisher auch.

Was ist richtig? So wie ich es mache oder die anderen Scripte?
Ist mein Script schlecht? Oder kann ich es anpassen damit der aktive Menüpunkte irgendwie gekennzeichnet werden kann?

Ich hoffe ihr versteht mein Anliegen?

Vielen Dank im Voraus.

Gruß
Michi
 

timmeythe1st

nichtswissender

AW: Einfaches Navi-Script in DIV+CSS-Layout

man kann das durchaus so realisieren, das ist kein problem und deswegen ist der code auch nicht schlecht
du könntest diese php-abfrage auch bei dem menü einbauen, sodass ein div um den aktivierten menüpunkt erstellt wird mit einer id, die dann per css angesprochen wird
also z.b.
<ul>

if($menu==0) { echo "<div id=\"active\"><li>
<a href=\"index.php?menu=0\">Home</a></li></div>";} else {
echo "<li>
<a href=\"index.php?menu=0\">Home</a></li>";
}
usw.
ist jetzt vielleicht nicht perfekt, veranschaulicht aber, was ich meine
 

saila

Moderatorle

AW: Einfaches Navi-Script in DIV+CSS-Layout

Hi,

ich würde das etwas anderst lösen. Zumal bei deiner Version ein string oder script ausgeführt werden könnte. Sprich - du prüfst nicht auf strip_tag bzw. integer-Werte bei der Übergabe.

Deshalb würde ich das so realisieren:
PHP:
<?php
/* einfachs Array um später sehr leicht die Navigation zu erweitern. */
$menuArr = array(
                    0 => 'startseite.html',
                    1 => 'kontakt.php',
                    2 => 'fotos.html',
                    3 => 'impressum.html'
                );

/**
 * funciton getParamNav($var)
 * @param string $var
 * @return string
 */
function getParamNav($var) {
    if(isset($_GET[$var]) && int($_GET[$var]) && $_GET[$var] > 0) {
        return $_GET[$var];
    } else {
        return 0;
    }
}

/* include per Array und Funktions-Rückggabewert */
include($menuArr[getParamNav('menu')]);
?>
 

timmeythe1st

nichtswissender

AW: Einfaches Navi-Script in DIV+CSS-Layout

das ist ja sehr schön und wesentlich eleganter als meine lösung
aber es hilft nicht bei dem ursprünglichem problem
 

mihi

EDVler

AW: Einfaches Navi-Script in DIV+CSS-Layout

Danke für eure Antworten. Ich werde es test und mich melden

@saila: Du merkst ja, dass ich in PHP nicht wirklich Ahnung hab -siehe mein bisheriges Script.

Dein Script check ich irgendwie nicht.

Das hier ist klar, hier werden die Menüpunkte in einen Array gegeben.

$menuArr = array(
0 => 'startseite.html',
1 => 'kontakt.php',
2 => 'fotos.html',
3 => 'impressum.html'
);

Hier wird geprüft welcher Menüpunkt im Link übergeben wird, oder?

function getParamNav($var) {
if(isset($_GET[$var]) && int($_GET[$var]) && $_GET[$var] > 0) {
return $_GET[$var];
} else {
return 0;
}
}

Wird hier der Content eingebunden?

include($menuArr[getParamNav('menu')]);

Wie müssen dann meine Links in der navigation.htm aussehen?
Wie bisher?

Ist bei deinem Code etwas eingebaut, um den aktiven Menüpunkt mit irgendeiner css-id formatieren zu können?

Vielen Dank
Gruß Michi
 

timmeythe1st

nichtswissender

AW: Einfaches Navi-Script in DIV+CSS-Layout

function getParamNav($var) {
if(isset($_GET[$var]) && int($_GET[$var]) && $_GET[$var] > 0) {
return $_GET[$var];
} else {
return 0;
}
}

hier wird gefragt, ob ein wert übergeben wurde, also ob $_GET[$var] gesetzt wurde
dann, ob der wert eine integer-zahl ist (int($_GET[$var]) und dann, ob sie größer als null ist
wenn das alles zutrifft, wird der übergebene wert (1, 2, etc.) zurückgeliefert
und include($menuArr[getParamNav('menu')]); ruft die gewünschte seite auf
trifft das nicht zu, wird 0 zurückgeliefert und include($menuArr[getParamNav('menu')]); ruft die startseite auf
deine links ändern sich nicht, du gibst weiterhin z.b. index.php?menu=0 an, da das prinzip dasselbe ist, wie das, das du verwendet hast
einzig ist dort eine überprüfung zwischengeschaltet, die verhindern, dass werte wie z.b. index.php?menu=hallo falsch interpretiert werden und ggf. eine fehlermeldung ausgegeben wird

bei dem code wird keine css-id hinzugefügt wie bein meinem code
daher auch mein vorheriger post
 

mihi

EDVler

AW: Einfaches Navi-Script in DIV+CSS-Layout

Vielen Dank für die Erklärung.
Bei deinem Post hab ich wars. gerade meine geschrieben.

Kann mir da noch jemand bei der Umsetzung helfen, um den aktiven Menüpunkt formatieren zu können.

Jetzt noch eine Frage, was ist die bessere Methode:

Alles neu laden oder wie ich nur den Inhalt? Gibt es Vor-und Nachteile?

Danke
Gruß Michi
 

saila

Moderatorle

AW: Einfaches Navi-Script in DIV+CSS-Layout

das ist ja sehr schön und wesentlich eleganter als meine lösung
aber es hilft nicht bei dem ursprünglichem problem

Nö, aber der Lösungsansatz ist bereits enthalten. Man müsste nur etwas das Gehirn bemühen.

mihi schrieb:
Wie müssen dann meine Links in der navigation.htm aussehen?
Wie bisher?

Ist bei deinem Code etwas eingebaut, um den aktiven Menüpunkt mit irgendeiner css-id formatieren zu können?

Zur ersten Frage. Das kannst du gestalten wie du es möchtest.

Zur zweiten Frage: nein, aber mit etwas Nachdenken kommt man z.B. auf folgenden Lösungsansatz:
PHP:
function activeMenu($var, $menu = null) {
    if(isset($var) && isset($menu)) {
    // alternativ if(isset($var) && is_string($var) && isset($menu) && int($menu))
        return 'active';
    }
    return;
}
dadurch würde sich dein Menü wie folgt neu gestalten:
Code:
<!-- einbinden in die Menüleiste -->
<ul>
    <li<?php echoactiveMenu($var, null); ?>><a href="index.php?menu=0">Home</a></li>
    <li<?php echoactiveMenu($var, 1); ?>><a href="index.php?menu=1">Kontakt</a></li>
    <li<?php echoactiveMenu($var, 2); ?>><a href="index.php?menu=2">Fotos</a></li>
    <li<?php echoactiveMenu($var, 3); ?>><a href="index.php?menu=3">Impressum</a></li>
</ul>
Über diesen Weg kannst du somit auch noch andere Klassen für das jeweilige aktive Menü hinterlegen.

Da ein Menü in der Regel früher oder später auch erweitert oder verändert wird, würde ich ein Menü immer dynamisch generieren. Somit würde auch das ganze hin und her mit aktive und nicht aktive, erweitern oder ändern usw. entfallen.


==================================
So auf die Schnelle würde ich ein Menü auf diesem Weg realisieren:
PHP:
<?php
/**
 * function getParam($var)
 * @param: string $var
 * @return: integer
 */
function getParam($var) {
    if(isset($var)) {
        return $menuId = isset($_GET[$var]) ? (int)$_GET[$var] : 0;    
    }

}

/**
 * menu anlegen
 */
$viewMenu = '';

/**
 * Standard-KLasse
 */
$style = '';

foreach($menuArr as $k => $v) {
    
    if(getParam($var) === $k) {
        $style = ' class="'. $menuArr['menu'][$k][2] .'"';
    }
    
    $viewMenu .= '<li'. $style .'><a href="'. $menuArr['menu'][$k][1] .'">'. $menuArr['menu'][$k][0] .'</a></li>'."\n";
}
?>
Dein Menüaufbau:
Code:
<ul>
    <?php echo $viewMenu; ?>
</ul>
Ist ungeprüft (sollte aber meiner Meinung nach komplett durchlaufen).
 
Zuletzt bearbeitet:

mihi

EDVler

AW: Einfaches Navi-Script in DIV+CSS-Layout

Ähhh, ja dann versuch ich es mal. Bin eh schon dabei, bekomme nur immer den Fehler:

Fatal error: Call to undefined function int() in D:\xampp\xampp\htdocs\friseur_mueller\index.php on line 11

Das liegt wohl daran: int($_GET[$var])

Wenn ich das jetzt richtig verstanden habe dann ist der letzte Code, den du gepostet hast der ersatz für meine navi.php???
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.156
Beiträge
2.581.859
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben