Question

Using

<div class="lift:Menu.builder"/>

menu on website is vertically, any ideas because i cant found anywhere, how to make menu across ?

Answer 1

This is more a CSS question than a Lift question. The HTML produced for the menu looks something like this:

<div class="column span-6 colborder sidebar">
  <hr class="space" />
  <ul>
    <li> <span>Home</span></li>
    <li> <a href="/user_mgt/login">Login</a></li>
    <li> <a href="/user_mgt/sign_up">Sign Up</a></li>
    <li> <a href="/user_mgt/lost_password">Lost Password</a></li>
    <li> <a href="/search">Search</a></li>
  </ul>
  ...
</div>

I.e., about as vanilla as possible, so it’s very easy to add some CSS to create a horizontal menu out of the list—see for example the “Horizontal lists” examples on Listamatic.

It would be simplest just to add the CSS code to the header in src/main/webapp/templates-hidden/default.html, but you could also use your own separate CSS file without too much fuss.