This is a utility to create Twitter Bootstrap styled nav bar with drop down menus from the output of Lift's Menu.builder. Any menu item that is defined with submenus will automatically rendered as a drop-down menu.
To use the utility in your own project:
download and build the TBUtils library:
git clone https://github.com/dph01/lift-TBUtils cd liftTBUtils ./sbt publish-local
In the project in which you want to use the library, add the following to the dependencies in the project's build.sbt:
"com.damianhelme" %% "tbutils" % "0.1.0" % "compile"
In order to tell Lift where to look for the TBNav snippet, in Boot.scala add:
In Boot.scala, define your menu sitemap with something like:
val entries = List(Menu("Home") / "index", Menu("Page 1") / "page1", Menu("Page 2") / "page2", Menu("Page 3") / "#" >> PlaceHolder submenus ( Menu("Page 3a") / "page3a" , Menu("Page 3b") / "page3b" , Menu("Page 3c") / "page3c")) def sitemap = SiteMap(entries: _*) LiftRules.setSiteMap(sitemap)
Every menu entry with a submenu will the rendered as a menu drop-down. The 'PlaceHolder' is optional, but it's clearer to other developers that you intend this entry to be the root of a drop-down if you include it.
Download the Twitter Bootstrap library and copy into a subdirectory of /src/main/webapp (e.g. /src/main/webapp/bootstrap/2.0.0)
Include the Bootstrap files in your html:
Make sure jquery 1.7.0 or later is included in your html. An easy way to do this would be to copy the jquery file into a subdirectory of /sr/main/webpp (e.g. /src/main/webmapp/jquery) and include a line such as the following in your html:
In your html, wrap your call to Menu.builder with call to TBNav.menuToTBNav:
<div class="topbar"> <div class="navbar-inner"> <div class="fill"> <div class="container"> <a class="brand" href="/">My App</a> <span data-lift="lift:TBNav.menuToTBNav?eager_eval=true"> <span data-lift="lift:Menu.builder?top:class=nav;li_item:class=active;linkToSelf=true;expandAll=true"></span> </span> </div> </div> </div>
The classes: topbar, navbar-inner, fill and container etc. are Bootstrap class for formatting the navigation bar.
For comments, questions, etc. please see the accompanying blogpost