Как стилизовать меню asp.net с помощью CSS

Question

Я занимаюсь стилизацией меню asp.net и пытаюсь понять значение параметров StaticSelectedStyle-CssClass и StaticHoverStyle-CssClass.

Насколько я понимаю, стили, определенные с этими параметрами, применяются в качестве классов CSS к соответствующим элементам, когда это необходимо. Поэтому я создал свое меню следующим образом:

<asp:Menu ID="NavigationMenu" DataSourceID="NavigationSiteMapDataSource" 
        StaticMenuStyle-CssClass="StaticMenuStyle"
        StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
        StaticSelectedStyle-CssClass="StaticSelectedStyle"
        StaticHoverStyle-CssClass="StaticHoverStyle"
        Orientation="Horizontal" 
        MaximumDynamicDisplayLevels="0" 
        runat="server">
</asp:Menu>

Работает для StaticMenuStyle-CssClass и StaticMenuStyle-CssClass (классы применяются к соответствующим элементам), но StaticSelectedStyle-CssClass и StaticHoverStyle-CssClass не применяются независимо от выбранного или наведенного состояния элемента.

Что я должен сделать, чтобы сделать эту работу?

Спасибо.

РЕДАКТИРОВАТЬ: Извините, я должен был упомянуть, что это .NET 4. Вот сгенерированный HTML:

<div id="NavigationMenu">
 <ul class="level1 StaticMenuStyle">
  <li><a class="level1 StaticMenuItemStyle selected" href="/Link.aspx">Link</a></li>
 </ul>
</div>

Итак, как вы можете видеть, применяются StaticMenuStyle и StaticMenuItemStyle, но не StaticSelectedStyle-CssClass или StaticHoverStyle-CssClass. Не уверен почему. Я знаю, что могу использовать выбранный, но разве не ожидается, что будет применен StaticSelectedStyle-CssClass ??? Используя выбранное, я делаю предположения о том, что делает .NET за кулисами, и это неправильно.

Answer 1

Я чувствую вашу боль, и я потратил впустую всю ночь / утро, пытаясь понять это. С помощью грубой силы я нашел решение. Назовите это обходным путем - но это просто.

Добавьте свойство CssClass в объявление вашего элемента управления меню, например:

<asp:Menu ID="NavigationMenu" DataSourceID="NavigationSiteMapDataSource"
        CssClass="SomeMenuClass"
        StaticMenuStyle-CssClass="StaticMenuStyle"
        StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
        Orientation="Horizontal" 
        MaximumDynamicDisplayLevels="0" 
        runat="server">
</asp:Menu>

Просто извлеките атрибуты StaticSelectedStyle-CssClass и StaticHoverStyle-CssClass, так как они просто не используют jack.

Теперь создайте SomeMenuClass, независимо от того, что вы в него вставили. Это должно выглядеть примерно так:

.SomeMenuClass
{
    color:Green;
}

Затем добавьте следующие два CSS-класса:

Для стиля "Hover" добавить:

.SomeMenuClass a.static.highlighted
{
    color:Red !important;
}

Для стиля «Выбранный» добавить:

.SomeMenuClass a.static.selected
{
    color:Blue !important;
}

Вот и все. Вы сделали Надеюсь, это спасет некоторых из вас от разочарования, которое я пережил. Кстати: вы упомянули:

Кажется, я первый сообщить о том, что кажется ошибкой.

Вы также, похоже, думаете, что это новая ошибка .NET 4.0. Я нашел это: http://www.velocityreviews.com/forums/t649530-problem-with-staticselectedstyle-and-statichoverstyle.html опубликовано еще в 2008 году относительно Asp.Net 2.0. Как мы, единственные 3 человека на планете, жалуемся на это?

Как я нашел обходной путь (изучите вывод HTML):

Вот вывод HTML, когда я устанавливаю StaticHoverStyle-BackColor = "Red":

#NavigationMenu a.static.highlighted
{
    background-color:Red;
}

Это вывод HTML при установке StaticSelectedStyle-BackColor = "Blue":

#NavigationMenu a.static.selected
{
    background-color:Blue;
    text-decoration:none;
}

Поэтому логичным способом переопределения этой разметки было создание классов для SomeMenuClass a.static.highlighted и SomeMenuClass a.static.selected

Специальные примечания:

Вы ДОЛЖНЫ также использовать «! Important » на ВСЕХ настройках этих классов, потому что в выводе HTML используется « # NavigationMenu », а это означает, что любые стили, которые Asp.Net решает добавьте туда, чтобы у вас был приоритет наследования над любыми другими стилями элемента управления меню с идентификатором " NavigationMenu ". Одна вещь, с которой я боролась, - это заполнение, пока я не выяснил, что Asp.Net использует « # NavigationMenu » для установки левого и правого заполнения на 15em. Я добавил «! Important » к моим SomeMenuClass стилям, и это сработало.

Answer 2

Хорошо, так что, очевидно, не так уж много людей пробовали меню .NET 4 на сегодняшний день. Не удивительно, так как финальная версия была выпущена пару дней назад. Кажется, я первый, кто доложил о том, что кажется ошибкой. Я сообщу об этом MS, если найду время, но учитывая послужной список MS, что я не обращаю внимания на сообщения об ошибках, я не тороплюсь с этим.

В любом случае, на данный момент наименее худшее решение - скопировать и вставить стили CSS, сгенерированные элементом управления (проверьте заголовок), в свою собственную таблицу стилей и изменить ее оттуда. После того, как вы это сделаете, не забудьте установить IncludeStyleBlock = "False" в вашем меню, чтобы предотвратить автоматическую генерацию CSS, так как теперь мы будем использовать скопированный блок. Концептуально это не правильно, поскольку ваше приложение не должно полагаться на автоматически сгенерированный код, но это единственный вариант, который я могу придумать.

Answer 3

Я помню атрибут StaticSelectedStyle-CssClass, используемый для работы в ASP.NET 2.0. И в .NET 4.0, если вы измените атрибут RenderingMode элемента управления Menu «Таблица» (таким образом, заставляя его визуализировать меню как s и sub-s, как это было в '05), он по крайней мере запишет указанный вами StaticSelectedStyle-CssClass в соответствующий html элемент.

Этого может быть достаточно, чтобы ваша страница работала так, как вы хотите. Однако мой обходной путь для выбранного пункта меню в ASP 4.0 (при оставлении RenderingMode в его значении по умолчанию) состоит в том, чтобы имитировать сгенерированный «выбранный» класс CSS элемента управления, но дать моему объявлению «! Important» CSS, чтобы мои стили имели приоритет там, где это необходимо. ,

Например, по умолчанию элемент управления Menu отображает элемент "li" и дочерний элемент "a" для каждого элемента меню, а элемент "a" выбранного элемента меню будет содержать class = "selected" (среди других генерируемых элементом управления имен классов CSS, включая «статический», если это статический пункт меню), поэтому я добавляю свой собственный селектор на страницу (или в отдельный файл таблицы стилей) для тегов «статический» и «выбранный» «а», например:

a.selected.static
{
background-color: #f5f5f5 !important;
border-top: Red 1px solid !important;
border-left: Red 1px solid !important;
border-right: Red 1px solid !important;
} 

Answer 4

Я столкнулся с проблемой, когда класс 'selected' не был добавлен в мой пункт меню. Оказывается, по какой-то причине на нем не может быть NavigateUrl.

Как только я удалил NavigateUrl, он применил к тегу «выбранный» класс css, и я смог применить стиль фона с помощью:

div.menu ul li a.static.selected
{
    background-color: #bfcbd6 !important;
    color: #465c71 !important;
    text-decoration: none !important;
}

Answer 5

Я попробовал решение MikeTeeVee, все еще не работает, я имею в виду, что выбранная вкладка все еще не изменяется и сохраняет другой цвет. Этот пост решил мою проблему: Установить CSS-класс 'selected' в меню ASP.NET родителей и их детей? Нужно поместить код в код позади.

Answer 6

Просто хочу что-то добавить, чтобы помочь людям, у которых все еще есть эта проблема. (по крайней мере для меня) css показывает, что он помещает классы по умолчанию уровня 1, уровня 2 и уровня 3 в каждую часть меню (уровень 1 - меню, уровень 2 - первый выпадающий список, уровень 3 - третье всплывающее окно). Установка отступов в css

.level2
{
padding: 2px 2px 2px 2px;
}

работает для добавления отступа к каждому li в первом раскрывающемся списке.

Answer 7

Я не знаю, почему все ответы здесь так запутаны. Я нашел довольно простой. Используйте класс css для меню asp: скажем, mainMenu, и все элементы меню под ним будут «тегами» при отображении в HTML. Так что вам просто нужно предоставить свойство: hover этим "тегам" в вашем CSS. Ниже приведен пример:

<asp:Menu ID="mnuMain" Orientation="Horizontal" runat="server" Font-Bold="True" Width="100%" CssClass="mainMenu">
  <Items>
    <asp:MenuItem Text="Home"></asp:MenuItem>
    <asp:MenuItem Text="About Us"></asp:MenuItem>
  </Items>
</asp:Menu>

А в CSS напишите:

.mainMenu { background:#900; }
.mainMenu a { color:#fff; }
.mainMenu a:hover { background:#c00; color:#ff9; }

Надеюсь, это поможет. :)

Answer 8

Необходимо обратить внимание на то, что HTML выкладывает элемент управления. В этом случае он создает таблицу для создания меню. Стиль наведения устанавливается на ТД, и после выбора пункта меню элемент управления отправляет назад и добавляет выбранный стиль в тег A ссылки в ТД.

Итак, у вас есть два разных предмета, которыми здесь манипулируют. Один - это элемент TD, а другой - элемент A. Итак, вы должны заставить свой CSS работать соответствующим образом. Если я добавлю приведенный ниже CSS на страницу с меню, то получу ожидаемое поведение изменения цвета фона в любом случае. Возможно, вы делаете какие-то другие манипуляции с CSS, которые могут или не могут применяться к этим элементам.

<style>
    .StaticHoverStyle
    {
        background: #000000;
    }

    .StaticSelectedStyle
    {
        background: blue;
    }
</style>

Answer 9

Вы можете попробовать стилизацию с помощью LevelSubMenuStyles

            <asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal" 
                StaticEnableDefaultPopOutImage="False">
                <StaticMenuStyle CssClass="test" />
                <LevelSubMenuStyles>
                    <asp:SubMenuStyle BackColor="#33CCFF" BorderColor="#FF9999" 
                        Font-Underline="False" />
                    <asp:SubMenuStyle BackColor="#FF99FF" Font-Underline="False" />
                </LevelSubMenuStyles>
                <StaticMenuItemStyle CssClass="main-nav-item" />
            </asp:Menu>

Answer 10

Лучшие результаты, которые я получил с этим сломанным элементом управления, касались вообще не использования css, а использования встроенных свойств элемента управления для стиля (DynamicMenuItemStyle-BackColor, StaticHoverStyle-Width и т. Д.). Это ужасная практика, которая раздувает ваш код и заставляет вас делать это для каждого экземпляра элемента управления.

Это, однако, работает.