1. Обзор
Использование всплывающего плавающего меню может не только прояснить навигационный контент веб-сайта, но и не влияет на общий эффект страницы. Запустите этот пример, как показано на рисунке 1, когда мышь перемещается в заголовок меню навигации первого уровня, плавающее меню появится, чтобы отобразить подменю, соответствующую меню. Когда мышь уйдет, плавающее меню будет скрыто.
2. Технические моменты
Этот пример находится в основном в JavaScript, динамически изменяя значение атрибута отображения атрибута стиля объекта тега <div> для динамического отображения и скрытия меню вторичной навигации. Фактически, содержание вторичного меню под каждым меню на уровне одного уровня было добавлено в тег <viv> веб -страницы, но в настоящее время задается <div> и не будет отображаться. Следовательно, в JavaScript, когда мышь проходит через заголовок навигации, ей нужно только вызвать указанный объект <div> и динамически изменить свой атрибут отображения. Атрибут Display содержит два значения атрибута для отображения и скрытого, а именно: нет (скрытый) и блок (Display).
Например: на веб -странице есть тег <viv> с удостоверением личности MyDiv, и этот <div> настроен на то, чтобы скрыть. В JavaScript метод написания для управления отображением этого <div> заключается в следующем:
document.getElementbyId ("myDiv"). style.display = "block";3. Конкретная реализация
(1) Напишите методы JavaScript для отображения и скрыть. Вторичное меню будет отображаться, когда мышь пройдет через заголовок первичного меню, а вторичное меню будет скрыто, когда мышь уйдет. Ключевой код заключается в следующем:
изменение функции (img, подменю, path, type) {img.src = "Images/"+path+". gif"; if (sumenu! = null) {if (type == 0) {sumenu.style.display = "none";} else {submenu.style.display = "block";(2) На странице добавьте содержание вторичного меню в каждое первичное меню навигации в теге <Div> и установите тег <Div> вторичного меню, чтобы скрыть. Ключевой код заключается в следующем:
<div id = "nuser" style = "фоновый цвет:#f3ffd5; граница:#75a102 1px solid; ширина: 200px; положение: абсолютно; дисплей: нет; слева: 1px; top: 34px;"> <таблица CellPacing = "0" CellPadding = "0"> <TR> <td align = "> <a href ="###"##"##" Информация </a> <a href = "#"> добавить новых сотрудников </a> </td> </tr> </table> </div> ... // Содержание других вторичных меню здесь опущено
(3) Установите события Onmouseover и Onmouseout в <Td> таблицы первичного меню, вызовите метод javaScript medice (), определяемый на шаге (1), и динамически измените дисплей и сокрытие вторичного меню <div>. Ключевой код заключается в следующем:
<td onMouseOver="change(ImgUser,NUser,'NUser_r',1)" onMouseOut="change(ImgUser,NUser,'NUser_b',0)" style="cursor:hand;"><img id="ImgUser" src="images/NUser_b.GIF">...//The <div>code of the secondary menu is опущен </td>
Выше приведено всплывающее плавающее меню навигационной панели, введенное вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!