List items in a dropbox with navbar responsive bootstrap

Navigation
1

I am formulating a responsive page with bootstrap, where I have 2 bars:

  • NAVBAR where I have the company logo, and a simple dropbox with the person's name, and with the options change password and exit.

  • MAINBAR where you have the navigation menu of the site.

When accessed by a mobile device, it changes the view to the default bootstrap, where it has a simple button per bar that when clicked opens the corresponding menu as a list.

When you click NAVBAR on the device, it opens a menu that says the person's name and then I have to click on the person's name to open the change password menu and exit.

I would like to know if you have this extra click on the person's name and go directly to the options change password and exit, or already display expanded when clicked on the NAVBAR menu button.

This is the code: 

<div class="navbar">

  <div class="container">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <i class="fa fa-cogs"></i>
      </button>

      <a class="navbar-brand navbar-brand-image" href="http://www.example.com.br">
        <img src="logo.png">
      </a>

    </div> <!-- /.navbar-header -->

    <div class="navbar-collapse collapse">

      <ul class="nav navbar-nav navbar-right">

        <li class="dropdown navbar-profile">
          <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
            <span class="navbar-profile-label">NOME DO USUARIO</span>
            <i class="fa fa-caret-down"></i>
          </a>

          <ul class="dropdown-menu" role="menu">

            <li>
              <a href="profile.php">
                <i class="fa fa-user"></i> 
                Perfil
              </a>
            </li>

            <li>
              <a href="profilePassword.php">
                <i class="fa fa-cog"></i> 
                Alterar Senha
              </a>
            </li>

            <li class="divider"></li>

            <li>
              <a href="logout.php">
                <i class="fa fa-sign-out"></i> 
                Sair
              </a>
            </li>

          </ul>

        </li>

      </ul>

    </div> <!--/.navbar-collapse -->

  </div> <!-- /.container -->

</div> <!-- /.navbar -->

<div class="mainbar">

  <div class="container">

    <button type="button" class="btn mainbar-toggle" data-toggle="collapse" data-target=".mainbar-collapse">
      <i class="fa fa-bars"></i>
    </button>

    <div class="mainbar-collapse collapse">

      <ul class="nav navbar-nav mainbar-nav">
        
<!--

        CRIAÇÃO DO MENU DE NAVEGAÇÃO DO SITE, EXEMPLO DE OPÇÂO:

        <li class="MENU ATIVO OU NÃO ATIVO">
          <a href="index.php">
            <i class="fa fa-dashboard"></i>
            Dashboard
          </a>
        </li>
        
-->
      </ul>

    </div> <!-- /.navbar-collapse -->   

  </div> <!-- /.container --> 

</div> <!-- /.mainbar -->
    
asked by anonymous 06.04.2015 / 15:45

2 answers

0

To do this is very simple, just check what the resolution of the mobile device and add the class open inside the dropdown class thus: 

<li class="dropdown open">

I believe that this is not so UX practice so here is an example of how I would implement: 

.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown-menu {
  margin-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Logo" src="...">
      </a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">Usuário <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Perfil</a>
          </li>
          <li><a href="#">Alterar Senha</a>
          </li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Sair</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

I removed data-toggle="dropdown" and added it to open the hover menu.

    
29.01.2016 / 11:39
0

And if you took the first <ul class="nav navbar-nav navbar-right"/> list and put the user name at the top of the second. Staying as below: 

<div class="navbar">

  <div class="container">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <i class="fa fa-cogs"></i>
      </button>

      <a class="navbar-brand navbar-brand-image" href="http://www.example.com.br">
        <img src="logo.png">
      </a>

    </div> <!-- /.navbar-header -->

    <div class="navbar-collapse collapse">


          <ul class="dropdown-menu" role="menu">

          <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
            <span class="navbar-profile-label">NOME DO USUARIO</span>
            <i class="fa fa-caret-down"></i>
          </a>

            <li>
              <a href="profile.php">
                <i class="fa fa-user"></i> 
                Perfil
              </a>
            </li>

            <li>
              <a href="profilePassword.php">
                <i class="fa fa-cog"></i> 
                Alterar Senha
              </a>
            </li>

            <li class="divider"></li>

            <li>
              <a href="logout.php">
                <i class="fa fa-sign-out"></i> 
                Sair
              </a>
            </li>

          </ul>

    </div> <!--/.navbar-collapse -->

  </div> <!-- /.container -->

</div> <!-- /.navbar -->

<div class="mainbar">

  <div class="container">

    <button type="button" class="btn mainbar-toggle" data-toggle="collapse" data-target=".mainbar-collapse">
      <i class="fa fa-bars"></i>
    </button>

    <div class="mainbar-collapse collapse">

      <ul class="nav navbar-nav mainbar-nav">
        
<!--

        CRIAÇÃO DO MENU DE NAVEGAÇÃO DO SITE, EXEMPLO DE OPÇÂO:

        <li class="MENU ATIVO OU NÃO ATIVO">
          <a href="index.php">
            <i class="fa fa-dashboard"></i>
            Dashboard
          </a>
        </li>
        
-->
      </ul>

    </div> <!-- /.navbar-collapse -->   

  </div> <!-- /.container --> 

</div> <!-- /.mainbar -->
    
06.04.2015 / 16:34
How to execute a script before a view in sql server? How to host server on local router with Express.js on Mac OS X?