1. Tudásbázis
  2. Sminkek
  3. Grafikus menühöz id

Grafikus menühöz id

Beküldte Paal - 2007. december 9. 14.28
Paal képe

Üdv,

Kellene egy grafikus menüt készítenem, amelynél minden menüpontnak más-más háttérképe lenne.

A Drupal alap menüfelépítése erre nem jó, mert nem tesz hozzá egyedi id-t:

<ul class="menu">
  <li class="leaf"><a href="/" title="Kezdőlap">Kezdőlap</a></li>
  <li class="collapsed"><a href="/menu-1">Menü 1</a></li>
  <li class="leaf"><a href="/menu-2">Menü 2</a></li>
  <li class="collapsed"><a href="/menu-3">Menü 3</a></li>
</ul>

Találtam egy leírást, aminek a segítségével "id" taggal lehet ellátni a <li> tagot:
A CSS ID for Every Menu Item

TEMPLATE.PHP: Override theme_menu_item() (includes/menu.inc)

<?php
function phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {
  return _phptemplate_callback('menu_item', array(
        'leaf' => $leaf,
        'mid' => $mid,
        'children' => $children
    ));
}
?>


menu_item.tpl.php

<?php
$link = menu_item_link($mid); 
 
// replace spaces with "_", and strip HTML
$css_id = str_replace(' ', '_', strip_tags($link));
 
// render the menu link with unique CSS id.
$output = '<li id="'.$css_id.'" class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .'">'. $link . $children ."</li>\n";
 
print $output;
 
?>


Teljesen jó is lenne, ha nem használnánk ékezetes neveket. De a jobb használhatóság kedvéért, szerintem inkább (ha van) akkor az url_alias-t kellene megadni az id értékének. Hogyan lehetséges ez?

Ja, az útvonal álnévben lehet "/" (hirek/tudomany), amit gondolom le kell majd cserélnem mondjuk egy kötőjelre (hirek-tudomany).

Köszi, Pali

Fórum: 
Sminkek
aries képe

Beküldte aries - 2007. december 9. 15.11

Ha blokkba teszed, annak lesz egyedi id-je.

Aries
http://aries.mindworks.hu

0
0
Paal képe

Beküldte Paal - 2007. december 9. 15.53

Illetve igen, a blokknak van egyedi id-je. De nekem minden menüpontnak más hátteret kellene, hogy adjak, és ezt csak úgy tudom megcsinálni, ha minden li tagnak egyedi id-t generálok.

Vagyis nekem ilyen kellene:

<ul class="menu">
  <li id="kezdolap" class="leaf"><a href="/" title="Kezdőlap">Kezdőlap</a></li>
  <li id="utvonal1" class="collapsed"><a href="/menu-1">Menü 1</a></li>
  <li id="utvonal2" class="leaf"><a href="/menu-2">Menü 2</a></li>
  <li id="utvonal3" class="collapsed"><a href="/menu-3">Menü 3</a></li>
</ul>


Mert csak így lehet hivatkozni az adott li tagra:

.menu li#kezdolap { background: url('images/kezdolaphatter.png'); }
.menu li#utvonal1 { background: url('images/elsohatter.png'); }
.menu li#utvonal2 { background: url('images/masodikhatter.png'); }
.menu li#utvonal3 { background: url('images/harmadikhatter.png'); }


Vagy te tudsz olyan dolgot, amivel enélkül megoldható?

Köszi, Pali

0
0

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

dorion képe

Beküldte dorion - 2007. december 9. 17.34

template.php fileba

function phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {       
  return '<li class="'. ($leaf ? 'leaf' : ($children ? 'expanded' :'collapsed')) .'" id="menuid'. $mid .'">'. menu_item_link($mid) . $children."</li>\n";                                                       
}

Természetesen ez a megoldás csak akkor jó ha phptempate-et használsz.

0
0
Illyés Edit képe

Beküldte Illyés Edit (nem ellenőrzött) - 2007. december 9. 17.54

Ne blokkba tedd, hanem a page.tpl.php-ben írasd ki. A Garland sminket nézd meg, minden li elemen egyedi stílusosztály van.

0
0
Paal képe

Beküldte Paal - 2008. február 4. 00.42

Az a probléma, hogy így csak az első menüsort írja ki, az alatta lévő (gyerek) menüpontokat nem...

<!-- main navigation -->
<ul class="links primary-links">
  <li class="first menu-1-1-2"><a href="/menu-1" class="menu-1-1-2">Menü 1</a></li>
  <li class="menu-1-2-2"><a href="/menu-2" class="menu-1-2-2">Menü 2</a></li>
  <li class="menu-1-3-2"><a href="/menu-3" class="menu-1-3-2">Menü 3</a></li>
</ul>
<!-- main navigation END -->


De nekem az (is) kellene, hogy az almenüpontok is megjelenjenek:

<!-- main navigation -->
<ul class="links primary-links">
  <li class="first menu-1-1-2"><a href="/menu-1" class="menu-1-1-2">Menü 1</a>
    <ul>
      <li class="menu-2-1-1"><a href="/menu-2-1" class="menu-2-1-1">Menü 1</a></li>
    </ul>
</li>
  <li class="menu-1-2-2"><a href="/menu-2" class="menu-1-2-2">Menü 2</a></li>
  <li class="menu-1-3-2"><a href="/menu-3" class="menu-1-3-2">Menü 3</a></li>
</ul>
<!-- main navigation END -->

Mégis, hogy lehetne?

Köszi, Pali

0
0

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

oky képe

Beküldte oky - 2008. április 25. 15.47

Igaz, nem id-val, hanem class-sal csináltam, és 5-ös drupalhoz: http://drupal.hu/tippek/egyedimenupontok

0
0