我该如何改进这种标记和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以使事情简单易行？

回答

相关问题