Выпадающее меню — один из наиболее распространенных эффектов в Интернете. Просто щелкните или наведите указатель мыши, и появится более подробное меню. Оно не только экономит место на макете веб-страницы, но и делает макет веб-страницы кратким и понятным. упорядоченный, но в то же время новый. Красивое раскрывающееся меню добавляет красок на вашу веб-страницу.
Существует множество способов создания раскрывающихся меню. В этой статье вы познакомитесь с четырьмя часто используемыми методами, которые позволят вам создать собственное раскрывающееся меню по своему усмотрению.
■ Используйте Dreamweaver для создания раскрывающихся меню.
Dreamweaver — наиболее часто используемый инструмент для создания раскрывающихся меню. Он имеет простой метод и свободное управление. Он позволяет максимально создавать стили меню. Это обязательный курс для создания раскрывающихся меню.
Принцип использования Dreamweaver для создания раскрывающегося меню очень прост. Он использует встроенный метод «Показать-Скрыть слои» на панели «Поведение» и использует onMouseOver (мышь перемещается) и onMouseOut (мышь удаляется). вызвать скрытие и отображение слоя, и появившееся меню находится в слое.
??Поэтому мы можем создать раскрывающееся меню за четыре шага. Сначала нам нужна панель навигации, которая используется для размещения главного меню, которое сначала появляется перед зрителем, затем мы создаем раскрывающееся меню; появится после скрытия; а затем самый важный шаг — добавить эффект скрытия и отображения слоев в главное меню и раскрывающееся меню, наконец, мы украшаем меню; Конечный эффект, который вы видите, показан на рисунке. Вы также можете посетить следующий адрес: menu.htm.
??Я думаю, вы больше не можете ждать, поэтому давайте начнем прямо сейчас!
1. Изготовление навигационной панели
Сначала выполните необходимую предварительную работу. Нажмите CTRL+J, чтобы открыть окно «Свойства страницы». Настройки параметров показаны на рисунке 2. Этот параметр повлияет на положение меню, поэтому установите его, как показано на рисунке. картина.
Нажмите CTRL+F2, чтобы открыть панель «Объекты», и нажмите кнопку слоя.
Наконец, удерживая нажатой кнопку мыши, перетащите слой на страницу, а затем установите параметры на панели «Свойства» слоя. Заполните поле «Идентификатор слоя» заголовком и заполните поля L, T, W и H. с 8, 15 и 15 соответственно. 480, 15, залейте цвет фона #006699, как показано на рисунке.
Переместите курсор внутрь слоя и нажмите кнопку таблицы на панели «Объекты».
, вставьте таблицу с одной строкой и четырьмя столбцами и настройте ее, как показано на рисунке.
Удерживая клавишу CTRL, щелкните четыре ячейки таблицы, затем установите их ширину на 120 и введите в первые две ячейки текст, который является названием вашего главного меню. Вы можете ввести любое имя, которое я использовал. «Классический форум» и «Tianji.com» в качестве примеров и добавлены ссылки.
2. Создание выпадающего меню.
Теперь начните создавать раскрывающееся меню, также используя слои.
Снова вставьте слой из панели «Объекты» под панелью навигации, которую мы создали ранее. Заполните параметры следующим образом: заполните поле «Идентификатор слоя» меню 1, заполните поля L, T, W и H значениями 8, 34, 120. и 80 соответственно. Залейте цвет фона #999966. Два параметра L и T предназначены для установки расстояния между этим слоем и левой и верхней границей окна. Их нельзя заполнять неправильно, иначе меню будет отображаться. быть неуместным, и это повлияет на удобство использования после завершения.
На данный момент мы можем ввести желаемое содержимое меню в слой меню1. Для удобства верстки я здесь по-прежнему использую таблицы для составления меню. Этот слой появится в виде раскрывающегося меню «Классический форум», заполните нужные ссылки меню. Таким же образом создайте выпадающее меню (слой меню2) для «Tianji.com».
На этом этапе следует отметить, что положение слоя (меню1, меню2), на котором расположено раскрывающееся меню, очень важно (определяется двумя параметрами L и T). Их верхний край должен быть близок к нижнему краю панели навигации, чтобы обеспечить возможность нормального использования меню после завершения третьего шага. Потому что, если вы держитесь подальше от панели навигации, меню исчезнет, как только мышь покинет панель навигации.
Нажмите F2, чтобы открыть панель СЛОЙ, на которой перечислены три слоя веб-страницы. Щелкните пространство перед меню 1 и меню 2, и появится значок закрытого глаза, и эти два слоя будут скрыты. Этот шаг выполнен потому, что исходное состояние раскрывающегося меню невидимо.
3. Добавление эффектов отображения и скрытия
Этот шаг — решающий шаг в превращении распада в волшебство. Пожалуйста, внимательно следуйте за мной.
Этот шаг разделен на две части: во-первых, добавьте команду для управления отображением и скрытием главного меню на панели навигации; во-вторых, добавьте команду для управления отображением и скрытием самого выпадающего меню.
1. В разделе панели навигации сначала нажмите и удерживайте клавишу CTRL, затем щелкните первую ячейку на панели навигации. Теперь нажмите Shift + F3, чтобы открыть окно «Поведение», и щелкните.
и выберите «Показать-Скрыть слои» в раскрывающемся списке (как показано на рисунке). Если такого пункта в настройках нет, выберите IE 5.0 в разделе «Показать события для», нажмите кнопку еще раз, и появится «Показать-Скрыть слои».
Появится окно, как показано ниже. В поле «Именованные слои» будут перечислены все слои текущей веб-страницы. Выберите «слой «меню1», потому что мы хотим, чтобы слой меню1 реагировал на «Классический форум». Затем нажмите кнопку «Показать» ниже и ОК.
В это время вы вернетесь в окно «Поведение», и в окне появятся слова, показанные ниже. Щелкните текст «onClick» в разделе «События», появится небольшая стрелка вниз и выберите onMouseOver в раскрывающемся списке. вариант вниз. Цель этого шага — изменить статус раскрывающегося меню «Меню1» на «Показывать, когда мышь перемещается в первую ячейку».
Следующий шаг — сделать раскрывающееся меню Menu2 скрытым при перемещении мыши ко второй ячейке.
Заказать еще раз кнопку, выберите «Показать-Скрыть слои» в раскрывающемся списке и выберите «слой «меню1»» во всплывающем окне, потому что мы хотим, чтобы слой меню1 реагировал на «Классический форум». Затем нажмите кнопку «Скрыть» ниже и ОК.
Вернитесь в окно «Поведение», щелкните маленькую стрелку вниз и выберите onMouseOut в раскрывающемся списке.
2. В раскрывающемся меню сначала выберите слой меню1, щелкнув край слоя или щелкнув меню1 на панели СЛОЙ. Используйте тот же метод, что и часть панели навигации, чтобы добавить команды для отображения и скрытия в окне «Поведение». . В результате, когда мышь выходит за пределы слоя меню 1, слой меню 1 автоматически скрывается. Статус последнего слоя меню 1 показан на рисунке.
3． Повторите две вышеуказанные части и добавьте команды «Показать» и «Скрыть слой» для второго главного меню «Tianji.com» и меню слоя 2 панели навигации.
4. Украшение и модификация выпадающих меню.
На данный момент функциональный эффект выпадающего меню реализован, и вы можете увидеть его теперь, нажав F12. Однако вы также должны обнаружить, что меню немного некрасивое, шрифты недостаточно хороши, цвет ссылок по умолчанию для пунктов меню некрасивый, а меню не имеет границ, поэтому давайте придадим ему немного красоты. .
1. Определите стиль шрифта меню. Нажмите Shift+F11, чтобы открыть панель «Стиль CSS», и щелкните под панелью.
кнопка
Выберите тег td в поле «Тег» всплывающего окна «Новый стиль», выберите второй пункт «Переопределить HTML-тег для типа» и выберите «Только этот документ» для параметра «Определить», как показано на рисунке.
В это время появится окно настройки. Независимо от других параметров, просто выберите 12 в поле «Размер» справа, а единица измерения — пиксели.
2. Определите стиль ссылки меню. На панели стилей нажмите кнопку под панелью. Во всплывающем окне выберите третий элемент «Использовать селектор CSS для типа», выберите тег a:hover в поле «Тег» и выберите «Этот документ». Только для Define, как показано на рисунке.
После нажатия кнопки «ОК» во всплывающем окне введите #ff9933 для параметра «Цвет», выберите «Нет» для параметра «Украшение» и нажмите «ОК».
Вернитесь на панель стилей и щелкните под панелью. Во всплывающем окне выберите третий элемент «Использовать селектор CSS для типа», выберите тег a:link в поле «Тег» и выберите «Только этот документ» для параметра «Определить».
После нажатия кнопки «ОК» во всплывающем окне введите #ffffff для параметра «Цвет», выберите «Нет» для параметра «Украшение» и нажмите «ОК».
Вернитесь на панель стилей и щелкните под панелью. Во всплывающем окне выберите третий элемент «Использовать селектор CSS для типа», выберите тег a:visited в поле «Тег» и выберите «Только этот документ» для параметра «Определить».
После нажатия кнопки «ОК» во всплывающем окне введите #ffffff для параметра «Цвет», выберите «Нет» для параметра «Украшение» и нажмите «ОК».
3． Определите стиль границы меню на панели стилей, нажмите кнопку под панелью, во всплывающем окне выберите тег td в поле «Тег», выберите второй элемент «Переопределить HTML-тег» для параметра «Тип» и выберите «Только этот документ» для параметра «Определить». , как показано на рисунке.
Появится окно настроек, выберите «Граница» в списке слева, введите ширину четырех сторон справа как 1, установите черный цвет #000000 и выберите «Сплошной» в качестве стиля.
На этом этапе нам это удалось. Используйте его на своей веб-странице прямо сейчас.