Создание javascript-меню — различия между версиями
Материал из Umicms
Ver (обсуждение | вклад) |
Mad grant (обсуждение | вклад) |
||
| (не показано 8 промежуточных версий 3 участников) | |||
| Строка 15: | Строка 15: | ||
$FORMS['menu_line_level1'] = <<<END | $FORMS['menu_line_level1'] = <<<END | ||
<div class="firstitem" onMouseOver="showSub('%id%');" onMouseOut="hideSub('%id%')"> | <div class="firstitem" onMouseOver="showSub('%id%');" onMouseOut="hideSub('%id%')"> | ||
| − | <a href="" id="menu_%id%">%text%</a> | + | <a href="%link%" id="menu_%id%">%text%</a> |
%sub_menu% | %sub_menu% | ||
</div> | </div> | ||
| Строка 21: | Строка 21: | ||
$FORMS['menu_line_level1_a'] = <<<END | $FORMS['menu_line_level1_a'] = <<<END | ||
| − | <div class="firstitem"><a href="" id="%id%">%text%</a> | + | <div class="firstitem" onMouseOver="showSub('%id%');" onMouseOut="hideSub('%id%')"> |
| + | <a href="%link%" id="menu_%id%">%text%</a> | ||
%sub_menu% | %sub_menu% | ||
</div> | </div> | ||
| Строка 126: | Строка 127: | ||
<body> | <body> | ||
<h2>Тест</h2> | <h2>Тест</h2> | ||
| − | %content menu('js_menu')% | + | %content menu('js_menu', 3)% |
<div class="pere"></div> | <div class="pere"></div> | ||
| Строка 138: | Строка 139: | ||
</source> | </source> | ||
| − | Пропишите этот шаблон дизайна в настройках модуля "Структура". Создайте тестовую страничку и назначьте ей этот шаблон. На этой странице Вы увидите образец | + | Пропишите этот шаблон дизайна в настройках модуля "Структура". Создайте тестовую страничку и назначьте ей этот шаблон. На этой странице Вы увидите образец javascript-меню. По аналогии Вы сможете создать свое меню. |
| + | [[Категория:Верстка в TPL]] | ||
Текущая версия на 21:17, 4 июня 2013
Как создать выпадающее меню на 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-меню. По аналогии Вы сможете создать свое меню.
