我該如何改進這種標記和CSS以使事情簡單易行？

我有以下的標記，用來產生一個彈出式的大型菜單（.COLUMN格在那裏，讓每一個彈出式內多列，但只以下的例子中的一列）...我該如何改進這種標記和CSS以使事情簡單易行？

<ul id="mainmenu"> 
    <li class="mega"> 
     <h2><a href="/">Menu 1</a></h2> 
     <div class="submenu col1 leftmenu"> 
      <div class="column"> 
       <ul> 
        <li><h3>Sub Menu Heading</h3></li> 
        <li><a class="hilight" href="#">Do Something</a></li>  
        <li><a class="hilight" href="#">More great stuff</a></li> 
        <li><a href="#">Another Item</a></li> 
       </ul> 
      </div> 
     </div> 
    </li> 
    <li class="mega"> 
     <h2><a href="#">Second Menu</a></h2> 
     <div class="submenu col3 leftmenu"> 
       blar blar blar 
     </div> 
    </li> 
    // more menus here  
</ul>

由於這個巢相當深深不少類似的標籤（<li><a>）我最終需要選擇的一個相當可怕的列表樣式是在CSS中，如。

#mainmenu li h2 a {} 
#mainmenu li.mega .column li h3 a {}

任何人都可以提出任何改進的標記，以便它更簡單的目標與CSS和jQuery？

來源

2009-05-29 Rik Heywood

如果是我，我把有問題的最終實體很好的靶向類，並改變

#mainmenu li h2 a {}

到

#mainmenu .section {}

和

#mainmenu li.mega .column li h3 a {}

到

#mainmenu .subsection {}

什麼都沒有。

來源

2009-05-29 15:44:27 chaos

不是沒有看到你的CSS的休息真的，但我覺得你的動機是錯誤的。您應該瞄準您的標記以準確反映需要的內容。如果這件事情需要從那件事他們需要存在不同的元素，如果不是，不被定義爲獨立的。除非你的標記是需要，否則別擔心CSS，甚至不考慮CSS。

我會說，它看起來像你可能會將div.column和ul子項摺疊到ul.column中，並且可能會將h2中的錨點移動到div.submenu的內部並給出一個「header」類例如。

來源

2009-05-29 15:45:27 annakata

我個人認爲你的HTML看起來不錯，這不是無盡的困擾IDS和無類的似乎是多餘的或無用的。

如果你永遠不要使用H3任何地方，但一個內裏，一列中，父李裏，那麼你可以這樣做：#mainmenu h3 a。我真的認爲你可以在你的選擇器中不那麼明確。

我嘗試要真正利用獨特的HTML標籤，讓所有我需要的是最上面的元素，如果需要的話下面幾類上的ID。

來源

2009-05-29 15:51:08

您始終可以使用更具體的選擇器名稱。相反的：

#mainmenu li.mega .column li h3 a {} 
and 
<ul id="mainmenu"><li class="mega"><div class="column"><li><h3><a>

使用

h3.mega_column a {} 
and 
<ul id="mainmenu"><li class="mega"><div class="column"><li><h3 class="mega_column"><a>

來源

2009-05-29 15:51:21

除了確保您的結構是真正適合您的內容的語義不只是有設計原因，也有幾件事情我可以建議：

你並不需要包裝<UL>在<DIV>如果沒有什麼別的在div。它們都是塊級元素，您可以編寫< ul class =「column」>併爲自己節省一些不必要的標記。這是多餘的。
如果你不是在不同的地方使用類名來表示不同的東西，那麼你可能能夠簡化你的CSS。例如，如果您只使用#mainmenu .mega下的「列」類，那麼實際上不需要每次都指定它。只要說.column h3 a就會到達那裏。
如果你想簡單的jquery你也可以利用CSS3選擇器如：not（）來爲你排序。例如，而不是$("#mainmenu li.mega .column li")可以轉而做$("#mainmenu li:not(.mega)")

這些是我的想法。

來源

2009-05-30 05:17:45

我該如何改進這種標記和CSS以使事情簡單易行？

回答

相關問題