Gillar du den här guiden? Vill du att vi ska fortsätta göra fler guider? - läs mer här » 

skriv ut »

Infoga CSS-meny med PHP include

 

Förutsättningar för att följa guiden

För att du ska kunna följa denna guide är det en fördel om du har grundkunskaper i PHP motsvarande guiden PHP grunder »

Menyerna är i grunden listmenyer <UL><LI> som formaterats med CSS. Information om hur du använder CSS tillsammans med punktlistor finns i guiden CSS meny »

 

Infoga menyn med PHP include

Med funktionen INCLUDE kan du infoga innehållet från ett annat PHP-dokument och det är användbart för menyer, sidhuvud/sidfot och annan information som är återkommande på många sidor i din webbplats. När du behöver ändra informationen i sidhuvudet gör du det i den inkluderade filen.

Du kan även använda REQUIRE som fungerar likadant som INCLUDE men det som skiljer funktionerna åt är vad som sker när filen saknas eller annat fel finns i scriptet. Om du använder INCLUDEså visas ett varningsmeddelande (warning) men scriptet fortsätter att köras. Om du använder REQUIRE så stoppas körningen (fatal error) (gäller endast från PHP 4.3.5 och framåt). Vilken funktion du ska använda beror på vad scripten utför. Om du vill hämta en meny till sidan så kanske du ändå vill visa sidan även om menyn saknas men om du använder fler PHP-funktioner som är beroende av varandra är det kanske bättre att stoppa körningen helt tills felen är åtgärdade.
Läs mer om INCLUDE hos PHP.net »

TIPS! Exemplet nedan använder CSS-boxar och externa CSS-mallar. Du kan se ett enklare exempel på PHP include i guiden PHP fortsättning »

 

Menyn som ska inkluderas: meny.php

Menyn som används är en CSS-formaterad punktlista <UL><LI> och här visas inte grunderna om hur en CSS-meny är uppbyggd. Du kan läsa mer om detta i guiden CSS meny »

Exempel på innehåll i meny.php:

<!-- MENYBOX -->
<div id="meny_container">

<!-- LISTMENY -->
<ul id="meny">
<li><a href="index.php">Meny 1</a></li>
<li><a href="sida2.php">Meny 2</a></li>
<li><a href="sida3.php">Meny 3</a></li>
<li><a href="sida4.php">Meny 4</a></li>
<li><a href="sida5.php">Meny 5</a></li>
<li><a href="sida6.php">Meny 6</a></li>
</ul>

</div>

CSS-mallen meny.css som formaterar menyn:

/* MENYBOX */
#meny_container {width: 170px; float: left; margin: 0 0 0 0; padding: 5px 5px 5px 5px; font: 11px Verdana, Helvetica, sans-serif; border: 1px solid #CCCCCC; }

/* MENY */
#meny { margin: 0 0 0 0; padding: 0; list-style-type: none; }
#meny ul { list-style-type: none; }
#meny a { display: block; text-decoration: none; height: 15px; margin: 0 0 3px 0; padding: 3px 3px 3px 5px; background: #ccff66; border: 1px solid #99cc00;}

/* länkar, egenskaper */
#meny a:link { color: #000000; }
#meny a:visited { color: #000000; }
#meny a:hover { background-image: url(pilar/pil_hoger3.gif); background-repeat: no-repeat; background-position: 150px center; }

 

Sidor som ska använda menyn med PHP include

De sidor som ska visa menyn använder <?php include ?> för att inkludera menyn. Samma meny används då på varje sida. Om du behöver ändra i din meny gör du detta bara i filen "meny.php" och resultatet visas på alla sidor som använder menyn.

Här är ett exempel på hur menyn inkluderas på sidan "index.php":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head><title>Webdesignskolan, CSS-meny med PHP</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<link href="meny.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="sidlayout">
<?php include "meny.php"; ?>
<div id="content">
<h1>Startsidan</h1>
<p>Mer text här...</p>
</div>
</div>
</body>
</html>

Så här ser resultatet ut i webbläsaren:

Klicka här för att se exemplet ovan »

De filer som ingår i exemplet ovan:

Hämta hela exemplet som ZIP-fil genom att klicka här »

 

TIPS! Om du inte har något program som hanterar ZIP-arkiv kan du hämta programmet WinZip hos www.winzip.com

 

Använd sökvägar relativa till dokumentroten (site root)

När du använder samma meny på alla sidor i din webbplats kan du använda länkar med sökvägar som är relativa till dokumentet. Det fungerar om alla sidor som använder menyn ligger i samma mapp men inte om du har dina sidor i undermappar. Den bästa lösningen är istället att använda sökvägar relativa till dokumentroten (site root) på din webserver.

Exemplen nedan visar tre typer av länkar: relativa till dokumentet, relativa till dokumentroten och absoluta sökvägar.

 FEL: sökvägar relativa till dokumentet

Om sidorna ligger i undermappar och länkarna har sökvägar som är relativa till dokumentet kan meny-koden se ut så här i dokumentet "sida6.php". Koden fungerar inte om du använder den i "sida5.php" eller någon av de övriga sidorna eftersom sökvägen då blir fel:

<!-- MENYBOX -->
<div id="meny_container">

<!-- LISTMENY -->
<ul id="meny">
<li><a href="../sida1/index.php">Meny 1</a></li>
<li><a href="../sida2/sida2.php">Meny 2</a></li>
<li><a href="../sida3/sida3.php">Meny 3</a></li>
<li><a href="../sida4/sida4.php">Meny 4</a></li>
<li><a href="../sida5/sida5.php">Meny 5</a></li>
<li><a href="sida6.php">Meny 6</a></li>
</ul>

</div>

 

 FEL: absoluta sökvägar

Du kan även använda absoluta sökvägar som innehåller hela domännamnet men om du har flera domännamn som pekar till samma webbplats fungerar inte detta. I exemplet nedan är webbplatsens URL: http://www.webdesignskolan.se

<!-- MENYBOX -->
<div id="meny_container">

<!-- LISTMENY -->
<ul id="meny">

<li><a href="http://www.webdesignskolan.se/sida1/sida1.php">Meny 1</a></li>
<li><a href="http://www.webdesignskolan.se/sida2/sida2.php">Meny 2</a></li>
<li><a href="http://www.webdesignskolan.se/sida3/sida3.php">Meny 3</a></li>
<li><a href="http://www.webdesignskolan.se/sida4/sida4.php">Meny 4</a></li>
<li><a href="http://www.webdesignskolan.se/sida5/sida5.php">Meny 5</a></li>
<li><a href="http://www.webdesignskolan.se/sida6/sida6.php">Meny 6</a></li>
</ul>

</div>

Den aboluta sökvägen i koden ovan fungerar inte om besökaren använder ett annat av våra domännamn som tex: webdesignskolan.se - www.webdesignskolan.com - www.webdesignskolan.nu

 

 RÄTT: sökvägar relativa till dokumentroten (site root)

Den bästa lösningen är att använda sökvägar som är relativa till dokumentroten (site root) för att vara säker på att menyn fungerar i alla sidor i din webbplats oavsett vilket domännamn som används. I exemplet nedan är webbplatsens URL: http://www.webdesignskolan.se men det har ingen betydelse för sökvägarna som då bara innehåller mappnamn och sidnamn:

<!-- MENYBOX -->
<div id="meny_container">

<!-- LISTMENY -->
<ul id="meny">
<li><a href="/sida1/index.php">Meny 1</a></li>
<li><a href="/sida2/sida2.php">Meny 2</a></li>
<li><a href="/sida3/sida3.php">Meny 3</a></li>
<li><a href="/sida4/sida4.php">Meny 4</a></li>
<li><a href="/sida5/sida5.php">Meny 5</a></li>
<li><a href="/sida6/sida6.php">Meny 6</a></li>
</ul>

</div>

 

Visa aktiv sida med PHP

Du kan tilldela den aktiva sidan egenskaper för att visa vilket menyval som är det aktuella. CSS-menyerna i guiden CSS meny » använder id="current" för att visa den aktiva sidan. I menyavsnittet för varje sida måste identifierare flyttas till <A HREF> för den aktuella sidan.

Aktiv sida med CSS

Så här kan menyfilen meny.php se ut om "sida6.php" är den aktiva sidan:

<!-- MENYBOX -->
<div id="meny_container">

<!-- LISTMENY -->
<ul id="meny">
<li><a href="index.php">Meny 1</a></li>
<li><a href="sida2.php">Meny 2</a></li>
<li><a href="sida3.php">Meny 3</a></li>
<li><a href="sida4.php">Meny 4</a></li>
<li><a href="sida5.php">Meny 5</a></li>
<li><a href="sida6.php " id="current">Meny 6</a></li>
</ul>

</div>

CSS-mallen meny.css är nu kompletterad med egenskaperna för "current":

/* AKTIV SIDA */
#meny a#current { font-weight: bold; background-image: url(pilar/pil_hoger2.gif); background-repeat: no-repeat; background-position: 150px center; }

Så här ser resultatet ut i webbläsaren:

 

Att lägga till en identifierare inom <A HREF> för länken till den aktiva sidan fungerar inte om du använder <?php include ?> för att inkludera samma meny-fil på alla sidor. Du kan då istället använda PHP för att identifiera aktiv sida och lägga till en IF-sats i varje menyval.

Funktionen basename() för att hämta filnamnet

Metoden för att identifiera den aktuella sidan är att använda PHP-funktioner för att hämta filnamnet från webservern. Den fördefinierade variabeln $_SERVER kan tillsammans med elementet PHP_SELF användas för att hämta sökvägen till aktuell PHP-sida. Sökvägen som visas är relativ till dokumentroten (site root) och det passar ju bra till våra inkluderade CSS-menyer.

Läs mer om "$_SERVER" och "PHP_SELF" hos PHP.net »

Om du bara vill visa filnamnet och inte hela sökvägen kan du använda funktionen basename() och hela funktionen är då: basename($_SERVER['PHP_SELF'])

Läs mer om "basename" hos PHP.net »

Prova funktionen genom att använda koden nedan i ett av dina egna PHP-dokument:

<?php

echo '<p>Sökvägen (relativ till site root) till den här filen är: <br><strong>' .
$_SERVER['PHP_SELF']
. '</strong></p>';

echo '<p>Filnamnet är: <br><strong>' .
basename($_SERVER['PHP_SELF'])
. '</strong></p>';

?>

Så här ser resultatet ut i webbläsaren:

 

Aktiv sida med PHP och CSS

Med IF-satser som kontrollerar om aktuell sidan har samma filnamn som hämtas med funktionen basename($_SERVER['PHP_SELF']) kan du flytta identifieraren "current". Det krävs en hel del extra kod för att få den extra finessen men du använder ju samma meny på alla dina sidor i webbplatsen så det kan vara värt besväret...

I exemplet nedan tilldelas variabeln $current_file funktionen basename:

$current_file = basename($_SERVER['PHP_SELF']);

IF-satsen kontrollerar om filnamnet för den aktuella filen är detsamma som målet för länken. Om det är sant används identifieraren "current":

echo'<li><a href="/mapp/filnamn.php"';
if ($current_file == basename('/mapp/filnamn.php')) {
echo 'id="current"';
}
echo '>Meny 1</a></li>';

Så här kan hela koden se ut i "meny.php":

<?php

// hämtar filnamn till aktuell sida
$current_file= basename($_SERVER['PHP_SELF']);


echo'<div id="meny_container">';
// start meny
echo'<ul id="meny">';

// MENY 1
echo'<li><a href="/php/css-meny_php/menyexempel2/index.php"';
if ($current_file == basename('/php/css-meny_php/menyexempel2/index.php'))
{echo 'id="current"';}
echo '>Meny 1</a></li>';

// MENY 2
echo'<li><a href="/php/css-meny_php/menyexempel2/sida2.php"';
if ($current_file == basename('/php/css-meny_php/menyexempel2/sida2.php'))
{echo 'id="current"';}
echo '>Meny 2</a></li>';

// MENY 3
echo'<li><a href="/php/css-meny_php/menyexempel2/sida3.php"';
if ($current_file == basename('/php/css-meny_php/menyexempel2/sida3.php'))
{echo 'id="current"';}
echo '>Meny 3</a></li>';

// MENY 4
echo'<li><a href="/php/css-meny_php/menyexempel2/sida4.php"';
if ($current_file == basename('/php/css-meny_php/menyexempel2/sida4.php'))
{echo 'id="current"';}
echo '>Meny 4</a></li>';

// MENY 5
echo'<li><a href="/php/css-meny_php/menyexempel2/sida5.php"';
if ($current_file == basename('/php/css-meny_php/menyexempel2/sida5.php'))
{echo 'id="current"';}
echo '>Meny 5</a></li>';

// MENY 6
echo'<li><a href="/php/css-meny_php/menyexempel2/sida6.php"';
if ($current_file == basename('/php/css-meny_php/menyexempel2/sida6.php'))
{echo 'id="current"';}
echo '>Meny 6</a></li>';

// slut meny
echo '</ul> </div> ';

?>

Så här ser resultatet ut i webbläsaren:

Klicka här för att se exemplet ovan »

 

Konfiguration med variabler

Om menyn innehåller många menyval kan det vara en bra idé förenkla konfigureringen genom att använda variabler till menyval och sökvägar för länkar.

Exemplet nedan visar "meny.php" där ett avsnitt för konfigurering med variabler används:

<?php

// hämtar filnamn till aktuell sida
$current_file= basename($_SERVER['PHP_SELF']);

##############################################################
// Menynamn och sökvägar i meny
##############################################################

// MENY 1
$meny1_namn = 'Meny 1';
$meny1_url = '/php/css-meny_php/menyexempel3/index.php';

// Meny 2
$meny2_namn = 'Meny 2';
$meny2_url = '/php/css-meny_php/menyexempel3/sida2.php';

//MENY 3
$meny3_namn = 'Meny 3';
$meny3_url = '/php/css-meny_php/menyexempel3/sida3.php';

// MENY 4
$meny4_namn = 'Meny 4';
$meny4_url = '/php/css-meny_php/menyexempel3/sida4.php';

// MENY 5
$meny5_namn = 'Meny 5';
$meny5_url = '/php/css-meny_php/menyexempel3/sida5.php';

// MENY 6
$meny6_namn = 'Meny 6';
$meny6_url = '/php/css-meny_php/menyexempel3/sida6.php';


##############################################################
// MENYBOX
##############################################################

echo'<div id="meny_container">';
// start meny
echo'<ul id="meny">';

// MENY 1
echo'<li><a href="'.$meny1_url.'"';
if ($current_file == basename($meny1_url)) {echo 'id="current"';}
echo '>'.$meny1_namn.'</a></li>';

// MENY 2
echo'<li><a href="'.$meny2_url.'"';
if ($current_file == basename($meny2_url)) {echo 'id="current"';}
echo '>'.$meny2_namn.'</a></li>';

// MENY 3
echo'<li><a href="'.$meny3_url.'"';
if ($current_file == basename($meny3_url)) {echo 'id="current"';}
echo '>'.$meny3_namn.'</a></li>';

// MENY 4
echo'<li><a href="'.$meny4_url.'"';
if ($current_file == basename($meny4_url)) {echo 'id="current"';}
echo '>'.$meny4_namn.'</a></li>';

// MENY 5
echo'<li><a href="'.$meny5_url.'"';
if ($current_file == basename($meny5_url)) {echo 'id="current"';}
echo '>'.$meny5_namn.'</a></li>';

// MENY 6
echo'<li><a href="'.$meny6_url.'"';
if ($current_file == basename($meny6_url)) {echo 'id="current"';}
echo '>'.$meny6_namn.'</a></li>';

// slut meny
echo '</ul></div> ';

?>

 

Exempel på vertikal meny och horisontell meny

Här är två exempel på menyer som är gjorda enligt informationen i denna guide. Filen "meny.php" använder variabler för att konfigurera namn och sökvägar. Spara ZIP-filen och anpassa layout och egenskaper så att de passar dina egna behov.

Vertikal meny

Klicka här för att se exemplet ovan »

Hämta hela exemplet som ZIP-fil genom att klicka här »

 

Horisontell meny

Klicka här för att se exemplet ovan »

Hämta hela exemplet som ZIP-fil genom att klicka här »

 

 

Expanderande PHP listmeny med undermenyer

Om du har många menyval kan ett alternativ vara att använda en expanderande meny med huvudmeny och undermenyer:

Se fler exempel på expandernade PHP-menyer i guiden CSS-layout och CSS-meny färdiga mallar »

Läs mer om hur du skapar expanderande listmenyer i guiden PHP listmeny »