Skip to content
Emmanuel Belair edited this page Jun 4, 2013 · 9 revisions

SxBootstrap::NavigationMenu requires spiffy-navigation to render the menu

To render a classic menu:

echo $this->sxbNavigationMenu()->renderMenu('container', $options);

To render a dropdown menu:

echo $this->sxbNavigationMenu()->renderDropDownMenu('container', $options);

If you want to active dropdown menu by hovering, you can use the twitter-bootstrap-hover-dropdown plugin:

Simply add this repository as package to composer.json:

    "require": {
        "twitter-bootstrap-hover-dropdown": "dev-master"
    },
    "repositories": [
        {
            "type": "package",
            "package": {
                "name": "twitter-bootstrap-hover-dropdown",
                "version": "dev-master",
                "source": {
                    "url": "https://github.com/CWSpear/twitter-bootstrap-hover-dropdown.git",
                    "type": "git",
                    "reference":"master"
                }
            }
        }
    ]

Then add the js file in the asset manager config

return array(
    'resolver_configs' => array(
            /** ../.. **/
            'js/twitter-bootstrap-hover-dropdown.min.js' =>
                __DIR__ . '/../../../vendor/twitter-bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.min.js',
            'js/application.js' => __DIR__ . '/../public/js/application.js',
        ),
    ),
);

Call the js file in your layout:

echo $this->headScript()
        /** Your other js files **/
        ->appendFile($this->basePath() . '/js/twitter-bootstrap-hover-dropdown.min.js');

Finaly active the dropdown by adding this js code into your app :

$(document).ready(function() {
    $('.dropdown-toggle').dropdownHover();
});
Clone this wiki locally