HetSoftwareHuis

Wie zelf een website met Joomla! bouwt kan zo nu en dan hulp gebruiken. Een van de zaken die vaak gevraagd worden is hoe Joomla! aangepast kan worden om de structuur van de menu's te veranderen in een verticaal of horizontaal Flat List. In dit artikel omschrijven wij hoe dat moet met Joomla! 1.011. Voor latere versies kan dezelfde handleiding gevolgd worden maar dan zal de code op andere lijnen dan aangegeven staan.

Hoe krijg je een submenu als het menu "Flat list" is

Je wilt de menu's in jouw website als Flat list instellen omdat de menu's dan niet in tabellen gezet worden. Maar waarom geen tabellen gebruiken? Omdat een flat list als ongeordende lijst wordt weergegeven (<ul><li>) en daarmee de toegankelijkheid van de website verbetert.

Als je jouw menu instelt als Flat list dan zal je echter merken dat de submenu's niet meer getoond worden. Om te zorgen dat je toch zonder gebruik van tabellen een menu kan weergeven kan je de volgende aanpassing doen:

Twee bestanden aanpassen in de folder "modules" namelijk "mod_mainmenu.xml" en "mod_mainmenu.php":

mod_mainmenu.xml

Zoek (regel 23):
<option value="list_flat">Flat List</option>

Verander dit in:
<option value="list_flat">Horizontaal Flat list</option>
<option value="vert_flat">Verticaal Flat List</option>

mod_mainmenu.php

Zoek (regel 119):
function mosShowVIMenu(  &$params ) {

Verander dit in:
function mosShowVIMenu(  &$params, $style=0) {


Zoek (regel 212 EN 426):
$indents = array(
// block prefix / item prefix / item suffix / block suffix
array( '<table width="100%" border="0" cellpadding="0" cellspacing="0">', '<tr align="left"><td>' , '</td></tr>', '</table>' ),
array( '', '<div style="padding-left: 4px">'. $img[1] , '</div>', '' ),
array( '', '<div style="padding-left: 8px">'. $img[2] , '</div>', '' ),
array( '', '<div style="padding-left: 12px">'. $img[3] , '</div>', '' ),
array( '', '<div style="padding-left: 16px">'. $img[4] , '</div>', '' ),
array( '', '<div style="padding-left: 20px">'. $img[5] , '</div>', '' ),
array( '', '<div style="padding-left: 24px">'. $img[6] , '</div>', '' ),
);

Verander dit in:
switch ($style) {
        case '1':
                $indents = array(
                // block prefix / item prefix / item suffix / block suffix
                array( '<ul id="mainlevel'. $params->get( 'class_sfx' ) .'">', '<li>' , '</li>', '</ul>' ),
                array( '<ul id="sublevel'. $params->get( 'class_sfx' ) .'">', '<li>'. $img[1] , '</li>', '</ul>' ),
                array( '<ul id="sublevel'. $params->get( 'class_sfx' ) .'">', '<li>'. $img[2] , '</li>', '</ul>' ),
                array( '<ul id="sublevel'. $params->get( 'class_sfx' ) .'">', '<li>'. $img[3] , '</li>', '</ul>' ),
                array( '<ul id="sublevel'. $params->get( 'class_sfx' ) .'">', '<li>'. $img[4] , '</li>', '</ul>' ),
                array( '<ul id="sublevel'. $params->get( 'class_sfx' ) .'">', '<li>'. $img[5] , '</li>', '</ul>' ),
                array( '<ul id="sublevel'. $params->get( 'class_sfx' ) .'">', '<li>'. $img[6] , '</li>', '</ul>' ),
                );
                break;
        default:
                $indents = array(
                // block prefix / item prefix / item suffix / block suffix
                array( '<table width="100%" border="0" cellpadding="0" cellspacing="0">', '<tr align="left"><td>' , '</td></tr>', '</table>' ),
                array( '', '<div style="padding-left: 4px">'. $img[1] , '</div>', '' ),
                array( '', '<div style="padding-left: 8px">'. $img[2] , '</div>', '' ),
                array( '', '<div style="padding-left: 12px">'. $img[3] , '</div>', '' ),
                array( '', '<div style="padding-left: 16px">'. $img[4] , '</div>', '' ),
                array( '', '<div style="padding-left: 20px">'. $img[5] , '</div>', '' ),
                array( '', '<div style="padding-left: 24px">'. $img[6] , '</div>', '' ),
                );
                break;
}


Zoek (regel 511):
switch ( $menu_style ) {
    case 'list_flat':
    mosShowHFMenu( $params, 1 );
    break;

    case 'horiz_flat':
    mosShowHFMenu( $params, 0 );
    break;

    default:
    mosShowVIMenu( $params );
    break;
}

Verander dit in:
switch ( $menu_style ) {
    case 'vert_flat':   // Verticaal Flat
    mosShowVIMenu( $params, 1 );
    break;

    case 'list_flat':   // Horizontaal Flat
    mosShowHFMenu( $params, 1 );
    break;

    case 'horiz_flat': // Horizontaal Table
    mosShowHFMenu( $params, 0 );
    break;

    default:           // Verticaal Table
    mosShowVIMenu( $params, 0 );
    break;
}

Tot slot:

Nadat je bovenstaande aanpassingen hebt gedaan kan je elk menu instellen als:

1. Verticaal Flat list
2. Horizontaal Flat list