Это очень простое меню. Несмотря на простоту, из этого примера мы можем получить некоторые необходимые знания о CSS и JavaScript, что очень полезно для понимания принципов и основ создания раскрывающихся меню. В этом примере я использовал тег DIV в качестве столбца раскрывающегося меню и TABLE в качестве заголовка меню. Принцип заключается в переключении атрибутов отображения столбца раскрывающегося меню путем определения движений мыши.
Ниже приводится эффект этого меню DIV. Вы можете щелкнуть любое пустое место на странице, чтобы отменить отображение раскрывающегося меню.
Сайт журнальных технологий, сайт-портал, сайт личной коллекции
Йески.com
Информация о дилере компьютеров
модная электроника
Сина
Соху Соху
Netease Netease
Станция сетевого программирования мыши
Рекорд китайского одноклассника
Что ж,
China Software Development Network
, если бы я сказал вам, что для такого эффекта потребуется всего несколько десятков строк кода, вы бы поверили?В любом случае, давайте шаг за шагом научимся создавать это меню. Шаг за шагом, поехали.
Первым шагом является определение таблиц каскадных стилей CSS для пунктов и столбцов меню. Если вы не знаете, что такое CSS, обратитесь к руководству по CSS на «Веб-сайте компьютерных новостей». Мы определяем два класса CSS: один — Meun, а другой — SubMenu. Меню определяет стиль, отображаемый в верхней части меню, а Submenu определяет стиль отображения столбца раскрывающегося меню. Здесь необходимо отметить атрибут CSS «position:absolute;width:200» в подменю. Это необходимо, поскольку он определяет позицию, в которой мы отображаем подменю. Другие свойства CSS не являются обязательными. Ниже приводится описание этих двух классов CSS. Вы можете поместить следующий абзац между
<СТИЛЬ>
На втором этапе давайте посмотрим на код Javascript для скрытия и отображения столбцов раскрывающегося меню. Этот код очень прост и его будет легко понять любому, кто немного изучил JavaScript. Если вы не понимаете Javascript, пожалуйста, обратитесь к статьям о JavaScript на «Веб-сайте компьютерных новостей». Смысл этого кода в том, что всякий раз, когда мышь входит в элемент меню (Menu), его столбец раскрывающегося меню будет отображаться функцией Show. Основная функция этой функции «Показать» — отобразить текущий столбец раскрывающегося меню, скрыть другие столбцы меню и поместить отображаемый в данный момент пункт меню в переменную cm. Кроме того, здесь я также добавил простой обработчик события щелчка мыши (onclick). Когда мышь щелкает по веб-странице, все столбцы раскрывающегося меню будут скрыты. Ниже я привожу всю программу на Javascript, которая включает функцию getPos, которая используется для получения позиции отображения столбца раскрывающегося меню.
<СКРИПТ>
варкм = ноль;
document.onclick = новая функция("показать(null)")
функция getPos(el,sProp)
{вар iPos = 0
пока (эл!=ноль)
{iPos+=el["смещение" + sProp]
эль = el.offsetParent}
вернуть iPos}
функция show(el,m)
{if (m) {m.style.display=' ';
m.style.pixelLeft = getPos(el,"Left")
m.style.pixelTop = getPos(el,"Top") + el.offsetHeight}
if ((m!=cm) && (cm)) cm.style.display='none' cm=m }