This drop down menu bar will pull up the magic bubbles for whatever point is selected.
Download: horizontalDropDownMagicBubbles.zip
Example:
<div id="wrapper"> <nav class="navSP"> <ul class="ulSP view-superman-value"> {{#items}} <li class="liSP view-superman-value">{{displayName}} <ul class="ulSP"> <div class="view-superman-value status-stale"> {{#subItems}} <li class="liSP" on-click="showName">{{navName}} {{description}}</li> {{/subItems}} </div> </ul> </li> {{/items}} </ul> </nav> </div> |
This sets up the drop down menu
Model
{ data: { items:[], }, oninit: function() { this.on("fooToggle", function(event) { var item = this.get(event.keypath); this.set(event.keypath+ '.foo', !item.foo); console.log(event); }); } } |
This sets up the data and items for the query.
#wrapper { margin: 0 auto; width: 100%; text-align: center; white-space: nowrap; } .navSP { margin: 0 auto; margin-top: 3em; width: 800px; } .navSP .ulSP { text-align: left; clear: both; display: inline; padding: 1em 1em 1em 1em; list-style: none; } .navSP .ulSP .liSP { display: inline-block; margin-right: .01em; position: relative; padding: 1em 3em; } .navSP .liSP { padding-bottom: 1em; text-decoration: none; cursor: pointer; font-size: 14px; padding: 20px; } .navSP .ulSP .liSP .ulSP { padding: 0; position: absolute; top: 3.5em; left: 0; width: 18em; box-shadow: none; display: none; opacity: 0; visibility: hidden; } .navSP .ulSP .liSP .ulSP .liSP { display: block; } .navSP .ulSP .liSP:hover .ulSP { display: block; opacity: 1; visibility: visible; } |
This is the css to style the list
this.ractive.fire('obtainData'); this.ractive.on("showName", function(event) { var item = this.get(event.keypath); if (item) top.app.ShowRelatedBubbles(item.id, item.id, false, event); }); |
obtainData is what connects the Ractive model to the program. The function selectedPointIndex is for the gears and magicB is for the magic bubbles.
var fooTarget = query('query'); this.items = fooTarget.curVal.toObj(); |
This is your program, It sets the query equal to your ractive component