Dropdown menu for floors
-
Hello!
I am trying to change the floors menu and make it a dropdown.
I saw that on mobile, that menu overlaps the map.
I found the js code and the css but I don’t seem to make it workthis.addLevelSwitcher = function() { if (self.data.levels.length > 1) { var control = $('<div></div>').addClass('mapplic-level-switcher'); self.data.levels.forEach(function(level, i) { var button = $('<button></button>').attr('data-level', level.id).text(level.title).prependTo(control).click(function(e) { e.preventDefault(); self.switchLevel(level.id); }); if (level.show) button.addClass('mapplic-selected'); }); this.el.append(control); self.el.on('levelswitched', function(e, target) { $('button', control).removeClass('mapplic-selected'); $('button[data-level="' + target + '"]', control).addClass('mapplic-selected'); }); } }
And here it goes the CSS
/* new switcher */ .mapplic-level-switcher { position: absolute; right: 0; top: 0px; margin: 12px; } .mapplic-level-switcher button { background-color: #f8f8f8; border-radius: 0; color: #888; cursor: pointer; display: block; font-size: 11px; font-weight: 600; line-height: 20px; padding: 4px 10px; text-align: center; user-select: none; width: 100%; border: none; transition: transform 0.2s; position: relative; } .mapplic-level-switcher button:hover { background-color: #f8f8f8; } .mapplic-level-switcher button:focus { outline: none; } .mapplic-level-switcher button.mapplic-selected { box-shadow: 0 0 12px rgba(0, 0, 0, 0.06); background-color: #fff; color: #222; transform: scale(1.15); z-index: 100; }
- The topic ‘Dropdown menu for floors’ is closed to new replies.