Title: Dropdown menu for floors
Last modified: August 25, 2022

---

# Dropdown menu for floors

 *  [dragosbdg](https://wordpress.org/support/users/dragosbdg/)
 * (@dragosbdg)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/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 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.

 * ![](https://s.w.org/plugins/geopattern-icon/mapplic-lite_31372d.svg)
 * [Mapplic Lite](https://wordpress.org/plugins/mapplic-lite/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/mapplic-lite/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/mapplic-lite/)
 * [Active Topics](https://wordpress.org/support/plugin/mapplic-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/mapplic-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/mapplic-lite/reviews/)

 * 0 replies
 * 1 participant
 * Last reply from: [dragosbdg](https://wordpress.org/support/users/dragosbdg/)
 * Last activity: [3 years, 7 months ago](https://wordpress.org/support/topic/dropdown-menu-for-floors/)
 * Status: not resolved