Совет 1: Как сделать всплывающее меню

При помощи грамотного кода HTML и несложных правил CSS можно создать неплохое всплывающее меню, которое можно будет легко изменять и дополнять. При использовании средств языка разметки и каскадных таблиц стилей можно обеспечить корректную работу меню во всех браузерах.
Инструкция
1
Для начала постройте базовую структуру вашего меню. Откройте текстовый редактор и создайте нумерованный список с подменю, которое выступает как элемент родительского списка. Например:
  • Первый элемент
    • Выпадающий элемент
    • Выпадающий элемент2
2
Сохраните созданный список в отдельном html-файле. Далее создайте файл с расширением .css и введите все параметры таблицы стилей.
3
Удалите все отступы и маркеры, которые применяются в ненумерованном списке, и задайте ширину меню при помощи средств CSS:ul { list-style: none;
width: 200px; }
4
Задайте относительное положение всех элементов списка при помощи атрибута position:ul li { position: relative; }
5
Далее необходимо оформить подменю, каждый из элементов которого будет появляться справа от родительского меню в тот момент, когда на пункте будет находиться указатель мыши:li ul { position: absolute;
left: 199px;
top: 0;
display: none; }Атрибут left имеет значение на один пиксель меньшее, чем ширина самого меню. Это позволяет грамотно расположить всплывающие пункты без создания двойных границ. Атрибут display используется для того, чтобы скрыть подменю при открытии страницы.
6
Задайте нужные стили для ссылок при помощи соответствующих параметров css. Включите параметр display: block для того, чтобы каждая ссылка занимала все отведенное для нее место.
7
Чтобы меню появлялось в тот момент, когда курсор окажется над ним (hover), нужно ввести код:li:hover ul { display: block; }
8
Задайте по желанию дополнительные параметры отображения ссылок и элементов списка.
9
Всплывающее меню готово. Теперь осталось включить в файл .html атрибут :Всплывающее меню

Совет 2: Как сделать всплывающую страницу

При создании сайтов очень часто используются всплывающие окна в качестве меню, рекламных текстов и т.п. К тому же компактный вид позволяет экономить место на странице. Все, что нужно – это написать правильный код.
Инструкция
1
Создание всплывающих страниц может производиться на основе JavaScript. Тем не менее, есть более простой вариант – использование языка разметки гипертекста HTML и языка таблиц CSS. Удобство заключается в том, что созданные таким образом окна будут поддерживаться большинством браузеров вне зависимости от того, поддерживают ли они JavaScript.
2
Подобный код размещается в двух сроках, в первой строке содержится ссылка, которая отвечает за открытие окошка, вторая строка – по сути, и является всплывающим окном, атрибут onmouseover говорит о том, что будет отражаться стандартный при наведении на строку ссылки тип курсора, onclick указывает на то, что после щелчка скрытое окно станет видимым:

<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display='block'"><span style="text-decoration: underline;">Нажать здесь!</span></a>
3
Вам потребуется указать размеры окна, цвет и размер текста, фон и рамки. Все эти параметры вы можете указать в атрибуте style. Цветa указывается по кодовой таблицe rgb. В стандартном инструменте Paint в окне «Изменение цветов», в можете найти код нужного оттенка, где R – красный, G – зеленый, В – синий (голубой). Так черный цвет имеет код rgb(0,0,0), белый rgb(255,255,255), серый rgb(126,126,126).

<div id='PopUp' style='display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 135px;'> Сообщение или текст во всплывающем окне</div>

Селектор display с указанным значением none делает ваше окно невидимым.
4
Теперь вам нужно разместить две эти строчки между тегами вашей страницы <body> и </body>. После этого всплывающее окно готово к работе.
5
Однако при данном наборе вы получите постоянно открытое окно. Так что, если вам нужно, чтобы всплывающее окно можно было закрыть, добавьте ссылку, которая будет отвечать за это действие, перед тегом </div>:

<br /><div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " ><span style="text-decoration: underline;">закрыть</span></a></div>
6
Вероятно, вы захотите сделать окно, всплывающее не по щелчку, как описано выше, а при наведении курсора. Тогда первая строчка должна быть записана так:

<a onmouseover="document.getElementById('PopUp').style.display = 'block' " onmouseout="document.getElementById('PopUp').style.display = 'none' " onfocus='this.blur();'><span style="text-decoration: underline;">наведите мышку сюда!</span></a>
7
Таким образом, HTML-код всплывающего окна вы получили, и знакомы со структурой его составления. Все что осталось – оформить внешний вид и содержимое, что, естественно, будет зависеть от ваших умений, цели и фантазии. Но надо помнить, что это простейший вариант создания всплывающего окна. Если вы владеете достаточным навыком программирования в JavaScript (MooTools, jQuery, Prototype и пр.), вы можете создать более красивую и интересную страницу.
Видео по теме
Видео по теме
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500