Quelli del cucuzzolo: Struttura del sito con include e menu attivo con jQuery

Le pagine di un sito hanno elementi in comune: parte dell'head (file .css e .js inclusi), l'intestazione (header), il menu principale, il menu di pagina, il pié di pagina (footer).

Per organizzare in modo più agevole il lavoro, specialmente quando si hanno molte pagine da realizzare, è possibile utilizzare la dichiarazione include di php, collocando il codice in comune in file separati. La comodità è evidente: qualsiasi modifica fatta a queste parti va inserita una volta sola, invece di editare una per una tutte le pagine del sito.
Va da sé che tutte le pagine devono avere estensione .php

Questo un esempio di struttura generale:

<!DOCTYPE html>
<html dir="ltr" lang="it">
<head>
  <meta charset="utf-8">
  <title>Titolo della pagina</title>
  <?php include 'nomecartella/head.php'; ?>
</head>
<div id="main">
  <?php include 'nomecartella/header.php' ?>
  <?php include 'nomecartella/menu-or.php' ?>
  <div id="content">
     <div id="colLeft">
       Contenuto della pagina
     </div>
    <div id="colRight">
       <?php include 'nomecartella/menu-page.php'; ?>
     </div> 
   </div>
   <?php include 'nomecartella/footer.php'; ?>
</div>
</body>
</html>

Per ottenere la voce del menu attiva in funzione della pagina che si sta visitando, anche nelle pagine che contengono un menu di pagina, abbiamo seguito questa via:

codice HTML del menu orizzontale

<ul class="menu">
   <li><a data-menu="home" href="index.php" class="active">Home Page</a></li>
   <li><a data-menu="chi-siamo" href="chi-siamo.php">Chi siamo</a></li>
   <li><a data-menu="portfolio" href="portfolio.php">Portfolio</a></li>
   <li><a data-menu="contatti" href="contatti.php">Contatti</a></li>
</ul>

codice HTML del menu di pagina

<ul id="menuv">
   <li><a data-menu="portfolio" href="portfolio.php" class="current">Health Care</a></li>
   <li><a data-menu="portfolio" href="business_company.php">Business Company</a></li>
   <li><a data-menu="portfolio" href="distillate.php">Distillate</a></li>
   <li><a data-menu="portfolio" href="mirax.php">Mirax</a></li>
</ul>

Come si può osservare le voci del menu di pagina hanno un attirbuto data-menu con un valore identico al medesimo attributo della voce del menu orizzontale corrispondente.

Un codice JavaScript/jQuery si occupa di aggiungere/rimuovere le classi active e current, da formattare con i CSS:

codice JavaScript

$(document).ready(function(){
   var page = window.location.pathname;
   var pageMenu = page.substr(page.lastIndexOf("/")+1);
   if (pageMenu != ''){
      $('#menu ul li a').removeClass('active');
      $("ul#menuv a").removeClass('current');
      $menuAttivo = $("ul#menuv a[href = '"+pageMenu+"']");
      $menuAttivo.addClass('current');
      var dataMenu = $menuAttivo.attr('data-menu');
      $("#menu ul li a[data-menu = '"+dataMenu+"']").addClass('active');
      $("#menu ul li a[href = '"+pageMenu+"']").addClass('active');
   }
});

Qui un semplice esempio: DEMO

Quelli del cucuzzolo

Pagine

27 ottobre 2014

Struttura del sito con include e menu attivo con jQuery

Nessun commento:

Posta un commento