2012-10-02 59 views
0

我正在使用禪宗主題的Drupal 7。我想在導航欄中添加一個具有以下要求的菜單: 1.背景:灰色 2.分隔符「|」劃分每個菜單項 3.沒有菜單項的下劃線Drupal - 如何包含「|」作爲每個菜單項的分隔符

我能夠在navigation.css文件中完成#1。你能告訴我如何完成2和3? -------------------------------------- the answer --------- --------------------------

對於那些誰感興趣的話,這裏就是我如何完成上述:

  1. 將背景設置爲灰色,編輯responsive-sidebars.css,在#navigation code-block下添加「background:grey」。

  2. 增加一個除法 「|」 編輯navigation.css,添加以下代碼:

    #navigation li:before { 
        content: "|"; 
    } 
    
  3. 無下劃線的菜單項,編輯navigation.css,加上 「文字修飾:無」和#navigation一個以「#navigation ul.links立」碼堆是這樣的:

    #navigation ul.links li, 
    #navigation ul.menu li, 
    #navigation a 
    { 
    
        padding: 0px 5px; 
        margin-right: 5px; 
        border-radius: 5px 5px 5px 5px; 
        float:left; 
        color:white; 
        vertical-align: middle; 
        list-style: none; 
        text-decoration: none; 
    } 
    

回答

1

怎麼樣只是把一種風格,你與(富)工作,做類似的元素:

FOO:before { 
    content: "|"; 
} 
FOO:first-child:before { 
    content: ""; 
} 

其中FOO是您正在使用的導航類或元素。

這裏發生了什麼是你正在使用一個僞元素來放置你的元素之前的管道,第一個孩子在那裏,以確保你沒有在你的第一個項目前的管道。 (相反,使用:之後和:最後一個孩子將同樣有效)

+0

謝謝,這是有效的。 – mwalsh

相關問題