您在這裡

首頁 » Forums » 疑難雜症 » 版型/Themes

menu沒辦法依照層級設定class？

hanamizuki's 的頭像
由 hanamizuki 在 2009-03-31 (二) 18:31 發表

水滴趴結束，我得開始面對我的Drupal網站了！所以又會開始有一堆問題丟上來，請多多包涵。

這兩天使用了acquia的版型，覺得真的很棒，大家也可以安裝來玩玩看。
而今天的問題是：

像這樣的選單，如果我希望第一層「管理部、GP、內部系統」能夠用CSS修改，讓他和第二層有不同樣式，該如何做呢？
他的原始碼的class都一樣，沒有依照「層級」有不同class：(生成的html原始碼如下 )

問題二是，
我希望新增一個「我要」的選單，裡面有「修改密碼」、「修改資料」之類的，
但修改資料的連結是user/(user-id)/edit，在新增選單的地方有辦法使用像是之類的token嗎？

(版本是Drupal 6.10)

你說的沒錯，真的層級不同。不過第一層的li包含了整個第二層的ul，所以如果我希望第一層的li有框，第二層沒有，我
ul.menu li {border:1px solid #ccc;}
ul.menu li ul li {border:0px solid #ccc;}

結果變這樣

所以後來我用li a來指定只把連結框住，然後拿掉第一層li的背景，結果洋洋灑灑寫了一堆：
(icon圖檔是使用這張...暫時用)
/*#block-menu-primary-links */
#block-menu-primary-links ul.menu{
position:relative;
left:-10px;
}
#block-menu-primary-links ul.menu li{
padding: 0.2em 0 0 0em;
background:none;
margin-top:10px;
}
#block-menu-primary-links ul.menu li ul {
margin-top:5px;
}
#block-menu-primary-links ul.menu li ul li{
padding: 0 0 0 35px;
position:relative;
left:10px;
margin-top:-5px;
}
#block-menu-primary-links ul.menu li a{
display:block;
width:186px;
height:27px;
line-height:27px;
border-bottom:1px solid #B4BF9B;
text-decoration:none;
color:#333333;
padding-left:35px;
}
#block-menu-primary-links ul.menu li ul li a{
border:0px solid #ccc;
padding-left:0px;
font-weight:normal;
}
#dhtml_menu-720{
background: url('icons/sprite_icos_090212.png') no-repeat 6px -716px;
}
#dhtml_menu-358{
background: url('icons/sprite_icos_090212.png') no-repeat 10px -631px;
}
#dhtml_menu-722{
background: url('icons/sprite_icos_090212.png') no-repeat 10px -660px;
}
#dhtml_menu-374{
background: url('icons/sprite_icos_090212.png') no-repeat 12px -690px;
}
#dhtml_menu-723{
background: url('icons/sprite_icos_090212.png') no-repeat 10px -746px;
}
#dhtml_menu-724{
background: url('icons/sprite_icos_090212.png') no-repeat 10px -780px;
}

HTML最後生成如下

最後顯示：

差不多是我要的樣子，感謝。

問題一
純 css 作法
.menu .menu {} ，像這樣的選取器就可以抓到 menu class 裡面的第二層 menu class，注意.menu 之間需要一個空白隔開

進階一點就是覆寫 theme_menu_tree()，做更精細的修改，直接加入想要的 class