Menu pentru pagini WEB cu PHP si JS

Una din preocuparile designerului web consta in realizarea meniului de navigare in site-ul pe care il lucreaza si de ce sa nu recunoastem, este o sarcina care ia timp.

Inainte de a apare multimea de facilitati oferite de JS, HTML5 si CSS3 butoanele din meniurile de navigare erau construite, de exemplu, in Photoshop si apoi transformate in imagini obisnuite pentru web, jpg, gif sau png.

La vremea aceea, nu chiar de mult, vorbim de 3-4 ani, era o munca laborioasa sa pui la punct un meniu, cat de cat sa nu te faca de ras. Si daca iti mai reusea si un efect de hoover, erai tare.

La acea vreme automatizasem procesul de afisare al meniului si vreu sa va prezint in continuare cum am facut acest lucru.

Scriptul foloseste imagini gif drept butoane de meniu, are integrat efectul hoover si memoreaza butonul apasat. Scriptul foloseste PHP si JS. Butoanele sunt realizate in prealabil cu un editor de imagini (ex. Photoshop). Se realizeaza cate o pereche pentru fiecare buton din meniu, una pentru butonul ridicat si cealalta pentru butonul apasat. Imaginile se denumesc b0_down.gif, respectiv b0_up.gif, b1_down.gif, b1_up.gif s.a.m.d.

Problema

Sa automatizam procesul de afisare al meniului in pagina web.

Solutie

Creati fisierul menu.js:

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

si il salvati in subdirectorul js.

In tag-ul head al paginii inserati:

$nr_butoane=4;                  //numarul de butoane din menu -1; index.php are buton 0
$pagina_curenta=$_SERVER['PHP_SELF'];
$buton_activ=substr($pagina_curenta,-5,1);
$bara_menu="";
if($buton_activ=="x"){
    $index=0;
}else{
    $index=$buton_activ;
}
$i=0;
while ($i<=$nr_butoane){
    $buton_up="images/menu_buttons/b".$i."_up.gif";
    $buton_down="images/menu_buttons/b".$i."_down.gif";
    if($i==0){
        $pagina="index.php";
    }else{
        $pagina="index-".$i.".php";             //paginile cu menu: index.php, index-1.php samd
    }
    if($i==$index){
        $menu='';
    }else{
        $menu1='';
        $onmouseover="MM_swapImage('Image".$i."','','".$buton_down."',1)";
//se decomenteaza

    }
    $bara_menu=$bara_menu."".$menu."";
    $i++;
}
    $bara_menu="".$bara_menu."";

si il salvati in subdirectorul include.

In locul in care doriti sa se afiseze meniul, inserati:

include "include/menu.php";
echo $bara_menu;

Explicatii

Functiile JS de mai sus, sunt necesare pentru efectul de hoover si pentru inlocuirea imaginii butonului ridicat cu cea a butonului apasat.

Scriptul PHP construieste din imaginile realizate pentru butoane, un rand care va fi afisat drept meniu al paginii.

Observatii

Solutia poate fi folosita fara nicio restrictie si fara consecinte negative. A fost incercata pe toate browserele majore, ultimele versiuni.

Trebuie atrasa atentia ca pentru layout-ul paginii sunt folosite tag-urile table, tr si td, dar cu putin efort poate fi adaptata la tag-ul div.

Deasemenea, solutia este mai putin prietenoasa SEO, deoarece numele paginilor trebuiesc uniformizate, pentru a le putea controla mai usor in script.

Scriptul poate fi adaptat insa pentru orice nume de pagini si chiar pentru un meniu lateral.

Multe multumiri...

Internetului ca exista si celor care ne mai spun pe gratis cate ceva, chiar daca i-a costat mult timp sa invete!

Daca articolul v-a fost util, va rugam sa lasati un comentariu.

Menu pentru pagini WEB cu PHP si JS