1. Magyar Drupal Kézikönyv
  2. Tippek és trükkök
  3. Grafikus felső menü

Grafikus felső menü

Beküldte chx - 2005. február 9. 23.40
chx képe

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.

Hozzászólások

doransky képe

Beküldte doransky - 2005. február 11. 14.55

Ez jó. Sok ilyen cikk kellene. :)

nevergone képe

Beküldte nevergone - 2006. július 11. 21.55

Nyomtatási nézetben nem jó a cikk megjelenítése, valószínűleg a kódrészletek miatt.

Választ szeretnél? - Új kérdés, új téma - Tesztoldal - Trollkezelés - Frissítés

Paal képe

Beküldte Paal - 2007. szeptember 5. 11.45

Üdv!

Szükségem lenne erre a funkcióra 5.x Drupal alatt, de a phptemplate.engine-ben nincs is már ilyen rész.

Tudna valaki segíteni? A lényeg, hogy a List Apart-os cikkhez hasonlóan, én is a beillesztésével takarnám el a link szövegét.

A Friendselectric témában is hasonlóval operálnak, de az is csak 4.7-eshez van meg. :(

Hogy lehetne ilyet előállítani?

<ul>
<li id="menu-1"><a href="menu1"><span></span>Link szövege 1</li>
<li id="menu-2"><a href="menu2"><span></span>Link szövege 2</li>
<li id="menu-3"><a href="menu3"><span></span>Link szövege 3</li>
</ul>

--
Palócz Paal Pál, a drupal.hu admin csoportjának tagja
Ajánlott olvasmány: Eric Steven Raymond - Hogyan kérdezzünk okosan

pp képe

Beküldte pp - 2007. szeptember 5. 11.51

http://api.drupal.org/api/function/theme_links/5

ezt kell átírnod, és akkor minden links ilyen lesz.
Ha a primary, vagy secodary linkekeket akarod megváltoztatni, akkor erre nincs ugye szükség, hisz azokat úgy is Te állítod elő.

pp

Palócz István
https://palocz.hu | https://tanarurkerem.hu

Paal képe

Beküldte Paal - 2007. szeptember 5. 12.31

Üdv,

Pedig a primary/secodary-t szeretném így átalakítani.

Az alap primary links így néz ki:

<?php print theme('links', $primary_links, array('class' => 'links', 'id' => 'navlist')) ?>

Hogy tudom én ezt szétbontani? Gondolom a template.php-ban kell valami function-t rá írni. De mit?

Köszi, Pali

--
Palócz Paal Pál, a drupal.hu admin csoportjának tagja
Ajánlott olvasmány: Eric Steven Raymond - Hogyan kérdezzünk okosan

pp képe

Beküldte pp - 2007. szeptember 5. 12.44

A cikk leírása alapján tudod ezt megtenni.

A $primary_links ugyanis egy tömb, és ezen kell szépen végigmenni. Ennek egy szép példáját látod az előbbi hozzászólásomban lévő linket követve a theme_links -nél (amit meg is hívsz itt!)
de kb:

echo '<ul>';
foreach($primary_links as $link){
   echo '<li>';
   echo l('<span></span>'.$link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment'], FALSE, true); 
   echo '</li>';
}
echo '</ul>';

pp

Palócz István
https://palocz.hu | https://tanarurkerem.hu

Paal képe

Beküldte Paal - 2007. szeptember 5. 14.12

Majdnem teljesen tökéletes, de a különböző menüpontokhoz más-más css id-t kell használnom.
Ezért úgy kellene módosítani a kódot, hogy a <li id="aliasneve">-t kapjon.

Köszi, Pali

--
Palócz Paal Pál, a drupal.hu admin csoportjának tagja
Ajánlott olvasmány: Eric Steven Raymond - Hogyan kérdezzünk okosan

Paal képe

Beküldte Paal - 2007. szeptember 5. 14.35 

<?php
function sajatsmink_primary_menu ($primary_links) {
 
        $output = '';
        $output .= "\n<ul>\n";
        foreach($primary_links as $link){
                $hivatkozas = l('<span><!-- '.$link['title'].'--></span>'.$link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment'], FALSE, true);
                $p=explode('/',$hivatkozas);
                $p=explode('"',$p[2]);
 
                $output .= '<li id="'.$p[0].'">';
                $output .= $hivatkozas;
                $output .= "</li>\n";
        }
        $output .= "</ul>\n";
 
        return $output;
}
?>

Lehet, hogy van sokkal szebb megoldás is, de nekünk jó lesz :)
A megoldás feltételezi, hogy minden menünek van aliasa.

Köszi, Pali

--
Palócz Paal Pál, a drupal.hu admin csoportjának tagja
Ajánlott olvasmány: Eric Steven Raymond - Hogyan kérdezzünk okosan