Accordion Menu

[pasmaskas]

Ik wou even iets geven aan jullie

Hier een accordion menu die ik heb omgebouwt voor CMSMS. Het is een simple menutje dus verwacht geen spannende effecten.

CSS Voor het Accordion Menu:

Code: Select all

.accordion-menu li { width:165px; }
.accordion-menu a {
	display:block;
	width:153px;
	padding:6px;
	background: black;
	margin:0px 0px 8px 0px;
	text-decoration:none;
	color:#FFF;
	font-weight:bold;
}

.accordion-menu p {
	display:block;
	width:153px;
	padding:6px;
	background: black;
	margin:0px 0px 8px 0px;
	text-decoration:none;
	color:#FFF;
	font-weight:bold;
}

.accordion-menu li:hover {
	background: green;
}

.accordion-menu p:hover {
	background: green;
	cursor: pointer; cursor: hand
}

.accordion-menu ul a {
	width:153px;
	background:#FFF;
	border-bottom:1px solid #00F;
	color:#000;
	margin: -8px 0px 8px 0px;
}
.accordion-menu ul a:hover {
	color:#000;
	background: #CCC;
}
.accordion-menu, .accordion-menu ul { padding:0; margin:0; }
.accordion-menu li { list-style:none; }
.accordion-menu li ul { display:none; }

Voor in de meta

Code: Select all

<__script__ src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></__script>

Java script voor onder in de pagina voor de <__body> tag sluit

Code: Select all

{literal}
<__script__ type="text/javascript">

if((navigator.userAgent.match(/iPad/i))) {
$(document).ready(function () {    
    $('.accordion-menu li').hover(
        function () {
            $('ul', this).stop(true, true).delay(200).slideDown(200);
        },
        function () {
            $('ul', this).stop(true, true).slideUp(200);            
        });
		
});
}
else if(navigator.userAgent.match(/iPhone/i)) {
$(document).ready(function () {    
    $('.accordion-menu li').hover(
        function () {
            $('ul', this).stop(true, true).delay(200).slideDown(200);
        },
        function () {
            $('ul', this).stop(true, true).slideUp(200);            
        });
		
});
}
else
{
function initMenu() {
    $('.accordion-menu li ul').hide(); 
    $('.accordion-menu li p').on('click', function() {
        $('.accordion-menu li ul').slideUp();
        $(this).next().slideDown();
    });
}
$(document).ready(initMenu);
}

</__script>
{/literal}

Menu Sjabloon Accordion Menu

Code: Select all

{if $count > 0}
<ul class="accordion-menu">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li><p>{$node->menutext}</p>

{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Je kan hem helemaal naar smaak aanpassen natuurlijk met CSS

Stel het Menu sjabloon wel even in als standaard.

Groetjes Pascal

[erpee]

Heb je ook een live voorbeeld?

[Rolf]

Ik wou even iets geven aan jullie

Bedankt!! En *we* zijn niet eens jarig

[pasmaskas]

Tuurlijk heb ik een live voorbeeld:

http://jeugd.dordrechtlions.nl/

@Rolf: Graag gedaan!