Creazione menù navigabile

Creazione blocco nel layout:

La creazione del menù dovrà avvenire creando e configurando un blocco attraverso la procedura di referenziazione presente nei layout XML. Una volta impostato il nuovo blocco, passiamo alla creazione del template.


Creazione template:

Per prima cosa generiamo un array di array, al cui interno inseriremo 2 valori per ogni voce di menù: il titolo e l’url alla pagina. Ora attraverso un ciclo foreach non ci resta che generare ogni riga all’interno di una lista, scegliendo le classi da associare ad ogni voce attraverso il controllo sull’url presente sulla barra degli indirizzi. Questo ci permetterà di conoscere quale voce di menù dovrà essere ‘active’ ed impostarla di conseguenza, come nel seguente esempio:

<?php 
    $sos_link=array(array('Faq',$this->getUrl('Faq')),
                    array('Tempi di consegna',$this->getUrl('tempi-di-consegna')),
                    array('Metodi di pagamento',$this->getUrl('metodi-di-pagamento')),
                    array('Spese di consegna',$this->getUrl('spese-di-consegna')),
                    array('Corriere utilizzato',$this->getUrl('corriere-utilizzato')),
                    array('Emissione fattura',$this->getUrl('emissione-fattura')),
                    array('Reclami',$this->getUrl('reclami')),
                    array('Recesso',$this->getUrl('recesso')),
                    array('Privacy',$this->getUrl('privacy'))
                   );
?>
<div id="sos-menu" class="base-mini">
    <div class="head head-purple">
      <span class="text">Sos consumatore</span>
    </div>
    <ul id="sos-menu">     
<?
    foreach($sos_link as $link){
      if('http://www.odettesrl.com'.$_SERVER["PHP_SELF"] == $link[1]) echo '<li class="on"><span>'.$link[0].'</span></li>';
      else echo '<li><a title="'.$link[0].'" href="'.$link[1].'">'.$link[0].'</a></li>';
    }
?>
    </ul>
</div>

Settaggio nel CSS:

Tenendo presente la programmazione del template, inseriamo nel foglio di stile i comandi che renderanno graficamente differenti la voce ‘active da quelle’‘inactive’.

0 commenti

Lascia un Commento

Vuoi partecipare alla discussione?
Sentitevi liberi di contribuire!

Lascia un commento