我有一个客户正在为MOSS topnav中的每个单独的导航单元请求单独的颜色。我知道如何总体上对topnav栏进行样式设置,但无法想到为它们分别着色的方法。

我查看了SharePoint生成的源,并注意到选项卡的ID为'zz1_TopNavigationMenun1','zz1_TopNavigationMenun2'等,但似乎无法覆盖CSS。

是否有人知道是否可以显式设置每个选项卡,如果可以,则包括哪些CSS?

非常感谢。

最佳答案

是的,您可以设置MOSS菜单的各个选项卡的样式,但是它非常hacky(由于无法访问代码,并且样式通常是内联的,因此您需要使用!important CSS hacks)。

包含所有菜单的表具有以下ID:zz1_TopNavigationMenu

然后,每个topnav菜单项都具有以下ID:zz1_TopNavigationMenun0,zz1_TopNavigationMenun1等。
从左到右开始(对于末尾的数字,因此n0是最左边的菜单项,n1是第二个菜单项,依此类推)

每个菜单项都是一个td。您可以通过以下操作在CSS中设置菜单项的边框

#zz1_TopNavigationMenun1 {
   border-left:1px solid #FFFFFF !important;
   border-right:1px solid #FFFFFF !important;


}

您需要使用!important css hack才能使其正常工作。否则,您的样式将被MOSS菜单中显示的嵌入式样式覆盖(当用户将鼠标悬停在其上时)。

在这些TD中,还有另一个表,您可以在其中设置更多样式(例如,链接的外观等)。

选择菜单项后,会将ms-topnavselected类添加到其中。例如,您可以使用它为菜单项应用不同的颜色(再次,在CSS中使用!important)

当未选择菜单项时,您应该获得如下所示的HTML:

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="ms-topnav zz1_TopNavigationMenu_4 ms-topnavselected zz1_TopNavigationMenu_10">
  <tbody>
    <tr>
  <td style="white-space: nowrap;">
        <a style="border-style: none; font-size: 1em;" href="...." class="zz1_TopNavigationMenu_1 ms-topnav zz1_TopNavigationMenu_3 ms-topnavselected zz1_TopNavigationMenu_9">Text</a>
      </td>
</tr>
  </tbody>
 </table>


选中后,HTML将如下所示:

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="ms-topnav zz1_TopNavigationMenu_4 ms-topnavselected zz1_TopNavigationMenu_10">
  <tbody>
    <tr>
  <td style="white-space: nowrap;">
        <a style="border-style: none; font-size: 1em;" href="...." class="zz1_TopNavigationMenu_1 ms-topnav zz1_TopNavigationMenu_3 ms-topnavselected zz1_TopNavigationMenu_9">Text</a>
      </td>
</tr>
  </tbody>
 </table>


两者之间的最大区别是.ms-topnavselected,因此,如果要为所选菜单设置样式,则应使用此命令:

.ms-topnavselected {
     color:#FFFFFF !important;
}


例如(再次,您需要!important)。

因此,基本上,如果要基于菜单的位置来样式化菜单,请使用#zz1_TopNavigationMenun从表中对其进行样式设置;如果要样式化所选菜单,请使用.ms-topnavselected。对于其中的其他任何内容,您都必须使用父子关系来访问它们(因为它们的ID不可靠)。例如 :

#zz1_TopNavigationMenun1 > tbody > tr > td


设置特定菜单项的样式。

希望这可以帮助!

关于css - 如何在SharePoint 2007 topnav中为单个单元格定义样式?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/3064059/

10-16 21:12