Создание javascript-меню
Материал из Umicms
Версия от 13:55, 8 сентября 2011; Cmac (обсуждение | вклад)
Как создать выпадающее меню на UMI.CMS?
Приведем простой пример, на основе которого можно сделать свое меню.
Создайте файл шаблона для меню, например, js_menu.tpl, и разместите его в tpls/content/menu/:
<?php
$FORMS = Array();
$FORMS['menu_block_level1'] = <<<END
%lines%
END;
$FORMS['menu_line_level1'] = <<<END
<div class="firstitem" onMouseOver="showSub('%id%');" onMouseOut="hideSub('%id%')">
<a href="%link%" id="menu_%id%">%text%</a>
%sub_menu%
</div>
END;
$FORMS['menu_line_level1_a'] = <<<END
<div class="firstitem" onMouseOver="showSub('%id%');" onMouseOut="hideSub('%id%')">
<a href="%link%" id="menu_%id%">%text%</a>
%sub_menu%
</div>
END;
$FORMS['menu_block_level2'] = <<<END
<ul class="submenu" id="%id%">
%lines%
</ul>
END;
$FORMS['menu_line_level2'] = <<<END
<li><a href="%link%">%text%</a></li>
END;
$FORMS['menu_line_level2_a'] = <<<END
<li class="active"><a href="%link%">%text%</a></li>
%sub_menu%
END;
$FORMS['menu_block_level3'] = <<<END
<li>
<ul>
%lines%
</ul>
</li>
END;
$FORMS['menu_line_level3'] = <<<END
<li><a href="%link%">%text%</a></li>
END;
$FORMS['menu_line_level3_a'] = <<<END
<li class="active">%text%</li>
END;
?>
Затем создадим тестовый шаблон дизайна в папке tpls/content, где будет выводится наше меню:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="/css/cms/style.css"/>
<link type="text/css" rel="stylesheet" href="/css/cms/inner.css"/>
<title>%title%</title>
<meta name="DESCRIPTION" content="%describtion%"></meta>
<meta name="KEYWORDS" content="%keywords%"></meta>
<link rel="shortcut icon" href="/favicon.ico" />
<script type="text/javascript" src="/js/easy.php"></script>
<script type="text/javascript" src="/js/client/cookie.js"></script>
%data getRssMeta(%pid%)%
%data getAtomMeta(%pid%)%
<style type="text/css">
/*<![CDATA[*/
div.pere {
clear:both;
}
div.firstitem {
float: left;
border:1px solid red;
}
ul.submenu {
display:none;
}
/*]]>*/
</style>
<script language="Javascript">
function showSub(menuid) {
var obj = document.getElementById(menuid);
if (obj) {
obj.style.display = 'block';
}
}
function hideSub(menuid) {
var obj = document.getElementById(menuid);
if (obj) {
obj.style.display = 'none';
}
}
</script>
</head>
<body>
<h2>Тест</h2>
%content menu('js_menu', 3)%
<div class="pere"></div>
<div style="margin: 20px 0 0 0;">
%content%
</div>
</body>
</html>
Пропишите этот шаблон дизайна в настройках модуля "Структура". Создайте тестовую страничку и назначьте ей этот шаблон. На этой странице Вы увидите образец javascript-меню. По аналогии Вы сможете создать свое меню.
