[Opgelost] Sub-menu items in span plaatsen met menu manager

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Post Reply
realrock
Forum Members
Forum Members
Posts: 227
Joined: Tue Sep 04, 2007 8:14 pm

[Opgelost] Sub-menu items in span plaatsen met menu manager

Post by realrock »

Ik ben bezig met de implementatie van een horizontaal menu in een website. Sommige menu items hebben sub items die er horizontaal onder moeten komen.

Om dit te maken heb ik op internet het meest simpele CSS menu opgezocht. Zie onderstaande links:

Menu:
http://www.sohtanaka.com/web-design/exa ... al-subnav/

Uitleg implementatie:
http://www.sohtanaka.com/web-design/hor ... ss-jquery/

Het idee is dat de sub items in een SPAN moet worden weergegeven, alleen dat krijg ik niet voor elkaar in de MenuManager.

Mijn probeersel  ;D :
http://tiny.cc/e0u05

Weet iemand hoe je aan kan geven dat als er sub items zijn dat deze moeten worden weergegeven in een SPAN?

Menu Template

Code: Select all

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul id="topnav">
{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}
<span><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext} </a></span>

{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 class="sectionheader">{$node->menutext}

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

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

{/if}

{/foreach}

{repeat string="</ul>" times=$node->depth-1}</li>
</ul>
{/if}
Voorbaat dank!, Peter
Last edited by realrock on Thu Oct 28, 2010 9:48 am, edited 1 time in total.
Jos
Support Guru
Support Guru
Posts: 4019
Joined: Wed Sep 05, 2007 8:03 pm

Re: Sub-menu items in span plaatsen met menu manager

Post by Jos »

In dit geval zou ik het liever andersom aanpakken: De css in overeenstemming brengen met wat de menumanager standaard uitspuugt.

Deze code:

Code: Select all

ul#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0; top:35px;
	display: none; /*--Hide by default--*/
	width: 970px;
	background: #1376c9;
	color: #fff;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: underline;}
Vervangen door:

Code: Select all

ul#topnav li ul {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0; top:35px;
	display: none; /*--Hide by default--*/
	width: 970px;
	background: #1376c9;
	color: #fff;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover ul { display: block; } /*--Show subnav on hover--*/
ul#topnav li ul li { float: left; } /*--Place submenu items next to each other--*/
ul#topnav li ul li a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li ul li a:hover {text-decoration: underline;}
realrock
Forum Members
Forum Members
Posts: 227
Joined: Tue Sep 04, 2007 8:14 pm

Re: [Opgelost] Sub-menu items in span plaatsen met menu manager

Post by realrock »

Zo kun je het ook bekijken ja. Ik heb het nu allemaal draaiende.

Jos Bedankt!
User avatar
erpee
Power Poster
Power Poster
Posts: 771
Joined: Sat Jul 07, 2007 9:22 am

Re: [Opgelost] Sub-menu items in span plaatsen met menu manager

Post by erpee »

In IE komt je site er nog niet helemaal goed doorheen. In ieder geval gaat het om de afbeelding:

http://huisartsenpraktijk-homerus.nl/down.gif Deze wordt aangeroepen maar staat (ws) niet op de server ...
Waarom zou het direct goed moeten gaan? Dan is alle lol weg ...
Post Reply

Return to “Dutch - Nederlands”