• 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 work

                this.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.