javascript - 使用 javascript 和 css 添加另一个导航项

Question

我创建了一个汉堡菜单，并复制了这段代码 https://codepen.io/woodwoerk/pen/BoEGYZ?q=burger+menu&limit=all&type=type-pens .但是在这个例子中，下拉菜单中有三个元素，而在我的网站上有四个。我尝试向下拉列表中添加另一个元素并更改 css 和 js，但是现在我有一个空白区域，可以在其中添加新元素。

Here is what the menu looks like in the browser

不确定如何解决此问题以在下拉列表中显示所有四个元素。下面是我的代码

var Menu = {
    el: {
        menu: $('.menu'),
        menuTop: $('.menu-top'),
	      menuSecond: $('.menu-second'),
        menuClose: $('.menu-close'),
        menuMiddle: $('.menu-middle'),
        menuBottom: $('.menu-bottom'),
        menuText: $('.menu-text')
    },
  
    init: function() {
        Menu.bindUIactions();
    },
  
    bindUIactions: function() {
        Menu.el.menu.on('click', function(event) {
            Menu.activateMenu(event);
            event.preventDefault();
        });
    },
  
    activateMenu: function() {
        Menu.el.menuTop.toggleClass('menu-top-expand expand');
	      Menu.el.menuSecond.toggleClass('menu-second-expand expand');
        Menu.el.menuMiddle.toggleClass('menu-middle-expand expand');
        Menu.el.menuBottom.toggleClass('menu-bottom-expand expand'); 
        Menu.el.menuText.toggleClass('menu-text-expand');
        Menu.el.menuClose.toggleClass('menu-close-visible');
    }
};
  
//Stop menu item click closing the menu
$(".menu .menu-global").click(function(e) {
    e.stopPropagation();
});

Menu.init();

span {
    display: inline-block;
    vertical-align: middle;
    color: white;
}

ul {
    display: block;
    list-style-type: none;
    text-align: right;
}

a {
    color: #FFF;
}
a:hover {
    opacity: 0.7;
}

.menu {
    margin: 0 20px 0 0;
    padding-left: 1.25em;
    cursor: pointer;
    position: relative;
    width: 30px;
    height: 50px;
    text-align: right;
    float:right;
}

.menu-close {
    font-size: 0em;
    opacity: 0;
    text-align: center;
    font-weight: bold;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.menu-close-visible {
    font-size: 2em;
    opacity: 1;
    -webkit-transition: 0.2s 0.4s;
    transition: 0.2s 0.4s;
}

.menu-global {
    z-index: -1;
    position: absolute;
    left: 0;
    height: 10px; 
    width: 100%;
    background-color: #ffffff;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.menu-global:hover {
    left: 10px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.menu-top {
    top: 0;
}
.menu-second {
    top: 18px;
}
.menu-middle {
    top: 36px;
}
.menu-bottom {
    top: 54px;
}

.menu-text{
    opacity: 0;
    font-size: 0em;
    padding: 10px 0;
    -webkit-transition: 0.1s;
    transition: 0.1s;
}

.expand {
    box-shadow: rgba(0, 0, 0, 0.1) -2.5px 5px 7.5px, rgba(0, 0, 0, 0.1) 2.5px 5px 7.5px;
    width: 200px;
    height: 50px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.menu-top-expand {
    top: 50px;
    background: #FFF8E1;
    -webkit-transition: all 0.5s 0.3s, left 0.1s;
    transition: all 0.5s 0.3s, left 0.1s;
}

.menu-second-expand {
    top: 100px;
    background: #FFF8E1;
    -webkit-transition: all 0.5s 0.2s, left 0.1s;
    transition: all 0.5s 0.2s, left 0.1s;
}

.menu-middle-expand {
    top: 150px;
    background: #FFECB3;

    -webkit-transition: all 0.5s 0.1s, left 0.1s;
    transition: all 0.5s 0.1s, left 0.1s;
}

.menu-bottom-expand {
    top: 200px;
    height: 150px;
    background: #FFE082;
    -webkit-transition: all 0.5s, left 0.1s;
    transition: all 0.5s, left 0.1s;
}

.menu-text-expand{
    color: #000000;
    opacity: 0.8;
    padding: 10px;
    font-size: 1.3em;
    -webkit-transition: all 0.2s 0.7s, font-size 0.1s;
    transition: all 0.2s 0.7s, font-size 0.1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<div class="menu-close fa fa-close"></div>
<li class="menu-global menu-top"><span class="menu-text">Home</span></li>
<li class="menu-global menu-second"><span class="menu-text">View Holiday Gallery</span></li>
<li class="menu-global menu-middle"><span class="menu-text">View Itinerary</span></li>
<li class="menu-global menu-bottom"><span class="menu-text">Settings</span></li>
</ul>

Answer 1

如果您要添加另一个菜单元素，您需要确保在代码中添加了所有正确的必需添加项。通过破解它我得到了这个:

首先在html中添加item，以后将其称为bottom2:

<li class="menu-global menu-bottom2"><span class="menu-text">My ExtraElement</span></li>

注意类现在是唯一的:menu-bottom2。这样距顶部的边距将被正确聚合以将其显示在第一个 .menu-bottom 元素下方。

现在为 css 添加:

.menu-bottom2 {
  top: 54px;
}

还有这个:

.menu-bottom2-expand {
  top: 200px;
  background: #FFECB3;

  -webkit-transition: all 0.5s 0.1s, left 0.1s;
          transition: all 0.5s 0.1s, left 0.1s;
}

最后是 javascript:

在 menu.el 中:

menuBottom2: $('.menu-bottom2'),

在 menu.activateMenu 中:

Menu.el.menuBottom2.toggleClass('menu-bottom2-expand expand');

这是完整的代码笔:

• > https://codepen.io/anon/pen/vdKYxb