Skip to content

Sub-Menu (Dropdown) in Navbar #316

Closed
woazli opened this Issue Dec 28, 2013 · 2 comments

2 participants

@woazli
woazli commented Dec 28, 2013

Hey everyone.
Since Flat-UI 1.2.3 came out, i was wondering how to make a dropdown menu with the standard navbar code.
Before 1.2.3 my original Code was:

<div class="navbar navbar-inverse">
<div class="navbar-header">
  <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse-01"></button>
  </div>
<div class="navbar-collapse collapse navbar-collapse-01">
  <ul class="nav">
    <li class="first active"><a href="#" title="Home" ><i class="fui-home"></i> </a></li>
    <li><a href="#">Main</a></li>
    <li><a href="#">this</a></li>
    <li><a href="#">there</a></li>
    <li><a href="#">another</a></li>
    <li class="last"><a href="#" ><i class="fui-lock"></i> Hidden content</a>
      <ul class="nav">
        <li class="first"><a href="#">Change something</a></li>
        <li><a href="#">Another Option</a></li>
        <li class="last"><a href="#"><i class="fui-star"></i> Star option</a></li>
      </ul>
    </li>
  </ul>
</div>

Now my Code looks like this:

`<nav class="navbar navbar-inverse" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01"> <span class="sr-only">Toggle navigation</span> </button>
  </div>
  <div id="navbar-collapse-01" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="first active"><a href="#" title="#" ><i class="fui-home"></i> </a></li>
      <li><a href="#" title="#" >Some Link</a></li>
      <li><a href="#" title="#" >Some Link</a></li>
      <li><a href="#" title="#" >Some Link</a></li>
      <li><a href="#" title="#" >Some Link</a></li>
      <li><a href="#" title="#" ><i class="fui-lock"></i> Another Link <i class="dropdown-arrow"></i></a>
        <ul>
          <li class="first"><a href="#" title="#" >Some Link</a></li>
          <li><a href="#" title="#" >Some Link</a></li>
          <li class="last"><a href="#" title="#" ><i class="fui-star"></i> Some Link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Am I making any mistakes, but im too stupid to see them?
Any help would be nice :)
Thx

@woazli
woazli commented Dec 28, 2013

my first solution for the Dropdown Item would be:

<li>           
            <a href= "" class="dropdown-toggle" data-toggle="dropdown">Something<span class="caret"></span>
            </a>
            <span class="dropdown-arrow dropdown-arrow-inverse"></span>
            <ul class="dropdown-menu dropdown-inverse">
              <li><a href="#fakelink">Sub Menu Element</a></li>
              <li><a href="#fakelink">Sub Menu Element</a></li>
              <li><a href="#fakelink">Sub Menu Element</a></li>
            </ul>
            </li>

but its not the good old dropdown like it was in the previous versions of flat-ui

@pytkin
pytkin commented Apr 29, 2014

Hello, @woazli. This is dropdown markup from current version (Flat UI Pro 1.2.5):

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-3">
      <span class="sr-only">Toggle navigation</span>
    </button>
    <a class="navbar-brand" href="#">Flat UI</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-collapse-3">
    <ul class="nav navbar-nav">           
      <li><a href="#">Messages<span class="navbar-unread">1</span></a></li>
      <li class="active"><a href="#">About Us</a></li>
      <li><a href="#">Clients</a></li>  
     </ul>          
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MonsterCritic <b class="caret"></b></a>
        <span class="dropdown-arrow"></span>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
      <li><a href="#">Settings</a></li>           
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>
@pytkin pytkin closed this Apr 29, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.