CMS Made Simple Forums

Posted: **Tue Oct 26, 2010 4:35 pm**

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

Posted: **Wed Oct 27, 2010 8:13 pm**

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

Posted: **Thu Oct 28, 2010 9:49 am**

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

Jos Bedankt!

Posted: **Fri Oct 29, 2010 6:55 pm**

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

CMS Made Simple Forums

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

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

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

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

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