All geek questions in one place

Bootstrap 3 nav button, from toggle to dropdown

I am working on an application AngularJSwhere I use Bootstrap 3to style my navigation ( Navbar ) and it works fine.

My title

<div class="navbar-header">
    <button class="pull-right visible-xs" ui-toggle-class="show" data-target=".navbar-settings">
       <i class="glyphicon glyphicon-cog"></i></button>

     <a class="navbar-brand text-lt" href="#/dashboard">
       <img class="m-mid" ng-src="{{ logo }}" alt="{{ user.organization.name }}">
       <span class="hidden-folded m-l-xs hide">{{app.name}}</span>
     </a>
 </div>

 <div class="collapse navbar-collapse navbar-settings navbar-right">
     <ul class="nav navbar-nav">
         <li class="dropdown" dropdown>
             <a href class="dropdown-toggle" dropdown-toggle>
                 {{lang.name}} <b class="caret"></b>
              </a>

              <ul class="dropdown-menu">
                 <li ng-repeat="lang in langs">
                     <a class="p-t-sm p-b-sm" ng-click="setLang(lang.key)">
                        {{lang.name}}
                      </a>
                 </li>
               </ul>
           </li>

           <li class="dropdown" dropdown>
              <a href class="dropdown-toggle" dropdown-toggle>
                 <span class="thumb-sm avatar pull-right">
                     <img class="block" ng-src="{{ user.image_path }}" alt="...">
                     <i class="on md b-white bottom"></i>
                  </span>
                  {{name} <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                  <li><a href="#/setting"></a></li>
                  <li><a href="#/profile"></a></li>
                  <li><a href="#/help"></a></li>
              </ul>
          </li>
     </ul>
</div>

Right now, when on a mobile device it displays buttonin navbar-header, and behaves toggleas expected using Bootstraps navigation. This means that the user must click on it to open it, and then click on it again when he wants to close it.

And on the tablet / desktop, these are two drop-down lists (from navbar-collapse). Which I want to keep it that way.

: , , ? , , , , ?

+4
1

?

var app = angular.module('app', ['ui.bootstrap']);

app.controller('menu', function($scope) {
    $scope.logo = 'http://i.stack.imgur.com/P1BHs.png';
    $scope.user = {};
    $scope.user.organization = {};
    $scope.user.organization.name = "Org test";
    $scope.user.image_path = "http://ionicframework.com/img/docs/venkman.jpg";
    $scope.app = {name: "App test"};
    $scope.lang = {name: "English"};
    $scope.langs = [{key: "EN", name: "English"},{key: "IT", name: "Italian"}];
    $scope.name = "user123";
    $scope.setLang = function(key) {
      
    }
    
    $scope.containerClick = function($event) {
      console.log("containerClick: "+$scope.navCollapsed)
      $scope.navCollapsed = true;
    }

});
<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="http://angular-ui.imtqy.com/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="app.js"></script>
</head>

<body ng-controller="menu">

  <div class="navbar-header">
    <button class="pull-right visible-xs" ui-toggle-class="show" data-target=".navbar-settings" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
      <i class="glyphicon glyphicon-cog"></i></button>

    <a class="navbar-brand text-lt" href="#/dashboard">
      <img class="m-mid" style="width: 200px" ng-src="{{ logo }}" alt="{{ user.organization.name }}">
      <span class="hidden-folded m-l-xs hide">{{app.name}}</span>
    </a>
  </div>

  <div class="collapse navbar-collapse navbar-settings navbar-right" uib-collapse="navCollapsed">
    <ul class="nav navbar-nav">
      <li class="dropdown" uib-dropdown>
        <a href class="dropdown-toggle" uib-dropdown-toggle>
                 {{lang.name}} <b class="caret"></b>
              </a>

        <ul class="dropdown-menu">
          <li ng-repeat="lang in langs">
            <a class="p-t-sm p-b-sm" ng-click="setLang(lang.key)">
                        {{lang.name}}
                      </a>
          </li>
        </ul>
      </li>

      <li class="dropdown" uib-dropdown>
        <a href class="dropdown-toggle" uib-dropdown-toggle>
          <span class="thumb-sm avatar pull-right">
           <img class="block img-circle" ng-src="{{ user.image_path }}" alt="...">
           <i class="on md b-white bottom"></i>
          </span> {{name}} <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#/setting"></a>
          </li>
          <li>
            <a href="#/profile"></a>
          </li>
          <li>
            <a href="#/help"></a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="container container-exp" ng-click="containerClick($event)"></div>
  <footer>
    <hr />
    <center>2016 XYZ. All Rights reserved.</center>
  </footer>
</body>

</html>
Hide result
+1

Source: https://habr.com/ru/post/1626009/

More articles:


All Articles