Drop Down Navigation

[sbaik]

Hello,

I know this is very elementary, but I cannot figure it out. I have searched and tried couple of different CSS and HTML following some tutorial and it results in a list with offset bullets.

I am wanting a button that drops down list of buttons. For example, a button that says "Flouride" and when clicked on, drops "West Plant Flouride" and "East Plant Flouride"

Some help would be greatly appreciated.

Thanks in advance.

[ThomasEinasto]

Hi @sbaik !

If you use dashboards then easiest would be something like that

    <div ng-init="flouride = false"  ng-show="flouride === false">
    <md-button ng-click="flouride = true">
    Flouride
    </md-button>
    </div>
    
    <div ng-show="flouride === true">
    <md-button>
    West Plant Flouride
    </md-button>
    <md-button>
    East Plant Flouride
    </md-button>
    </div>

First div is only shown when the first md-button is clicked and after that the two buttons are shown. Variable flouride is in angular $scope and only valid until user goes away from the page.

ref https://docs.angularjs.org/api/ng/directive/ngShow

Thomas

[sbaik]

@thomaseinasto said in Drop Down Navigation:

ng-click="flouride = true"

I was able to piece some stuff together using what you provided and achieve what I wanted.

Thank you for the quick help!

[sbaik]

Actually, another question regarding this after implementing it. Here is what I ended up with. I took away the part where it makes the original button disappear and made it a mouse over instead of click. The thing is that the 2 new populated buttons stay unless the page refreshes, or if I use them to navigate. Could I make it time out say after 5 seconds or so? Am I overthinking this? I used a ng-mouseleave and it just flips out and blinks.

Thanks,

    <div ng-init="flouride = false">
<ma-button ng-click="flouride = true" raised="true" style="position: absolute; left: 1484px; top: 6px;" palette="primary" label="Flouride"></ma-button>
    </div>
    <div ng-show="flouride === true">
<ma-button style="position: absolute; left: 1476px; top: 6px; background-color: rgb(0, 128, 255, 0.9);" ui-sref="flourideWest" label="West Flouride"></ma-button>
<ma-button style="position: absolute; left: 1477px; top: 56px; background-color: rgb(0, 128, 255, 0.9);" ui-sref="flourideEast" label="East  Flouride"></ma-button>
    </div>

[MattFox]

@sbaik said in Drop Down Navigation:

SS and HTML following some tutorial and it results in a list with offset bullets.

If you're going to go down that route, ensure your css has:

<style>
li
{
list-style:none;
}
</style>

The beauty of having ng-click events mapped to menu over items is because then you can make your screen compatible with touch devices. ie open menu, close menu.

This is a bit of a hack but keep things simple and utilise the tools already provided:

 <!-- Trigger element is a md-button  -->
 <md-menu>
 <ma-button ng-click="$mdMenu.open($event)" class="md-icon-button"label="FLUORIDE" aria-label=FLUORIDE">
 </ma-button>
 <md-menu-content md-menu-align-target="bottom">
   <md-menu-item>
   <ma-button style="background-color: rgb(0, 128, 255, 0.9);" ui-sref="flourideWest" label="West Fluoride"></ma-button></md-menu-item>
<md-menu-item><ma-button style="background-color: rgb(0, 128, 255, 0.9);" ui-sref="flourideEast" label="East Fluoride"></ma-button></md-menu-item>
 </md-menu-content>
</md-menu>
</div>
<style>
    .md-open-menu-container.md-active{
  margin-top: 45px !important;
}
</style>

it's a click to open, simple click off or on the menu button itself to close it.

[sbaik]

@mattfox Thank you for taking your time for that!

[MattFox]

Anytime, always here to assist.