Создание javascript-меню
Материал из Umicms
Версия от 13:35, 19 февраля 2010; Arnica (обсуждение | вклад) (Новая страница: «Как создать выпадающее меню на UMI.CMS? Приведем простой пример, на основе которого можно сде…»)
Как создать выпадающее меню на 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="" id="menu_%id%">%text%</a>
%sub_menu%
</div>
END;
$FORMS['menu_line_level1_a'] = <<<END
<div class="firstitem"><a href="" id="%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')%
<div class="pere"></div>
<div style="margin: 20px 0 0 0;">
%content%
</div>
</body>
</html>
Пропишите этот шаблон дизайна в настройках модуля "Структура". Создайте тестовую страничку и назначьте ей этот шаблон. На этой странице Вы увидите образец флеш-меню. По аналогии Вы сможете создать свое меню.
