Создание javascript-меню — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
Строка 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>

Версия 12:38, 1 апреля 2011

Как создать выпадающее меню на 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-меню. По аналогии Вы сможете создать свое меню.