Angular ui et bootstrap

Barbusan
Javascript

Bonjour à tous

J'aimerais arriver à faire le même système de menu que sur ce site :
http://themicon.co/theme/angle/v2.4/backend-angular/#/app/dashboard

Dans le sens ou au clic sur l'icone menu, le menu se rétracte (ou s'aggrandi en fonction de l'état en cours), et les éléments à l'intérieur change également.

Ma contrainte étant que je dois utiliser uniquement angular ui et bootstrap.

J'ai déjà essayer avec les ngStyle mais je ne vois pas comment exécuter des actions/modifications de css en cascade sur différents éléments en même temps.

Pouvez-vous m'aiguiller ?

Merci d'avance

2 réponses

brokleen

Pour l'exemple tu n'as pas besoin de bootstrap ou de angular.
Je pense quelque chose dans ce style:

<div class="menu">
    <ul>
        <li>
            <a href="">
                <i>Mon icone</i>
                <span>Le titre de mon menu</span>           
            </a>
            <ul class="dropdown">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li>
            <a href="">
                <i>Mon icone</i>
                <span>Le titre de mon menu</span>           
            </a>
        </li>
    </ul>
</div>

Tu mets un display none sur les éléments non visible pour "l'état fermé" et une petite largeur pour le menu . Tu fais un event en javascript lorsque l'utilisateur clique sur l'icone menu. Ensuite c'est assez basique tu agrandis le menu, tu passes les éléments en display none en display block et voilà.

Barbusan
Auteur

Salut et merci pour ton approche.
Je vais devoir utiliser angular ui bootstrap pour une application, et c'est dans le rfp.

En gros voici ce que j'ai fais mais je suis pas satisfait et imagine bien que l'on peut faire plus opti/efficace.

Depuis le menu.png :

        <div class="menu-slide">

            <img src="img/menu.png" alt="show-hide menu" class="menu-size" ng-click="styleMenu={width:'50px'}; styleElem={display:'none'}">
        </div>

Et le menu avec ses accordionUI :


<div class="menu-show" ng-style="styleMenu">
<nav ng-controller="AccordionCtrl">
            <accordion close-others="oneAtATime">
                <accordion-group>
                    <accordion-heading>
                    <span ng-style="styleElem">funds</span><img src="img/icones/funds.png" class="icone-item">
                    </accordion-heading>
                    <div class="portfolios-detail">
                        <div class="section-detail">
                            <div class="title-detail">saved searches</div>
                            <div class="title-detail-param"><img src="img/icones/settings.png" alt=""></div>
                        </div>
                        <div class="section-detail-item">
                            <span>fund search 1</span>
                            <span>fund search 2</span>
                            <span>fund search 3</span>
                        </div>
                        <div class="section-detail">
                            <div class="title-detail">favorites funds</div>
                            <div class="title-detail-param"><img src="img/icones/settings.png" alt=""></div>
                        </div>
                        <div class="section-detail-item">
                            <span>favorites funds 1</span>
                            <span>favorites funds 2</span>
                            <span>favorites funds 3</span>
                        </div>
                    </div>
                </accordion-group>
                <accordion-group>
                    ...
                    ....
                    ....
                </accordion-group>
                </accordion>
        </nav>```

Cette solution fonctionne, mais je ne sais pas comment gérer une condition sur un ng-click, notamment pour faire le "retour", ni même gérer plus état.