Pytanie Responsywny rozwijany pasek nawigacyjny z ustawieniem początkowym (wykonanym we właściwym kanciastym rodzaju)


Stworzyłem JSFiddle z rozwijanym navbarem za pomocą modułu kątowego-ui-boostrap "ui.bootstrap.dropdownToggle": http://jsfiddle.net/mhu23/2pmz5/

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container"> <a class="brand" href="#">
                My Responsive NavBar
            </a>

        <ul class="nav">
            <li class="divider-vertical"></li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle">
                        Menu 1 <b class="caret"></b>
                    </a>

                <ul class="dropdown-menu">
                    <li><a href="#/list">Entry 1</a>
                    </li>
                    <li><a href="#/list">Entry 2</a>
                    </li>
                </ul>
            </li>
          ....
        </ul>
    </div>
</div>
</div>

O ile rozumiem, jest to właściwy, kanciasty sposób na wdrożenie takiego rozwijanego menu. "Zły" sposób, pod względem angularjs, miałby obejmować bootstrap.js i użycie "data-toggle =" dropdown "... Czy jestem tutaj?

Teraz chciałbym dodać responsywne zachowanie do mojego navbara, jak to zrobiono w następującym Fiddle: http://jsfiddle.net/ghtC9/6/

ALE, jest coś, czego nie lubię w powyższym rozwiązaniu. Ten facet zawierał bootstrap.js!

Jaki byłby odpowiedni kątowy sposób dodawania responsywnego zachowania do mojego istniejącego paska nawigacyjnego?

Oczywiście potrzebuję użyć responsywnych klas navbarów takich jak "nav-collapse collapse navbar-responsive-collapse". Ale nie wiem jak ...

Byłbym wdzięczny za twoją pomoc!

Z góry dziękuję! Michał


76
2018-04-28 22:18


pochodzenie




Odpowiedzi:


Możesz to zrobić za pomocą dyrektywy "zwijanie": http://jsfiddle.net/iscrow/Es4L3/ (sprawdź dwie "Uwaga" w HTML).

        <!-- Note: set the initial collapsed state and change it when clicking -->
        <a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Title</a>
           <!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
           <div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
              <ul class="nav">

Oznacza to, że musisz zapisać stan zwinięty w zmiennej i zmienić zwinięty również przez (po prostu) zmianę wartości tej zmiennej.


Wersja 0.14 dodano a uib- przedrostek do komponentów:

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes

Zmiana: collapse do uib-collapse.


57
2018-05-06 14:14



Nie wydaje się, aby odpowiedzieć bezpośrednio na to pytanie - mówi o rozwijanym przycisku w pasku nawigacyjnym i mówisz o zwijaniu całego navbara. Czy czegoś brakuje? - PW Kad
Skrzypce już nie działa? - Andy
Dzięki człowieku, spędziłem dużo czasu próbując dowiedzieć się, dlaczego proste składane menu nie działa - Ignacio Vazquez
Osobiście nie sądzę, że uib-collapse to niewłaściwy sposób na przejście na pasek nawigacyjny. Wolałbym użyć rozwijania uib. - jae.phoenix


Zaktualizuj 2015-06

Oparte na antoinepairet's comment / example:

Za pomocą uib-collapse atrybut zapewnia animacje: http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview 

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">

        <!-- note the ng-init and ng-click here: -->
        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" uib-collapse="navCollapsed">
        <ul class="nav navbar-nav">
        ...
        </ul>
    </div>
</nav>

Starożytny..

Widzę, że pytanie jest sformułowane wokół BS2, ale pomyślałem, że wpadnę na rozwiązanie dla Bootstrap 3, używając rozwiązania klasy ng opartego na sugestiach ui.bootstrap problem 394:

Jedyna zmiana od oficjalny przykład bootstrapu jest dodanie ng- atrybuty odnotowane przez komentarze poniżej:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">

    <!-- note the ng-init and ng-click here: -->
    <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- note the ng-class here -->
  <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">

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

Oto zaktualizowany przykład roboczy: http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (wskazówka kapeluszowa Lars)

Wydaje się, że działa to dla mnie w prostych przypadkach, ale zauważysz w przykładzie, że drugie menu jest wyłączone ... Powodzenia!


123
2017-10-11 10:45



Zamiast klasy ng powinieneś użyć "collapse =" navCollapsed "". ponieważ twoja wersja nie robi żadnej animacji - bernhardh
Kolejne ulepszenie: dodaj ng-click = "navCollapsed = true" do ostatniego div fragmentu kodu, aby menu rozwijane zwijało się po wybranym elemencie. - Lars Behnke
@streetlogics Powinno być "navCollapsed", przegapiłeś tam "d" - PSWai
Nie edytowałem w czasie, ale się zmieniłem <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}"> do <div collapse="navCollapsed"> i przejście działało! - edhedges
Muszę tu czegoś pomijać, ale czy to rozwiązanie nie powoduje, że wersja menu menu jest zwinięta i niedostępna, zważywszy na ukryty przełącznik na pasku nawigacyjnym? Nawet z aktualizacjami z komentarzy tak się dzieje.


Nie jestem pewien, czy ktoś ma ten sam problem, ale to było po prostu proste rozwiązanie dla mnie.

ten sam przykład

...  ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
...  div collapse="isCollapsed"> ...

z

@media screen and (min-width: 768px) {
    .collapse{
        display: block !important;
    }
}

8
2018-01-13 22:01



Powinieneś poprzedzać selektor .collapse identyfikatorem nav, aby nie skręcał każdego zwinięcia na stronie - NiloVelez


Moje solwety dla navbetu responsywnego / dropdown za pomocą funkcji arcular-ui bootstrap (przy aktualizacji do kąta 1.5 i, ui-bootrap 1.2.1)
index.html 

     ...    
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>


<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <input type="checkbox" id="navbar-toggle-cbox">
            <div class="navbar-header">
                <label for="navbar-toggle-cbox" class="navbar-toggle" 
                       ng-init="navCollapsed = true" 
                       ng-click="navCollapsed = !navCollapsed"  
                       aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </label>
                <a class="navbar-brand" href="#">Project name</a>
                 <div id="navbar" class="collapse navbar-collapse"  ng-class="{'in':!navCollapsed}">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/view1">Home</a></li>
                        <li><a href="/view2">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li uib-dropdown>
                            <a href="#" uib-dropdown-toggle>Dropdown <b class="caret"></b></a>
                            <ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
                                <li role="menuitem"><a href="#">Action</a></li>
                                <li role="menuitem"><a href="#">Another action</a></li>                                   
                            </ul>
                        </li>

                    </ul>
                 </div>
            </div>
        </div>
    </nav>

app.css

/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
    display: block;
}

/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
  display:none
}

1
2018-03-02 09:24