您在這裡

首頁 » Forums » 疑難雜症 » 系統安裝、設定、調整

有關 Nice Menu 的 CSS 設定問題

kenming's 的頭像
由 kenming 在 2008-01-09 (三) 01:02 發表

是這樣的，我已設定好 Nice Menu，並可以正常在 Theme 的 primary link 中展開。

我是使用 Zen Classic 的 Them，有個問題是，我希望 MenuItem (也就是所展開的子選單項目) 不要如同主選單項目的 CSS 設定，例如我希望 子選單項目 可以是白底紅字。但是我試了相當久，改過 nice_menus_default.css 內容也沒有效果。

請問該問題如何能解決呢？

附加檔案大小
Image icon drupal_menu.png30.32 KB

不行耶！ 還是試不出來 :(

我主要是改 nice_menus_default.css 的內容，我也試過 ul.nice-menu 改為 ul.nice-menu-down，選單子項目的屬性還是都源自於 zen classic 的 css 設定。

可否請 tokimeki 大大協助是否應該修正 nice_menus_default.css 的哪一個地方嗎？ 謝謝！

我沒有去改預設的nice_menus_default.css，我是改佈景主題中的CSS檔案內容。
所以基本上，只要把那個敘述放到nice_menus_default.css最後面應該就可以了。
我沒改過 zen classic 這個佈景主題，不清楚他是否對 nice menu 做了css的設定，這部份你可能要問一下其他有改過的人。

我發現到的問題是， 在 nice_menus_default.css 中，background and color 等屬性並無法覆蓋掉在於 theme 中 zen-classic.css 中(如 primary a)的 backgrupnd and color 的設定屬性。

這好像是 CSS 規則的限制嗎？

Kenming.

#primary a {zen-classic.css (line 216)
background-position:0% 0pt;
}
#primary a {zen-classic.css (line 203)
background:#6DA6E2 url(images/tabs.png) repeat-x scroll 0%;
border-color:#6191C5;
border-style:solid;
border-width:1px 1px 0pt;
color:#FFFFFF;
display:block;
float:left;
font-weight:bold;
margin:0pt 1px 0pt 0pt;
padding:5px 14px;
}
ul.nice-menu-down ul a, ul.nice-menu-down ul a:link, ul.nice-menu-down ul a:visited {nice_menus_custom... (line 152)
background:transparent none repeat scroll 0% 50%;
color:red;
}
ul.nice-menu-down ul a, ul.nice-menu-down ul a:link, ul.nice-menu-down ul a:visited {nice_menus_custom... (line 152)
background:transparent none repeat scroll 0% 50%;
color:red;
}
ul.nice-menu a {nice_menus_custom... (line 61)
padding:0.3em 5px;
}

這是CSS的規則：id > class
注意看這裡：#primary a
這是指定id，你可以在原本的

ul.nice-menu ul a, ul.nice-menu ul a:link, ul.nice-menu ul a:visited{
color:red;
background:white;
}

改成

#primary ul.nice-menu ul a, #primary ul.nice-menu ul a:link, #primary ul.nice-menu ul a:visited{
color:red;
background:white;
}

試試看～

真的可以耶，實在是太感謝 tokimeki 大大您了。 :)
我現在是這樣改的，會更簡潔一些。

/* 更改子選單項目的背景與顏色屬性 */
#nice-menu-primary li ul a {
color:red;
background:white;
}

不過，現在有個小問題，如附圖，子選單中多出來的邊框(border)空白可否隨文字寬度移除掉呢？

另，To nobody1225：
在導覽列中設定 nice-menu 相當簡單，例如在自己的 theme 目錄內的 page.tpl.php 中，修改如下：
<?php if (!empty($primary_links)): ?>

<?php print theme('nice_menu_primary_links', 'down'); ?>

這樣就可以囉～

由於我不喜歡去改預設的nice_menus_default.css，所以我會寫的比較全面一些～
我把我之前做的樣式貼出來，你自行研究看看：

/*
Nice Menus
*/
ul.nice-menu{
margin:0;
padding:0;
position:static;
font-size:85%;
}
ul.nice-menu ul, #header-region ul.nice-menu ul{
border:0;
}
ul.nice-menu li, ul.nice-menu ul li{
border:0;
width:auto;
margin-right:1ex;
white-space:nowrap;
text-align:center;
vertical-align:middle;
}
ul.nice-menu ul li{
border:0;
margin:0;
}
/* a(padding+line-height)=li(height) */
ul.nice-menu a, ul.nice-menu a:link, ul.nice-menu a:visited{
border:0.1ex solid black;
padding:0.5ex 1ex;
color:black;
line-height:2ex;
overflow:hidden;
width:14ex;
}
ul.nice-menu ul a, ul.nice-menu ul a:link, ul.nice-menu ul a:visited{
border-bottom:0;
}

/* sub-menu */
/* ul(top) = li(height+border)*/
ul.nice-menu ul {
top:3ex;
left:0;
border-bottom:0.1ex solid black;
}
/* ul(left) = li(width)*/
ul.nice-menu-down li ul li ul{
left:14ex;
top:0;
}

/* arrow */
ul.nice-menu li.menuparent,
#header-region ul.nice-menu li.menuparent,
ul.nice-menu li.menuparent:hover,
#header-region ul.nice-menu li.menuparent:hover,
ul.nice-menu-down li.over,
#header-region ul.nice-menu li.over{
background-image:none;
}

記得套用到primary links上得時候前面要指定#id
我沒改過zen-classic這個佈景主題，可能會有水土不服的問題，所以希望你一段一段試看看。