Навигация
Главная
Поиск
Форум
FAQ's
Ссылки
Карта сайта
Чат программистов

Статьи
-Delphi
-C/C++
-Turbo Pascal
-Assembler
-Java/JS
-PHP
-Perl
-DHTML
-Prolog
-GPSS
-Сайтостроительство
-CMS: PHP Fusion
-Инвестирование

Файлы
-Для программистов
-Компонеты для Delphi
-Исходники на Delphi
-Исходники на C/C++
-Книги по Delphi
-Книги по С/С++
-Книги по JAVA/JS
-Книги по Basic/VB/.NET
-Книги по PHP/MySQL
-Книги по Assembler
-PHP Fusion MOD'ы
-by Kest
Professional Download System
Реклама
Услуги

Автоматическое добавление статей на сайты на Wordpress, Joomla, DLE
Заказать продвижение сайта
Программа для рисования блок-схем
Инженерный калькулятор онлайн
Таблица сложения онлайн
Популярные статьи
OpenGL и Delphi... 65535
Форум на вашем ... 65535
HACK F.A.Q 65535
Бип из системно... 65535
Гостевая книга ... 65535
Invision Power ... 65535
Содержание сайт... 65535
Организация зап... 65535
Вызов хранимых ... 65535
Программируемая... 65535
Эмулятор микроп... 65535
Подключение Mic... 65535
Создание потоко... 65535
Приложение «Про... 65535
Оператор выбора... 65535
Создание отчето... 64161
Модуль Forms 63868
Пример работы с... 60752
ТЕХНОЛОГИИ ДОСТ... 60751
Имитационное мо... 56272
Реклама
Сейчас на сайте
Гостей: 11
На сайте нет зарегистрированных пользователей

Пользователей: 13,080
новичок: setan
Новости
Реклама
Выполняем курсовые и лабораторные по разным языкам программирования
Подробнее - курсовые и лабораторные на заказ
Delphi, Turbo Pascal, Assembler, C, C++, C#, Visual Basic, Java, GPSS, Prolog, 3D MAX, Компас 3D
Заказать программу для Windows Mobile, Symbian

Моделирование процесса поступления заявок в систему, состоящую из трёх Э...
Создание последовательности окон и передвижение окон по экрану на Turbo ...
Моделирование ЭВМ на GPSS (три класса заданий) + Пояснительная записка

Реклама



Подписывайся на YouTube канал о программировании, что бы не пропустить новые видео!

ПОДПИСЫВАЙСЯ на канал о программировании
Создание вертикального pop-up меню
Создадим в таблице стилей 2 класса:
top — пункт меню: позиционирование — статическое, выравнивание текста — по левому краю, высота и ширина — 20 и 61 пиксель соответственно
sub — подпункт: позиционирование — абсолютное, выравнивание текста — по центру, скрытый, рамка — 1 пиксель, прямая линия, цвет текста — чётный, фон — синий.

Для того, чтобы создать эффект моментального раскрытия меню, его необходимо полностью воспроизвести в коде HTML-страницы, скрыв все подпункты и отображая их только в момент щелчка мыши. Для решения этой задачи создадим функцию cl(), убирающую все подпункты с помощью цикла:

Код

function cl()
{
for(var i=1; i<=5; i++)//5 – число подпунктов
{
eval('sub'+i+'.style.visibility="hidden"')
}
}
Теперь создадим функцию show, открывающую подпункты:


Код

function show(num)
{
cl();
eval('sub'+num+'.style.visibility="visible"');
}
Функция принимает в качестве единственного параметра num, номер пункта меню, для которого необходимо отобразить подпункты. Функция show сначала закрывает все подпункты меню используя описанную ранее функцию cl(), а затем открывает нужный подпункт.
Теперь пишем “скелет” нашего меню:


Примечание

Меню будет сделано на основе слоёв (<div>...</div>)
1) Создаём слои, содержащие пункты меню:


Код

<div id="top" class="top">
<a href="page1.php" class="menu">Пункт 1</a>
</div>

<div id="top" class="top">
<a href="page5.php" class="menu">Пункт 5</a>
</div>
2) Также создаём подпункты меню, и вставляем их между слоями с пунктами:


Код

<div id="sub1" class="sub" style="left:70px; top:10px; ">
<a class="submn" href="subpage1.php" title="Подпункт 1">Подпункт 1</a><br />
<a class="submn" href="subpage2.php" title="Подпункт 2">Подпункт 2</a><br />
<a class="submn" href="subpage3.php" title="Подпункт 3">Подпункт 3</a><br />
</div>

Для оформления меню создадим два класса: первый для пункта меню, второй — для подпункта. Первый класс будет обладать синим фоном, цвет шрифта – белый, без подчёркивания, рамка шириной 2 пикселя, внизу и справа цвет тёмно синий, а вверху и слева – голубой, это создаёт эффект объемности. При наведении на ссылку (этому моменту соответствует hover) поменяем наоборот эти цвета.

Второй класс будет иметь синий задний фон, при наведении голубой. Дизайн готов, вы можете поменять цвета как захотите.

Приступим к последней части работы, настройке и внедрению функций JavaScript, созданных ранее. Пункты меню получились высотой 20 пикселей, следовательно, и слои с подпунктами будут размещены на 20 пикселей один ниже другого. За это отвечает параметр top. Подбираем значение top для первого подпункта (у меня оно получилось равное 10) и для каждого последующего прибавляем по 20 пикселей. Думаю, значение отступа слева вы подберёте сами. Настройка закончена.

Теперь приступим к "оживлению" нашего меню. Это можно сделать следующим образом:
При наведении на пункт меню, закрываются все подпункты, и открывается нужный.
Когда курсор уходит с подпункта, подпункт исчезает

Моменту, когда курсор находится над объектом, соответствует команда onMouseOver, а когда уходит – onMouseOut. Функции для закрытия и открытия меню у нас есть, приступим к созданию!

В слоях, где находятся пункты, в теге <div> поместим строку onMouseOver="show('тут номер подпункта')". В тег <div> слоя с подпунктами поместим onMouseOut="cl();". Ссылки считаются другими объектами, поэтому при наведении курсора на ссылку подпункт закроется. К счастью эта задача легко решается добавлением в тег <a> строки onMouseOver="show('тут номер подпункта')".

Меню готово! Ниже приведён исходный код:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Pop-up menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
<!--
.top {position: static; text-align:left; width: 61px; height:20px}
.sub {position:absolute; text-align:center; visibility: hidden; border-width:1px; border-style: solid; color:#000000; background-color:#FF9900}
a.submn {background-color: #0099FF; color: #000000; text-decoration: none; font-family: Verdana, Arial, Helvetica;
font-weight: bold; font-size: 12px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px;
margin: 0px;}
a:hover.submn {background-color: #00CCFF; color: #000000; text-decoration: none; font-family: Verdana, Arial, Helvetica;
font-weight: bold; font-size: 12px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px;
margin: 0px;}
a:active.submn {background-color: #0000FF; color: #FFFFFF; text-decoration: none; font-family: Verdana, Arial, Helvetica;
font-weight: bold; font-size: 12px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px;
margin: 0px;}
a.menu {background-color: #0099FF; color: #FFFFFF; text-decoration: none; font-family: Verdana, Arial, Helvetica;
font-weight: bold; font-size: 12px; padding-top: 1px; padding-right: 1px; padding-left: 1px; padding-bottom: 1px;
margin: 1px; border-width: 2px; border-style: solid; border-top-color: #00CCFF; border-right-color: #0066FF;
border-bottom-color: #0066FF; border-left-color: #00CCFF;}
a:hover.menu {background-color: #0099FF; color: #FFFFFF; text-decoration: none; font-family: Verdana, Arial, Helvetica;
font-weight: bold; font-size: 12px; padding-top: 1px; padding-right: 1px; padding-left: 1px; padding-bottom: 1px;
margin: 1px; border-width: 2px; border-style: solid; border-top-color: #0066FF; border-right-color: #00CCFF;
border-bottom-color: #00CCFF; border-left-color: #0066FF;}
a:active.menu {background-color: #0000FF; color: #000000; text-decoration: none; font-family: Verdana, Arial, Helvetica;
font-weight: bold; font-size: 11px; padding-top: 1px; padding-right: 1px; padding-left: 1px; padding-bottom: 1px;
margin: 1px; border-width: 3px; border-style: solid; border-top-color: #0066FF; border-right-color: #00CCFF;
border-bottom-color: #00CCFF; border-left-color: #0066FF;}
td {width: 56px; background-color:#FF9900;}
-->
</style>
<SCRIPT language="javascript">
<!--//
function cl()
{ for(var i=1; i<=5; i++)
{eval('sub'+i+'.style.visibility="hidden"')}
}
function show(num)
{cl();
eval('sub'+num+'.style.visibility="visible"');
}
//-->
</SCRIPT>
<noscript>
Ваш браузер не поддерживает JavaScript
</noscript>
</head>
<body>
<div id="top" class="top" onMouseOver="show('1')" >
<a href="page1.php" class="menu">Пункт 1</a>
</div>
<div id="sub1" class="sub" style="left:70px; top:10px; " onMouseOut="cl();">
<a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('1')">Подпункт 1</a><br />
<a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('1')">Подпункт 2</a><br />
<a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('1')">Подпункт 3</a><br />
</div>
<div id="top" class="top" onMouseOver="show('2')">
<a href="page2.php" class="menu">Пункт 2</a>
</div>
<div id="sub2" class="sub" style="left:70px; top:30px; " onMouseOut="cl();">
<a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('2')">Подпункт 1</a><br />
<a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('2')">Подпункт 2</a><br />
<a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('2')">Подпункт 3</a><br />
</div>
<div id="top" class="top" onMouseOver="show('3')">
<a href="page3.php" class="menu">Пункт 3</a>
</div>
<div id="sub3" class="sub" style="left:70px; top:50px; " onMouseOut="cl();">
<a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('3')">Подпункт 1</a><br />
<a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('3')">Подпункт 2</a><br />
<a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('3')">Подпункт 3</a><br />
</div>
<div id="top" class="top" onMouseOver="show('4')">
<a href="page4.php" class="menu">Пункт 4</a>
</div>
<div id="sub4" class="sub" style="left:70px; top:70px; " onMouseOut="cl();">
<a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('4')">Подпункт 1</a><br />
<a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('4')">Подпункт 2</a><br />
<a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('4')">Подпункт 3</a><br />
</div>
<div id="top" class="top" onMouseOver="show('5')">
<a href="page5.php" class="menu">Пункт 5</a>
</div>
<div id="sub5" class="sub" style="left:70px; top:90px; " onMouseOut="cl();">
<a class="submn" href="subpage1.php" title="Подпункт 1" onMouseOver="show('5')">Подпункт 1</a><br />
<a class="submn" href="subpage2.php" title="Подпункт 2" onMouseOver="show('5')">Подпункт 2</a><br />
<a class="submn" href="subpage3.php" title="Подпункт 3" onMouseOver="show('5')">Подпункт 3</a><br />
</div>
</body>
</html>


Автор: Яровой Р.П.
Источник: SoftTime.ru
Опубликовал Kest October 27 2008 12:46:44 · 0 Комментариев · 6359 Прочтений · Для печати

• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •


Комментарии
Нет комментариев.
Добавить комментарий
Имя:



smiley smiley smiley smiley smiley smiley smiley smiley smiley
Запретить смайлики в комментариях

Введите проверочный код:* =
Рейтинги
Рейтинг доступен только для пользователей.

Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.

Нет данных для оценки.
Гость
Имя

Пароль



Вы не зарегистрированны?
Нажмите здесь для регистрации.

Забыли пароль?
Запросите новый здесь.
Поделиться ссылкой
Фолловь меня в Твиттере! • Смотрите канал о путешествияхКак приготовить мидии в тайланде?
Загрузки
Новые загрузки
iChat v.7.0 Final...
iComm v.6.1 - выв...
Visual Studio 200...
CodeGear RAD Stud...
Шаблон для новост...

Случайные загрузки
DateEdit
Игра змейка
Введение в станда...
DragMe [Исходник ...
MiniChat
C# Учебный курс
Система баннеро-о...
База предприятий ...
PHP5. Профессиона...
Обучение Borland ...
Советы от Даниилы...
Delphi 2005 для .NET
FilesInfo
Delphi Быстрый Ст...
XPcontrol
PDPcheck
Учебник для продв...
Платформа програм...
Основы Delphi. Пр...
C++ Стандартная б...

Топ загрузок
Приложение Клие... 100455
Delphi 7 Enterp... 86133
Converter AMR<-... 20071
GPSS World Stud... 12522
Borland C++Buil... 11608
Borland Delphi ... 8522
Turbo Pascal fo... 7035
Visual Studio 2... 4992
Калькулятор [Ис... 4744
FreeSMS v1.3.1 3539
Случайные статьи
МОДЕЛИРОВАНИЕ МНОГ...
Создание имитацион...
Data segment too l...
Создаем многопоточ...
Международный алго...
Модели контроллера
Apache + Perl + PH...
Какие операции нео...
Драйверы устройств
Оригинальная реали...
tld. Самымпростым ...
Усовершенствование...
Деструктор
Кроме затрат, связ...
Где toyota mega cr...
Управление связанн...
Представление о пр...
Комбинирование CSS...
Удаленные клиенты ...
Использование Visu...
Бинарный поиск в у...
Алфавит языка Obje...
Вывести все ссылки...
Five Balls на Stra...
Отличный инструмен...
Статистика



Друзья сайта
Программы, игры


Полезно
В какую объединенную сеть входит классовая сеть? Суммирование маршрутов Занимают ли таблицы память маршрутизатора?