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 中添加项目，然后从现在开始将其称为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

使用javascript和css

1 个答案: