CMSMS Accordion Menu

CMSMS Accordion Menu

CMS Made Simple 1.11.x / 1.12 | 14-04-2014 | Pascal Merks | Reacties


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

Voorbeelden: http://pmkmedia.nl/uploads/demos/accordion.html en jeugd.dordrechtlions.nl

 

CSS Voor het Accordion Menu:

Code:

.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 p:hover {
background: #09F;
cursor: pointer; cursor: hand;
}

.accordion-menu a:hover {
background: #09F;
}

.accordion-menu ul a {
width:153px;
background:#FFF;
border-bottom:1px solid #000;
color:#000;
margin: -8px 0px 8px 0px;
}
.accordion-menu ul a:hover {
color:#fff;
background: #09F;
}
.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:

<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:

{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}

 

Verwijder de 2 lage streepjes in {literal__} en {/__literal}.

 

Menu Sjabloon Accordion Menu:

Code:

{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.

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets