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

Ответ 1

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

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

Ответ 2

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

Добавьте свойство 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;
}

Для "Selected" Styling добавьте:

.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 = "Красный":

#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, и он сработал.

Ответ 3

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

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

Например, по умолчанию элемент управления Menu отображает элемент "li" и дочерний элемент "a" для каждого элемента меню, а выбранный элемент меню "a" будет содержать class= "выбранный" (среди других управляемых генерируемых имен классов 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;
} 

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

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

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

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

Ответ 8

Я не знаю, почему все ответы здесь настолько запутанны. Я нашел довольно простой. Используйте класс css для asp: menu, скажем, 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; }

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

Ответ 9

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

Это работает.

Ответ 10

Вы можете попробовать стиль с помощью 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>

Ответ 11

Есть хорошие инструменты сторонних разработчиков, но я обычно использую суперфиш http://www.conceptdevelopment.net/Fun/Superfish/ это круто, бесплатно и легко;)