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

Question

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

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

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

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

Answer 1

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

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

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

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

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

}

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

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

Когда элемент меню выбран, к нему добавляется класс ms-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>

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

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

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

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

#zz1_TopNavigationMenun1 > tbody > tr > td

для стилизации определенного пункта меню.

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