Grafikus felső menü

A Drupal egyik apróbb problémája, hogy a felület nem nyújt lehetőséget szép, grafikus felső menüt összeállítani. Ezen könnyen segíthetünk egy megfelelő smink használatával. Vegyük a Marvin 2K sminket alapul, én annak a PHPtemplate-es változatából szoktam kiindulni.

Az ötlet a List Apartról származik. A lényege az, hogy CSS-el készítünk kliens oldali térképet, mégpedig úgy, hogy linkeket megfelelő méretre "felfújunk" és a helyükre tolunk. Ilyenkor a linkek szövege csak zavaró, ezért azokat eltüntetjük. Háttérnek pedig betesszünk egy képet, ami a menüt alkotó ikonok egymás mellé rakásából keletkezett.

A layout.css-ben a következő maradt meg a #main-nav -ra vonatkozó szabályokból:


#main-nav {
position: absolute;
left: 180px;
top: 53px;
margin: 0;
padding: 0;
height: 69px;
width: 435px;
}

A style.css-ben pedig ez:


#main-nav {
background: url(menu.jpg) no-repeat top left;
}
#main-nav li {
list-style-type: none;
float: left;
display: inline;
position: relative;
width: 86px;
}
#main-nav li a {
width: 86px;
height: 69px;
display: block;
text-decoration: none;
}
#main-nav a span {
visibility: hidden;
}

A phptemplate.engine-ben keressünk $links[$type][]-re, és azt a sort cseréljük a következőre:

$links[$type][] = l(''. $value['text'][$i] .'', $value['link'][$i], $attributes);
?>

Ezzel készen is vagyunk. Természetesen nem biztos, hogy pont 5*86 széles lesz a menüképünk, változassunk a fenti CSS-en értelemszerűen. De mi van akkor ha netán nem egyforma szélesek a menüikonok? Vagy szeretnénk a hivatkozott List Apart cikkhez hasonló módon rollovereket is? Ekkor a fenti sor helyett a következő kettőt írjuk a phptemplate.engine-be:

$attributes['id'] = 'main-nav-link-'. $i;
$links[$type]['main-nav-list-'. $i] = l(''. $value['text'][$i] .'', $value['link'][$i], $attributes);
?>

És még a page.tpl.php-ben kell egy apró módosítás, keressünk ul id="main-nav"-re, és cseréljük a következőre:

Így elértük, hogy minden egyes listaelemre és linkre egyedi azonosítóval hivatkozhatunk a CSS-ben: main-nav-list-0, main-nav-list-1 stb. illetve main-nav-link-0, main-nav-link-1 stb.