-
Notifications
You must be signed in to change notification settings - Fork 12
NavigationMenu
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();
});