Question

我正在做一个＆＃34;汉堡＆＃34;菜单，响应式样式，菜单将覆盖查看者所在的页面。

我找到了所有HTML / CSS，但我想添加淡入和淡出效果。

淡入与jquery代码一起使用，但菜单并没有淡出。已经尝试过一些关于SO的想法，但都没有。

有任何帮助吗？ 小提琴：https://jsfiddle.net/f19kz640/

抱歉不好......

HTML

<header>

    <div id="topbar"> <!-- top bar -->

            <div id="nav-icon">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>

        <div id="menu">
            <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Link5</a></li>
            </ul>
        </div>

    </div>

</header>

CSS

body{
  background-color: #000;
}

#menu{
    z-index: 5;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.95);
    position: fixed;
    font-size: 1.5em;
    text-align: center;
    right: 0px;
    top: 0px;
    opacity: 0;
    display: table;
}

.hidden{
    display: none;
    visibility: none;
}

#menu ul{
    margin: 0;
    padding: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

#menu ul li{
    cursor: pointer;
    text-decoration: none;
}

#menu ul li:hover{
    background-color: #006973;
    -webkit-transition: .15s ease-in-out;
    -moz-transition: .15s ease-in-out;
    -o-transition: .15s ease-in-out;
    transition: .15s ease-in-out;
}

#menu ul a{
    letter-spacing: 5px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    list-style: none;
    text-transform: uppercase;
    padding: 0px;
    line-height: 75px;
    padding: 10px 700px;
    text-decoration: none;
}

#menu ul a:hover{
    text-decoration: none;
    color: #fff ;
}

#nav-icon {
    z-index: 20;
  width: 50px;
  height: 35px;
  position: relative;
  margin: 35px 30px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 5px;
  width: 40px;
  background: #bada33;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

/* Icon 3 */

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
  top: 12px;
}

#nav-icon span:nth-child(4) {
  top: 24px;
}

#nav-icon.open span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 8px;
  width: 0%;
  left: 50%;
}

使用Javascript / JQuery的

$(document).ready(function(){
    $('#nav-icon').click(function(){
        $(this).toggleClass('open');
      if($('#menu').css('opacity') == '0'){
        $('#menu').css('opacity','1');
        $('#menu').fadeIn(300).css('display','table');
      }else{
        $('#menu').css('opacity','0');
        $('#menu').fadeOut(300).css('display','none');
      }
    });
});

Answer 1

你可以轻松地简化事情：

$(document).ready(function(){
    $('#nav-icon').click(function(){
        $(this).toggleClass('open');
      $('#menu').fadeToggle(300);
    });
});

Updated Fiddle

没有理由使用不透明度属性或显示属性，它只是jQuery fade()函数的一部分，您只能切换它。

做汉堡菜单淡出工作

1 个答案: