ASP.NET Создать стиль навигационного меню, как windows.com

Question

Только что заметил, что стиль меню навигации на windows.com - это как раз то, что мне нужно для моего сайта. Мне интересно, как создать такой выпадающий список, который имеет несколько столбцов. Когда указатель мыши находится над каждым элементом, столбец дает предварительный просмотр этого элемента. Спасибо.

Answer 1

Меню на самом деле представляет собой DIV, который отображается поверх другого содержимого, когда вы наводите курсор мыши на элемент меню. При наведении указателя мыши на элементы в меню он вызывает JavaScript, чтобы изменить изображение, отображаемое справа. Просмотрите исходный код в своем веб-браузере и найдите меню продукта. Если у вас есть Firefox с Firebug или плагин для веб-разработчиков, вы сможете увидеть javascript, который обрабатывает изменение изображения.

Answer 2

Меню microsoft.com также не работает в Chrome или Safari, но я сомневаюсь, что Microsoft заботится.

Answer 3

Система меню Microsoft не похожа на систему меню, достойную подражания для меня ... посмотрите, как она рендерится (или на самом деле, как она не рендерится) в FireFox.

Answer 4

Вау. Когда они это сделали?

Microsoft использует для этого встроенную библиотеку AJAX. Не уверен, что это библиотека ASP.Net AJAX или что-то собственное, что они встроили в цель.

Тванфоссон довольно хорошо суммировал его. В верхнем меню находится тег <ul>, каждый дочерний элемент <li> содержит вложенный тег <span>. Этот тег будет использоваться для идентификации элемента меню верхнего уровня, над которым наведена ваша мышь.

Выполните поиск по исходному коду, и вы найдете:

<!-- BEGIN: Products Menu -->

Это лучший пример эффекта, который вам нужен. Как было сказано ранее, это элемент, который содержит другой неупорядоченный список. Каждый элемент списка содержит ссылку, чье событие при наведении курсора изменяет изображение и текст, которые отображаются в отдельности. Вы можете увидеть эту область, если вы ищете

<div id="PageWrapper" class="HomePage">

Вот некоторые хорошие ресурсы для начала:

• Образцы ASP.Net AJAX
• Библиотека jQuery
• Многоуровневое меню CSS