Bootstrap nav toggle without navbar element

Question

Is it possible to create the toggle button without using all the markup for default navigation?

I just want to create simple menu with the collapse feature. For example:

<div class="navigation">
    <ul id="nav-to-collapse">
       <li><a href=""></a></li>
       <li><a href=""></a></li>
       <li><a href=""></a></li>
    </ul>

    <a href="#" class="toggle" data-toggle="collapse" data-target="#nav-to-collapse">
</div>

Would this be possible? Its my first time using Bootstrap (3) and Its really confusing. I dont want to use all the navbar classes because then I would have to overwrite all the navbar styles just to create simple menu that I want.

EDIT: I managed to create the toggle without all the useless navbar classes but there is an issue with the toggle animation, when nav height is changed. Here is a jsfiddle to ilustrate the problem: Jsfiddle demo

Answer 1

Fixed the collapse animation issue by using min-height instead of height on the nav element. Here is a fiddle: http://jsfiddle.net/cfcZY/2/

nav { min-height: 100px; }

Answer 2

Bootstrap's toggle function is a javascript function that is triggered when the user clicks the element with an attribute of data-toggle="collapse". If there is not also a data-target="" id specified, then the element that the user clicks is collapsed. However, in this bit of markup:

<a href="#" class="toggle" data-toggle="collapse" data-target="#nav-to-collapse">

The data-target="" attribute is set to the id of #nav-to-collapse. So Bootstrap's collapse plugin is going to look for an id="nav-to-collapse" and trigger its function on that id.

So in this markup:

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

The data-target is set to the class of .navbar-collapse, which will make everything underneath that element collapse.