Как определить стили для отдельных ячеек в SharePoint 2007 topnav?

Question

У меня есть клиент, который запрашивает отдельные цвета для каждой отдельной навигационной ячейки в MOSS topnav. Я знаю, как стилизовать панель topnav в целом, но не могу придумать способ разделить их отдельно.

Я просмотрел источник, который генерирует SharePoint, и заметил, что вкладки имеют ID'd 'zz1_TopNavigationMenun1', 'zz1_TopNavigationMenun2' и т. Д., Но не могут переопределить CSS.

Кто-нибудь знает, можно ли явно установить каждую вкладку, и если да, то какой CSS включить?

Большое спасибо.

Answer 1

Да, вы можете настраивать отдельные вкладки меню MOSS, но это очень хаки (поскольку код не доступен, а стили часто встроены, вам нужно использовать важные хаки CSS).

В таблице, которая содержит все меню имеет следующие ID: zz1_TopNavigationMenu

Затем каждый пункт меню topnav имеет следующие ID: zz1_TopNavigationMenun0, zz1_TopNavigationMenun1 и т.д. Начиная слева направо (на число в end, поэтому n0 - это самый левый элемент меню, n1 - второй и т. д.)

Каждый пункт меню является td. Вы можете установить границу пункта меню в вашем CSS, делая что-то вроде

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

}

вам нужно использовать! Важные CSS хаки для того, чтобы сделать эту работу. В противном случае ваши стили будут переопределены встроенными стилями, которые отображаются в меню MOSS (по мере того, как пользователь наводил на него курсор).

Внутри этих TDs, есть еще одна таблица, где вы можете установить больше стилей (вид ссылки, например, и т.д.)

При выборе пункта меню, класс мс-topnavselected добавляется к нему , Вы можете использовать это, чтобы применить другой цвет к пункту меню, например (еще раз, используйте важную роль в вашем CSS!)

Когда пункт меню не выбран, вы должны получить 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> 

большая разница между 2 является .ms-topnavselected так это то, что вы должны использовать, если вы хотите, чтобы стиль выбранного меню :

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

например (еще раз, вам нужно! Важно).

Так что, если вы хотите стилизовать меню на основе своих позиций, используйте его в таблице, используя # zz1_TopNavigationMenun, если вы хотите стилизовать выбранное меню, перейдите в .ms-topnavselected. Для чего-либо еще внутри, вам придется использовать отношения родитель-потомок для доступа к ним (поскольку их идентификаторы ненадежны). Например:

#zz1_TopNavigationMenun1 > tbody > tr > td 

Чтобы создать конкретный пункт меню.

Надеюсь, это поможет!