"Menü és Tartalomváltás" lehetőségei...

Alaphelyzet

Alaphelyzetben a nyitó oldal egy *.html fájl, melyben csak HTML/CSS kódok vannak és a menü tisztán CSS-vel kezelt, háromszintes. A menü pontjaihoz tartozó megjelenés ugyan olyan kell, hogy legyen, csak a "content" blokk tartalma kell hogy változzon...
Kezdeti esetben ezt úgy lehet megvalósítani, hogy készítünk a menüelemek darabszámának megfelelő *.html fájlt és a "content" blokk tartalmát átírjuk a "menüelem" címének megfelelően. Viszont így a "content" blokk kivételével a fájlok ugyan azt a kódot tartalmazzák és minden esetben az oldal újratöltődik...

Egy minta oldal-fájl szerkezete/kódja
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.   <link rel="Shortcut Icon" type="image/x-icon" href="../../favicon.ico" />
  6.   <title>Nagykutyák</title>
  7. </head>
  8.  <div id="menu_outer_h">
  9.   <ul class="menu">
  10.    <li><a id="h10" href="menu-1.html">Menü-1</a></li>
  11.    <li class="sub">
  12.     <a href="#" onclick="return false;">Menü-2</a>
  13.     <ul>
  14.      <li class="sub-nota">
  15.       <a id="v21" href="menuk-h21.html">Menü-21</a>
  16.      </li>
  17.      <li class="sub-nota">
  18.       <a id="v22" href="menuk-h22.html">Menü-22</a>
  19.      </li>
  20.     </ul>
  21.    </li>
  22.    <li class="sub">
  23.     <a href="#" onclick="return false;">Menü-3</a>
  24.     <ul>
  25.      <li class="sub-nota">
  26.       <a href="#" onclick="return false;">Menü-31</a>
  27.       <ul>
  28.        <li class="sub-nota"><a id="h311" href="menuk-h311.html">Menü-311</a></li>
  29.        <li class="sub-nota"><a id="h312" href="menuk-h312.html">Menü-312</a></li>
  30.       </ul>
  31.      </li>
  32.     </ul>
  33.    </li>
  34.   </ul>
  35.  </div>
  36.  <!-- Az oldal további része, benne a "content" blokk -->
  37.  <div id="content" class="content">
  38.   Ez a változó tartalom!!!
  39.  </div>
  40. </body>
  41. </html>
  42.  

Erre a megoldásra nem készítettem DEMO-t, mert ezt egy kezdő is meg tudja csinálni...

HTML és Ajax

Második esetben Ajax segítségével valósítjuk meg a "content" blokk tartalmának cseréjét, hogy a teljes oldal ne töltődjön be csak a megfelelő oldalrész változzon...
Ebben az esetben csak egy komplett fájl van(index.html), a betöltött "tartalmi fájlok" csak az eltérő tartalom-kódot tartalmazzák. Ezekben a fájlokban csak a <BODY> elemben lehetséges kódok/elemek lehetnek!

Egy minta oldal-fájl szerkezete/kódja
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.   <link rel="Shortcut Icon" type="image/x-icon" href="../../favicon.ico" />
  6.   <title>Nagykutyák Ajax</title>
  7. <script type="text/javascript">
  8. //példaként a DEMÓ adatokkal:
  9. var menuk = new Array();
  10. //hor menü-1 elemei
  11. menuk['h10']='bemutatkozas/bemutatkozas.html';      
  12. //hor menü-2 elemei
  13. menuk['h21']='kereses/kutyak/kereskutyakolyok.html';
  14. menuk['h22']='kereses/kutyak/kereskutyafelnott.html';
  15. //hor menü-3 elemei
  16. menuk['h311']='kereses/cicak/kerescicakolyok.html';
  17. menuk['h312']='kereses/cicak/kerescicafelnott.html';
  18. //-----------------------------------------------
  19. var please_wait = null;
  20. var target = 'content';
  21. var elozo_id = 'h10';
  22. var akt_id = '';
  23. function modosit(url, menuID)
  24. {
  25.   akt_id = menuID;
  26.         if( ! document.getElementById)
  27.   { return false; }
  28.         if (please_wait != null)
  29.   { document.getElementById(target).innerHTML = please_wait; }
  30.         if(window.ActiveXObject)
  31.   { link = new ActiveXObject("Microsoft.XMLHTTP"); }
  32.   else
  33.     if(window.XMLHttpRequest)
  34.     { link = new XMLHttpRequest(); }
  35.         if(link == undefined)
  36.   { return false; }
  37.         link.onreadystatechange = function() { response(url, target); }
  38.         link.open("GET", url, true);
  39.         link.send(null);
  40. }
  41. function response(url, target)
  42. {
  43.         if (link.readyState == 4)
  44.   {
  45.                 if (link.status == 200)
  46.                 {
  47.                   document.getElementById(target).innerHTML = link.responseText;
  48.       document.getElementById(elozo_id).style.color = "#99930D";
  49.       elozo_id = akt_id;
  50.       document.getElementById(akt_id).style.color = "orange";
  51.     }
  52.         else
  53.                 { alert("Nem lehet letölteni: " + link.statusText); }
  54.         }
  55. }
  56. function set_loading_message(msg) {
  57.         please_wait = msg;
  58. }
  59. set_loading_message("Kérlek várj amíg betölt az oldal...");
  60. //*****************************************************
  61. </head>
  62. <body onload="modosit(menuk['h10'],'h10'">
  63.  <div id="menu_outer_h">
  64.   <ul class="menu">
  65.    <li><a id="h10" href="#" onclick="modosit(menuk['h10'],'h10');return false;">Menü-1</a></li>
  66.    <li class="sub">
  67.     <a href="#" onclick="return false;">Menü-2</a>
  68.     <ul>
  69.      <li class="sub-nota">
  70.       <a id="v21" href="#" onclick="modosit(menuk['h21'],'h21');return false;">Menü-21</a>
  71.      </li>
  72.      <li class="sub-nota">
  73.       <a id="v22" href="#" onclick="modosit(menuk['h22'],'h22');return false;">Menü-22</a>
  74.      </li>
  75.     </ul>
  76.    </li>
  77.    <li class="sub">
  78.     <a href="#" onclick="return false;">Menü-3</a>
  79.     <ul>
  80.      <li class="sub-nota">
  81.       <a href="#" onclick="return false;">Menü-31</a>
  82.       <ul>
  83.        <li class="sub-nota"><a id="h311" href="#" onclick="modosit(menuk['h311'],'h311');return false;">Menü-311</a></li>
  84.        <li class="sub-nota"><a id="h312" href="#" onclick="modosit(menuk['h312'],'h312');return false;">Menü-312</a></li>
  85.       </ul>
  86.      </li>
  87.     </ul>
  88.    </li>
  89.   </ul>
  90.  </div>
  91.  <!-- Az oldal további része, benne a "content" blokk -->
  92.  <div id="content" class="content"></div>
  93. </body>
  94. </html>
  95.  

A megoldásra egy DEMO is megtekinthető...

HTML és Ajax, plusz PHP

Harmadik esetben szintén Ajax segítségével valósítjuk meg a "content" blokk tartalmának cseréjét, de egy "modosit.php" fájlt hívunk meg ajax segítségével és így lehetőség van esetleg adatbázisból is a szükséges információk kiolvasására...

Egy minta oldal-fájl szerkezete/kódja
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.   <link rel="Shortcut Icon" type="image/x-icon" href="../../favicon.ico" />
  6.   <title>Nagykutyák Ajax+PHP</title>
  7. <script type="text/javascript">
  8. var elozo_id = 'h10';
  9. var akt_id = '';
  10. function modosit(menuID)
  11. { // Mozilla and Friends
  12.   akt_id = menuID;
  13.         if (window.XMLHttpRequest)
  14.         {
  15.                 req = new XMLHttpRequest();
  16.         }
  17.         else
  18.           if (window.ActiveXObject)
  19.           { // Internet Explorer
  20.                         req = new ActiveXObject("Microsoft.XMLHTTP");
  21.                 }
  22.         req.onreadystatechange = processChoices;
  23.         req.open("GET", "modosit.php?menuID="+menuID+"", true);
  24.         req.send(null);
  25. }
  26. function processChoices()
  27. { // wait until the request is done
  28.         if (req.readyState == 4)
  29.         { // Make sure request came back OK
  30.                 if (req.status == 200)
  31.                 {
  32.       document.getElementById('content').innerHTML = req.responseText;
  33.       document.getElementById(elozo_id).style.color = "#99930D";
  34.       elozo_id = akt_id;
  35.       document.getElementById(akt_id).style.color = "orange";
  36.     }
  37.         else
  38.                 { alert("Nem lehet letölteni: " + req.statusText); }
  39.         }
  40. }
  41. </head>
  42. <body onload="modosit('h10')">
  43.  <div id="menu_outer_h">
  44.   <ul class="menu">
  45.    <li><a id="h10" href="#" onclick="modosit('h10');return false;">Menü-1</a></li>
  46.    <li class="sub">
  47.     <a href="#" onclick="return false;">Menü-2</a>
  48.     <ul>
  49.      <li class="sub-nota">
  50.       <a id="v21" href="#" onclick="modosit('h21');return false;">Menü-21</a>
  51.      </li>
  52.      <li class="sub-nota">
  53.       <a id="v22" href="#" onclick="modosit(,'h22');return false;">Menü-22</a>
  54.      </li>
  55.     </ul>
  56.    </li>
  57.    <li class="sub">
  58.     <a href="#" onclick="return false;">Menü-3</a>
  59.     <ul>
  60.      <li class="sub-nota">
  61.       <a href="#" onclick="return false;">Menü-31</a>
  62.       <ul>
  63.        <li class="sub-nota"><a id="h311" href="#" onclick="modosit('h311');return false;">Menü-311</a></li>
  64.        <li class="sub-nota"><a id="h312" href="#" onclick="modosit('h312');return false;">Menü-312</a></li>
  65.       </ul>
  66.      </li>
  67.     </ul>
  68.    </li>
  69.   </ul>
  70.  </div>
  71.  <!-- Az oldal további része, benne a "content" blokk -->
  72.  <div id="content" class="content"></div>
  73. </body>
  74. </html>
  75.  
A "modosit.php" fájl kódja
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <?php
  2. header("Content-Type: text/plan; charset=utf-8");
  3. $page = '';
  4. $pg = isset($_GET['menuID']) ? $_GET['menuID'] : 'h10';
  5. switch ($pg) {
  6.   //hor menü-1 elemei
  7.   case "h10":
  8.     $page = 'bemutatkozas/bemutatkozas.html';
  9.     break;
  10.   //hor menü-2 elemei
  11.   case "h21":
  12.     $page = 'kereses/kutyak/kereskutyakolyok.html';
  13.     break;
  14.   case "h22":
  15.     $page = 'kereses/kutyak/kereskutyafelnott.html';
  16.     break;
  17.   //hor menü-3 elemei
  18.   case "h311":
  19.     $page = 'kereses/cicak/kerescicakolyok.html';
  20.     break;
  21.   case "h312":
  22.     $page = 'kereses/cicak/kerescicafelnott.html';
  23.     break;
  24.   //és amennyi még van
  25.   default:
  26.     $page = 'bemutatkozas/bemutatkozas.html';
  27. }
  28. ?>
  29.  

A megoldásra egy DEMO is megtekinthető...

PHP GET-változóval

Negyedik esetben az alapfájlunk PHP-kiterjesztést kap és egy GET-változó hozzáfűzésével adjuk meg, hogy a "content" blokk tartalmát mire kell cserélni és itt is lehetőség van esetleg adatbázisból a szükséges információk kiolvasására...

Egy minta oldal-fájl szerkezete/kódja
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <?php
  2. $pg = isset($_GET['pg']) ? $_GET['pg'] : '';
  3. $page = '';
  4. switch ($pg) {
  5.  //hor menü-1 elemei
  6.  case "h10":
  7.    $page = 'bemutatkozas/bemutatkozas.html';
  8.    break;
  9.  //hor menü-2 elemei
  10.  case "h21":
  11.    $page = 'kereses/kutyak/kereskutyakolyok.html';
  12.    break;
  13.  case "h22":
  14.    $page = 'kereses/kutyak/kereskutyafelnott.html';
  15.    break;
  16.  //hor menü-3 elemei
  17.  case "h311":
  18.    $page = 'kereses/cicak/kerescicakolyok.html';
  19.    break;
  20.  case "h312":
  21.    $page = 'kereses/cicak/kerescicafelnott.html';
  22.    break;
  23.  //és amennyi még van
  24.  default:
  25.    $page = 'bemutatkozas/bemutatkozas.html';
  26. }
  27. ?>
  28. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  29. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  30. <html xmlns="http://www.w3.org/1999/xhtml">
  31.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  32.   <link rel="Shortcut Icon" type="image/x-icon" href="../../favicon.ico" />
  33.   <title>Gazdi <?php print (!empty($pg) ? $pg : 'Bemutat'); ?></title>
  34. </head>
  35.  <div id="menu_outer_h">
  36.   <ul class="menu">
  37.    <li><a <?php if($pg=='h10' || $pg=='') echo 'style="color:orange;"' ?>
  38.                    href="?pg=h10">Menü-1</a></li>
  39.    <li class="sub">
  40.     <a href="#" onclick="return false;">Menü-2</a>
  41.     <ul>
  42.      <li class="sub-nota">
  43.       <a <?php if($pg=='h21') echo 'style="color:orange;"' ?>
  44.             href="?pg=h21">Menü-21</a>
  45.      </li>
  46.      <li class="sub-nota">
  47.       <a <?php if($pg=='h22') echo 'style="color:orange;"' ?>
  48.             href="?pg=h22">Menü-22</a>
  49.      </li>
  50.     </ul>
  51.    </li>
  52.    <li class="sub">
  53.     <a href="#" onclick="return false;">Menü-3</a>
  54.     <ul>
  55.      <li class="sub-nota">
  56.       <a href="#" onclick="return false;">Menü-31</a>
  57.       <ul>
  58.        <li class="sub-nota"><a <?php if($pg=='h311') echo 'style="color:orange;"' ?>
  59.                                         href="?pg=h311">Menü-311</a></li>
  60.        <li class="sub-nota"><a <?php if($pg=='h312') echo 'style="color:orange;"' ?>
  61.                                         href="?pg=h312">Menü-312</a></li>
  62.       </ul>
  63.      </li>
  64.     </ul>
  65.    </li>
  66.   </ul>
  67.  </div>
  68.  <!-- Az oldal további része, benne a "content" blokk -->
  69.  <div id="content" class="content">
  70.   <?php include($page); ?>
  71.  </div>
  72. </body>
  73. </html>
  74.  

A megoldásra egy DEMO is megtekinthető...

PHP Keresőbarát

Ötödik esetben az alapfájlunk szintén PHP-kiterjesztést kap, de a GET-változó hozzáfűzése helyett más módon lesz megoldva a "content" blokk tartalmának cseréje, mégpedig "Keresőbarát" link megoldással...

Egy minta oldal-fájl szerkezete/kódja
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <?php
  2. header('Content-type: text/html; charset=utf-8');
  3. require dirname(__FILE__).'/conf/urlpatterns.php';
  4. $notFound = false;
  5. if (isset($_GET['URL']))
  6. {
  7.  $notFound = true;
  8.  //Szabályok ellenőrzése
  9.  foreach ($patterns as $pattern)
  10.  {
  11.    if (preg_match('#'.$pattern.'#', $_GET['URL'],$matches))
  12.    {
  13.      $notFound = false;
  14.      $_GET = array_merge($_GET, $matches);  
  15.      break;
  16.    }
  17.  }
  18. }
  19. class Tpl1 { public static $subtitle = ''; }
  20. class Tpl2 { public static $subkeywords = ''; }
  21. class Tpl3 { public static $subdescription = ''; }
  22. $page = !empty($_GET['page']) ? $_GET['page'] : 'bemutatkozas';
  23. $page = 'pages/'.basename($page).'.php';
  24. $page = (file_exists($page) and !$notFound) ? $page : 'pages/error/error404.php';
  25. ob_start();
  26. require_once ($page);
  27. $page = ob_get_clean();
  28. ?>
  29. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  30. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  31. <html xmlns="http://www.w3.org/1999/xhtml">
  32.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  33.   <meta name="keywords" content="<?php print (!empty(Tpl2::$subkeywords) ?
  34.                                    Tpl2::$subkeywords : '?...'); ?>" />
  35.   <meta name="description" content="<?php print (!empty(Tpl3::$subdescription) ?
  36.                                    Tpl3::$subdescription : '?...'); ?>" />
  37.   <title>Macska <?php print (!empty($pg) ? $pg : 'Bemutat'); ?></title>
  38.   <!--
  39.   A bázis alap a kiszolgáló: http://kiszolgalo/ÉS AZ "index.php" ELÉRÉSE/
  40.   (!!!gyökérben ".htacces" is módosítandó!!!)
  41.  -->
  42.   <base href="http://localhost/macskak/" />
  43. </head>
  44.  <div id="menu_outer_h">
  45.   <ul class="menu">
  46.    <li><a href="bemutatkozas">Bemutatkozás</a></li>
  47.    <li style="width:264px;" class="sub">
  48.     <a style="width:264px;" href="#" onclick="return false;">Vadmacskák kontinensek szerint</a>
  49.     <ul style="width:264px;">
  50.      <li style="width:264px;" class="sub-nota">
  51.       <a style="width:264px;" href="vad/europa">Európában honos fajták</a>
  52.      </li>
  53.      <li style="width:264px;" class="sub-nota">
  54.       <a style="width:264px;" href="vad/azsia">Ázsiában honos fajták</a>
  55.      </li>
  56.     </ul>
  57.    </li>
  58.    <li class="sub">
  59.     <a href="#" onclick="return false;">Házimacskák</a>
  60.     <ul>
  61.      <li class="sub-nota">
  62.       <a href="#" onclick="return false;">Rövid szőrű</a>
  63.       <ul>
  64.        <li class="sub-nota"><a href="hazi/rovidegyes">Képekgaléria-1</a></li>
  65.        <li class="sub-nota"><a href="hazi/rovidkettes">Képekgaléria-2</a></li>
  66.       </ul>
  67.      </li>
  68.     </ul>
  69.    </li>
  70.   </ul>
  71.  </div>
  72.  <!-- Az oldal további része, benne a "content" blokk -->
  73.  <div id="content" class="content">
  74.   <?php include($page); ?>
  75.  </div>
  76. </body>
  77. </html>
  78.  

Ebben az esetben egy kicsit bonyolultabb a megoldás. Változtatni kell a könyvtárszerkezeten, azaz a betöltendő tartalom-könyvtárak bele kerülnek egy pages könyvtárba és ide kerül egy-egy "azonos_nevu.php" mindegyik menüponthoz. Van egy plusz könyvtár is a conf.

A könyvtárszerkezet
GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. -index.php(file)
  2. -.htaccess(file)
  3. -conf(dir)
  4. -pages(dir)
  5.   -bemutatkozas(dir)
  6.   -vad(dir)
  7.     -europa.html(file)
  8.     -azsia.html(file)
  9.     -...a többi file és dir...
  10.   -hazi(dir)
  11.     -rovidegyes.html(file)
  12.     -rovidkettes.html(file)
  13.     -...a többi file és dir...
  14.   -bemutatkozas.php(file)
  15.   -vad.php(file)
  16.   -hazi.php(file)
  17.   -...a többi file és dir...
  18. -...a többi file és dir...
  19.  

A pages könyvtárba kerülő "azonos_nevu.php" fájlok felépítése egy és több szintű menü esetében.

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. //egy szint esetében
  2. <?php
  3.   Tpl1::$subtitle = 'Bemutatkozás';
  4.   Tpl2::$subkeywords = 'PhotoFiltre Studio, képszerkesztő, Photofiltre Studio X magyar, képszerkesztés';
  5.   Tpl3::$subdescription = 'PhotoFiltre Studio képszerkesztő program kiegészítők, képkeretek, tutorial';
  6.   include('pages/bemutatkozas/bemutatkozas.html');
  7. ?>
  8. //több szint esetében
  9. <?php
  10. $subpage = (isset($_GET['subpage'])) ? $_GET['subpage'] : '';
  11. if ($subpage == 'europa')
  12. {
  13.   Tpl1::$subtitle = 'Európai vadmacskák';
  14.   Tpl2::$subkeywords = 'Európai vadmacskák';
  15.   Tpl3::$subdescription = 'vadmacskák';
  16.   include('pages/vad/europa.html');
  17. }
  18. else
  19.   if ($subpage == 'azsia')
  20.   {
  21.     Tpl1::$subtitle = 'Ázsiai vadmacskák';
  22.     Tpl2::$subkeywords = 'Ázsiai vadmacskák';
  23.     Tpl3::$subdescription = 'vadmacskák';
  24.     include('pages/vad/azsia.html');
  25.   }
  26.   else
  27.     if ($subpage == 'afrika')
  28.     {
  29.       Tpl1::$subtitle = 'Afrikai vadmacskák';
  30.       Tpl2::$subkeywords = 'Afrikai vadmacskák';
  31.       Tpl3::$subdescription = 'vadmacskák';
  32.       include('pages/vad/afrika.html');
  33.     }
  34.     else
  35.     {
  36.       Tpl1::$subtitle = 'Ezt elbaltáztad.';
  37.       Tpl2::$subkeywords = 'Ezt elbaltáztad.';
  38.       Tpl3::$subdescription = 'elbaltázás';
  39.       include('nincsilyen.php');
  40.     }
  41. ?>
  42.  

A conf könyvtárba kerülő "urlpatterns.php" fájl felépítése.

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. <?php
  2. //submenüs fájlok -&gt; "hasznos", "hazi", "homo", "lehetoseg", "vad"
  3. $patterns = array(
  4.         '^(?<page>vad|hazi|homo|lehetoseg|hasznos)/(?<subpage>[^/]*)/?$',
  5.         '^(?<page>[^/]*)/?$'
  6. );
  7. ?>
  8.  

Végül pedig a .htaccess fájl felépítése.

GeSHi Syntax Highlighting 1.0.8.1 © 2004-2007, Nigel McNie, 2007-2008 Benny Baumann.
  1. #A bázis alap a kiszolgáló: "http://localhost/" nem kell,
  2. #csak ami utána van könyvtárszerkezet az index fájlig -&gt; Ha a gyökérben van, akkor csak
  3. #RewriteBase /
  4. <IfModule mod_rewrite.c>
  5.   RewriteEngine On
  6.   RewriteBase /macskak/
  7.   RewriteCond %{REQUEST_FILENAME} !-f
  8.   RewriteCond %{REQUEST_FILENAME} !-d
  9.   RewriteRule (.*) index.php?%{QUERY_STRING}&URL=$1 [L]
  10. </IfModule>
  11.  

!!!!!!!
Ha esetleg gond van a ".htaccess" fájl szerverre történő feltöltésével, akkor:
Feltöltés előtt nevezd át például htaccess.txt-re, majd fenn nevezd vissza .htaccess-re...
!!!!!!!

*************
Csak érdekességként: Atól függetlenül, hogy mindig az "index.php" fájl van betöltődve, a választott menüponttól függően az oldal lekért forrásában a
<meta name="keywords" content="" /> és
<meta name="description" content="" />
értéke, mindig más és más kifejezéseket tartalmaz.
*************

A megoldásra egy DEMO is megtekinthető...

Végül egy linklista a KERESŐBARÁT témkörben...