[prokurist]

Hallo. Leute können sie mir helfen. ich brauche horizontale Untermenu.


Mein code ist:

<?if (!empty($arResult)):?>
<ul id="horizontal-multilevel-menu">

<?
$previousLevel = 0;
foreach($arResult as $arItem):?>

	<?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?>
		<?=str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));?>
	<?endif?>

	<?if ($arItem["IS_PARENT"]):?>

		<?if ($arItem["DEPTH_LEVEL"] == 1):?>
			<li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a>
				<ul>
		<?else:?>
			<li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>" class="parent"><?=$arItem["TEXT"]?></a>
				<ul>
		<?endif?>

	<?else:?>

		<?if ($arItem["PERMISSION"] > "D"):?>

			<?if ($arItem["DEPTH_LEVEL"] == 1):?>
				<li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a></li>
			<?else:?>
				<li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
			<?endif?>

		<?else:?>

			<?if ($arItem["DEPTH_LEVEL"] == 1):?>
				<li><a href="" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>
			<?else:?>
				<li><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>
			<?endif?>

		<?endif?>

	<?endif?>

	<?$previousLevel = $arItem["DEPTH_LEVEL"];?>

<?endforeach?>

<?if ($previousLevel > 1)://close last item tags?>
	<?=str_repeat("</ul></li>", ($previousLevel-1) );?>
<?endif?>

</ul>
<div class="menu-clear-left"></div>
<?endif?>

CSS:

/**Top menu**/
#horizontal-multilevel-menu,#horizontal-multilevel-menu ul
{
	margin:0; padding:0;
	background:#c12e03 url(images/323a.jpg) repeat-x;
	min-height:27px;
	width:100%;
	list-style:none;
	font-size:11px;
	float:left;
	/*font-size:90%*/
}

#horizontal-multilevel-menu
{
	
}

/*Links*/
#horizontal-multilevel-menu a
{
	display:block;
	padding:5px 10px;
	/*padding:0.3em 0.8em;*/
	text-decoration:none;
	text-align:center;
}

#horizontal-multilevel-menu li 
{
	float:left;
}

/*Root items*/
#horizontal-multilevel-menu li a.root-item
{
	color:#fff;
	font-weight:bold;
	padding:7px 12px;
}

/*Root menu selected*/
#horizontal-multilevel-menu li a.root-item-selected
{
	background:#3a3a3a url(images/323b.jpg) repeat-x;
	color:#fff;
	font-weight:bold;
	padding:7px 12px;
}

/*Root items: hover*/
#horizontal-multilevel-menu li:hover a.root-item, #horizontal-multilevel-menu li.jshover a.root-item
{
	background:#878687 url(images/323c.jpg) repeat-x;
	color:#c23104;
}

/*Item-parents*/
#horizontal-multilevel-menu a.parent
{
	background: url(images/arrow.gif) center right no-repeat;
}

/*Denied items*/
#horizontal-multilevel-menu a.denied
{
	background: url(images/lock.gif) center right no-repeat;
}

/*Child-items: hover*/
#horizontal-multilevel-menu li:hover, #horizontal-multilevel-menu li.jshover
{
	background:#D6D6D6;
	color:#fff;
}

/*Child-items selected*/
#horizontal-multilevel-menu li.item-selected
{
	background:#D6D6D6;
	color:#fff;
}

/*Sub-menu box*/
#horizontal-multilevel-menu li ul
{
	position:absolute;
	/*top:-999em;*/
	top:auto;
	display:none;
	z-index:500;

	height:auto;
	/*width:12em;*/
	width:135px;
	background:#F5F5F5;
	border:1px solid #C1C1C1;
}

/*Sub-menu item box*/
#horizontal-multilevel-menu li li 
{
	width:100%;
	border-bottom:1px solid #DEDEDE;
}

/*Item link*/
#horizontal-multilevel-menu li ul a
{
	text-align:left;
}

/*Items text color & size */
#horizontal-multilevel-menu li a,
#horizontal-multilevel-menu li:hover li a,
#horizontal-multilevel-menu li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li a
{
	color:#4F4F4F;
	font-weight:bold;
}

/*Items text color & size: hover*/
#horizontal-multilevel-menu li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover a,
#horizontal-multilevel-menu li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover a
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover a
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li.jshover a
{
	color:#4F4F4F;
}

#horizontal-multilevel-menu li ul ul
{
	margin:-27px 0 0 132px;
	/*margin:-1.93em 0 0 11.6em;*/
}

#horizontal-multilevel-menu li:hover ul ul,
#horizontal-multilevel-menu li.jshover ul ul,
#horizontal-multilevel-menu li:hover ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul,
#horizontal-multilevel-menu li:hover ul ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul ul,
#horizontal-multilevel-menu li:hover ul ul ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul ul ul
{
	/*top:-999em;*/
	display:none;
}

#horizontal-multilevel-menu li:hover ul,
#horizontal-multilevel-menu li.jshover ul,
#horizontal-multilevel-menu li li:hover ul,
#horizontal-multilevel-menu li li.jshover ul,
#horizontal-multilevel-menu li li li:hover ul,
#horizontal-multilevel-menu li li li.jshover ul,
#horizontal-multilevel-menu li li li li:hover ul,
#horizontal-multilevel-menu li li li li.jshover ul,
#horizontal-multilevel-menu li li li li li:hover ul,
#horizontal-multilevel-menu li li li li li.jshover ul
{
	/*z-index:1000;
	top:auto;*/
	display:block;
}

div.menu-clear-left
{
	clear:left;
}

[Rico]

Zitat von prokurist

Hallo. Leute können sie mir helfen. ich brauche horizontale Untermenu.

DER Spezialist für Menüs ist Stu Nicholls. Alle Menüs nur auf CSS Basis. Hier findest du jene Menge Beispiele : Stu Nicholls | CSSplay | CSS only menus

Gruss
Erich

[Crizzo]

Hier: http://xhtmlforum.de/40267-faq-h-ufi...ragen-und.html gibt es von Heiko ein Tutorial für Listen-Navigationen.

Klaus Langenberg hat auch eine mehre teilige Hilfe erstellt: Cascading Style Sheets { Tutorials : Site-Navigation mit Listen }