Добавляем...


Меню, имитирующие меню приложений
Первое издание этой книги содержало длинные пояснения по поводу того, как с помощью JavaScript создается меню, имитирующее поведение меню операционной системы. И хотя соответствующий пример был вполне конструктивный, он был достаточно сложным и, честно говоря, не вполне подходящим для использования в "реальном мире". В этом издании мы предлагаем пример простой системы меню, вполне подходящий для использования в качестве практического руководства. Одна из проблем меню, создаваемых на базе JavaScript, связана с установкой и правильным применением параметров CSS.

Например, можно создать меню, полагаясь на использование дескриптора <div>, в рамках которого предлагаются различные варианты выбора:


<div id="menu3" class="menu">
<div class="menuHead">Узлы, имеющие отношение к книге </div>
<div id="menu3choices" class="menuChoices">
<a href="http://www.javascript.com">JavaScriptRef</a><br />
<a href="http://www.w3c.org">W3C</axbr />
<a href="http://www.pint.com">PINT</a><br />
</div>
</div>

В этом случае объект "menuHead", который является триггером для меню, отделяется от совокупности вариантов выбора, но указанные элементы связываются вместе путем заключения их в рамки другого дескриптора <div>, обеспечивающего применение стилей и использование меню в сценарии. Теперь можно связать сценарий с событием mouseover, чтобы получить возможность скрывать и показывать меню:

<div id="menu3" class="menu" onmouseover="show('menu3');" onmouseout="hide('menu3');">

Процедуры отображения меню на экране используют свойство visibility CSS. Обратите внимание на то, что определяемая здесь переменная DOMCapable обеспечивает возможность игнорировать те параметры меню, которые браузер обработать не может.


(document.getElementByld ? DOMCapable = true : DOMCapable = false);
function hide(menuName)
{
if (DOMCapable)
{
var theMenu = document.getElementByld(menuName+"choices"); theMenu.style.visibility = 'hidden';
}
}

function show(menuName)
{
if (DOMCapable)
{
var theMenu = document.getElementByld(menuName+"choices") ;
theMenu.style.visibility = 'visible';
, }
}

Ниже приводится полный текст примера.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Раскрывающиеся меню, использующие CSS</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />


<style type="text/css">
<! —
/* установка стиля меню */
.menuHead { font-weight: bold; font-size: larger; background-color: #A9A9A9;}
.menuChoices { background-color: tDCDCDC; width: 200px;}
.menu a {color: #000000; text-decoration: none;}
.menu a:hover {text-decoration: underline;} /* position your menus */
#menul {position: absolute; top: 10px; left: 10px; width: 200px;}
#menu2 {position: absolute; top: 10px; left: 210px; width: 200px;}
#menu3 {position: absolute; top: 10px; left: 410px; width: 200px;}
—>
</style>
<script type="text/javascript">
<! —
/* право упрощения дается только браузерам с поддержкой DOM*/
(document.getElementByld ? DOMCapable = true : DOMCapable = false);
function hide(menuName)
{
if (DOMCapable)
{
var theMenu = document.getElementById(menuName+"choices");
theMenu.style.visibility = 'hidden;
}
}
function show(menuName)
{
if (DOMCapable)
{
var theMenu = document.getElementByld(menuName+"choices");
theMenu.style.visibility = 'visible';
}
}
II—>
</script>
</head>
<body>
<div id="menul" class="menu" onmouseover="show('menul'); "
onmouseout="hide('menul') ; ">
<div class="menuHead">noncKOBHrai</div>
<div id="menulchoices" class="menuChoices">
<a href="http://www.google.com">Google</axbr />
<a href="http://www.yahoo.com">Yahoo</a><;br />
<a href="http://www.teoma.com">Teoma</a><br />
<a href="http://www.msn.com">MSN</a><br />
<a href="http://www.dmoz.org">DMOZ</axbr />
</div>
</div>

<div id="menu2" class="menu" onmouseover="show('menu2');"


onmouseout="hide('menu2') ; ">
<div class="menuHead">Internet-Mara3MHbi</div>
<div id="menu2choices" class="menuChoices">
<a href="http://www.google.com">Amazon</aXbr />
<a href="http://www.ebay.cora">Ebay</axbr />
<a href="http://www.buy.com">Buy.com</a><br />
</div>
</div>

<div id="menu3" class="menu" onmouseover="show('menu3');"
onmouseout="hide('menu3');">
<div class="menuHead">:>^bi, имеющие отношение к KHHre</div>
<div id="menu3choices" class="menuChoices">
<a href="http://www.javascript.com">JavaScriptRef</a><br />
<a href="http://www.w3c. org">W3C</aXbr />
<a href="http://www.pint.com">PINT</axbr />
</div>
</div>
<script type="text/javascript">
/* не скрывать меню при отключенной поддержке JS и в старых браузерах */

if (DOMCapable)
{
hide("menu1");
hide("menu2");
hide("menu3");
}
//--->
</script>
</body>
</htm1>



Этот пример все же несовершенен в том смысле, что старые браузеры все равно будут показывать все варианты выбора. Можно усовершенствовать данный сценарий, чтобы он работал в большинстве браузеров с поддержкой DHTML, используя библиотеку layerlib. js, о которой шла речь в предыдущей главе. Кроме того, можно попытаться решить и другие проблемы, возникающие из-за особенностей поддержки CSS и JavaScript в менее распространенных браузерах.

Но создание "пуленепробиваемого" меню потребует написания десятков страниц программного кода и дополнительного изучения мелких дефектов и недоработок множества браузеров, что кажется малополезным с точки зрения практики использования JavaScript. Изучите предлагаемое здесь меню, а после того, как поймете используемые в нем концепции, ознакомьтесь с содержимым общедоступных библиотек JavaScript в Web, например с HierMenus (http://www.webreference.com/dhtml/hiermenus/), и только потом приступайте к созданию собственных сценариев меню.


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика