На обычных веб-страницах контекстное меню браузера IE по умолчанию представляет собой неизменный фиксированный режим, и большинство пользователей сети не часто используют его при просмотре веб-страниц. Для профессиональных веб-дизайнеров было бы здорово и удобно, если бы контекстное меню можно было создавать с персонализированным контентом.
Только представьте, когда пользователь щелкнет правой кнопкой мыши на вашем веб-сайте, вы увидите тщательно организованные «ссылки» и «отправку сообщений», которые даже включают в себя красочную интерактивную Flash-анимацию! Как показано на рисунке 1 — не пускайте слюни, давайте утолим жажду и посмотрим, как это сделать :).
У меня есть два способа трансформировать контекстное меню (по сути, суть одна, оба — JavaScript-штуки).
Первый метод описан ранее: просто скопируйте следующий исходный код в HTML-файл на веб-странице.
<стиль>
< !--
.skin0 {
позиция: абсолютная;
выравнивание текста: по левому краю;
ширина: 200 пикселей;
граница: 2 пикселя, сплошной черный;
цвет фона:меню;
семейство шрифтов: Verdana;
высота строки: 20 пикселей;
курсор: по умолчанию;
видимость: скрыта;
}
.skin1 {
курсор: по умолчанию;
шрифт:текст меню;
позиция: абсолютная;
выравнивание текста: по левому краю;
семейство шрифтов: Arial, Helvetica, без засечек;
размер шрифта: 10pt;
ширина: 120 пикселей;
цвет фона:меню;
граница: 1 сплошная кнопка;
видимость: скрыта;
граница: 2 кнопка выделения начала;
}
.menuitems {
отступ слева: 15 пикселей;
отступ справа: 10 пикселей;
}
-->
</стиль>
< ЯЗЫК СКРИПТА = "JavaScript1.2">
< !-- Веб-сайт: http://www.painting-effects.co.uk -->
< !-- Этот сценарий и многие другие доступны бесплатно в Интернете по адресу -->
< !-- Исходный код JavaScript!! http://javascript.internet.com -->
< !-- Начало
вар менюскин = "скин1" // скин0 или скин1;
var display_url = 0 // Показать URL-адреса в строке состояния?
функция showmenuie5() {
вар правый край = document.body.clientWidth-event.clientX;
вар нижний край = document.body.clientHeight-event.clientY;
if (правый край < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX -
ie5menu.offsetWidth;
еще
ie5menu.style.left = document.body.scrollLeft + event.clientX;
если (нижний край < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY -
ie5menu.offsetHeight;
еще
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "видимый";
вернуть ложь;
}
функция скрытьменуи5() {
ie5menu.style.visibility = "скрытый";
}
функция Highlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "выделить";
event.srcElement.style.color = "белый";
если (display_url)
окно.статус = event.srcElement.url;
}
}
функция lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "черный";
окно.статус = "";
}
}
функция jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("цель"));
еще
window.location = event.srcElement.url;
}
}
// Конец -->
</скрипт>
< div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5();">
< div class="menuitems" url="javascript:history.back();">Назад</div>
< div class="menuitems" url=" http://javacool.3322.net ">Вернуться на домашнюю страницу</div>
<час>
< div class="menuitems" url=" http://www.163.com ">NetEase</div>
< div class="menuitems" url=" http://www.sohu.com ">Sohu</div>
<час>
< div class="menuitems" url=" http://www.sina.com.cn ">Сина</div>
< div class="menuitems" url=" http://www.yahoo.com.cn ">Yahoo</div>
</дел>
<script Language="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = скин меню;
document.oncontextmenu = showmenuie5;
document.body.onclick = скрытьменуие5;
}
</скрипт>
Эффект следующий:
Второй способ — использовать плагин для Dreamweaver — Right_Click_Menu_Buil-der, который можно скачать с http://www.macromedia.com . После установки команду «Построитель меню правой кнопкой мыши» можно найти в меню «Команда» в Dreamweaver.
Нажмите эту команду, и появится окно настройки, как показано на рисунке 3. В основном это две части: «Меню» и «Стили».
Меню предназначено для настройки функций. Здесь настраиваются гиперссылки и ссылки для отправки. Здесь можно настроить до 10 соединений. «Текст меню» в этом поле выбора — это текст, который будет отображаться при щелчке правой кнопкой мыши (измените его на китайский); введите соответствующий путь ссылки в «URL»; «Цель» определяет, является ли это новым окном или текущим; Для отображения используется окно. Содержимое ссылки будет отображаться в новом окне после заполнения поля «Пусто», что соответствует настройке «Цель» в Dreamweaver.
Стили отвечают за настройку внешнего вида меню. Есть два варианта:
img src= " "Меню типов Windows (по умолчанию)" — элемент по умолчанию — самый простой вид, знакомый стиль Windows;
«Пользовательское меню» Пользовательское меню, если вы выберете этот пункт, вам также необходимо установить следующее содержимое:
«Ширина меню», ширина меню;
«Шрифт», шрифт;
«Цвет шрифта», цвет шрифта;
«Сторона шрифта», размер шрифта;
«Цвет фона», «Фоновое изображение», цвет фона и фоновое изображение;
Также есть «Курсор», который используется для выбора стиля мыши.
После настройки вышеизложенного вы можете нажать «Добавить», чтобы сгенерировать эффект. Предварительный просмотр, это хорошо?
Тогда как добавить Flash? Вот как это сделать: Добавьте «Таблицу» на веб-страницу. Рекомендуется установить ширину «W» на «100%». Это облегчит позиционирование различных элементов, которые вы добавляете ниже. Хорошо, вставьте SWF-файл Flash в «Таблицу» и установите положение «по центру» (в основном для облегчения позиционирования, конечно, вы можете детально проанализировать конкретные проблемы и получить представление, попробовав больше).
Совет: Flash-анимацию можно также создать с помощью интерактивных ссылок. Почему? Таким образом, вы можете добавить столько гиперссылок, сколько захотите. Сам плагин имеет ограничение до 10 элементов, которое можно решить с помощью Flash ^_^!