Hideable navigation on Custom Home extension

To make more space in the main column, we can try to wrap the navigation using div, so that it will be hidden  on window load. This example shows how to wrap the navigation using typoscript.

In this example, the navigation is defined in left_nav object:

page.10.subparts {

  left_nav.wrap = <div id="nav1" class="nav"><div class="nav-btn"><img width="16" height="16" alt="Info" title="Info" src="../typo3/sysext/t3skin/icons/module_web_list.gif"></div> | </div>
}

The div above will be processed by jquery so that it will be hidden by default, we can hover on the icon to make it visible, and then we can access the navigation.


To make the extension fills all available width, add the following css example to the res/style.css

#content {
    margin: 0 0 0 22px;
    padding-top: 10px;
    width: 950px; /* change as needed */
}

#leftcol {
    float: none;
    margin: 0;
    padding: 0;
}

Voila, now you have custom home with hideable navigation. Please be in mind that your html template should be like this:

<div id="main">

<div id="leftcol">

<div id="left_nav">left navigation</div>

</div>

<div id="content">

<div id="maincol">main content</div>

</div>

</div>

Reference:
Custom Home extension (custom_home)