Expandible submenu()

[Tata]

Is there a way to have the submenu() expandible? It would save a lot of page space (especially if the page has only a little text but many subpages).
There are many "pure CSS" solutions. But they require too much inline styling. I think anout something that would make it optional showing the menu collapsed or expanded. E.g. depending on number of subpages (e.g. having more than 5 subpages, show the submenu automatically collapsed).

[Tata]

A little dirty (but working) solution:
In core.css new selectors

Code: Select all

/* submenu*/
	#submenu, 
	.show, 
	.hide:focus {display: none; }
    .hide:focus + .show, 
    .hide:focus ~ #submenu {display: inline; }
    @media print { 
    	.hide, .show { display: none; } 
    	}

In tplfuncs.php find (#633)

Code: Select all

        if (count($ta) != 0) {
            return '<h4>' . $tx['submenu']['heading'] . '</h4>'
                . li($ta, 'submenu');

and replace by

Code: Select all

        if (count($ta) != 0) {
            /*return '<h4>' . $tx['submenu']['heading'] . '</h4>'.*/
            return '
                <a href="#" class="hide"><h4>' . $tx['submenu']['heading'] . '(+)</h4></a>
                <a href="#" class="show"><h4>' . $tx['submenu']['heading'] . '(-)</h4></a>
                <div id="submenu">'.
                    li($ta, 'submenu').
                '</div>';

The (+/-) may of course be placed before the "$tx['submenu']['heading']" and/or replaced by an image or styled howsoever in a <span> in core.css.

[cmb]

A little dirty (but working) solution:

Um, didn't work for me.

However, why not simply:

Code: Select all

.submenu ul {display:none}
.submenu:hover ul {display:block}
/* h4 has to be changed if menu_levels != 3 */
.submenu h4:after {content: "(+)"}

No further modifications seem to be necessary.

[Tata]

Now I see, that the links do not work for me either. The submenu expands, but links are out of function. Why about?

[Tata]

Ja, das funktioniert.
Es brauchte nur

Code: Select all

        if (count($ta) != 0) {
            return '<div class="submenu"><h4>' . $tx['submenu']['heading'] . '</h4>'
                . li($ta, 'submenu').'</div>';

und

Code: Select all

/* SUBMENU */
.submenu{ margin-top: 1rem;}
.submenu ul {display:none;}
.submenu:hover ul {display:block;}
/* h4 has to be changed if menu_levels != 3 */
.submenu h4:after {content: "(+)"}

Noch immer testweise am http://zomos.cmsimple.sk