RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1091005
Accepted
Ram Ce
Ram Ce
Asked:2020-03-05 17:10:12 +0000 UTC2020-03-05 17:10:12 +0000 UTC 2020-03-05 17:10:12 +0000 UTC

返回媒体查询动作

  • 772

我写了一个小的自适应菜单脚本,当屏幕宽度小于 999px 时,菜单消失并出现一个图标来打开这个菜单。但是如果你把它隐藏在一个小屏幕尺寸,然后增加浏览器尺寸(也就是让它大于999px),菜单就不会出现回来,希望我解释清楚。请帮助解决这个问题

$(document).ready(function() {
    var menuIcon = $('.menuIcon');
    menuIcon.on('click', function(e){
        e.preventDefault;
        $(this).toggleClass('menuIconActive');
    });
    menuIcon.on('click', function(){
        $('#menu').toggleClass('menuOpen');
        if($('#menu').hasClass('menuOpen')){
            $('#menu').fadeIn(500);
        } else {
            $('#menu').fadeOut(500);
        }
    });
    if ($(window).width() >= '999') {
        $('#menu').css(display, flex);
    }
});
header {
   width: 100%;
   height: 70px;
   background: var(--dark);
}

.menuItems {
display: flex;
justify-content: space-around;
}

.menuItem {
   display: inline-block;
   text-transform: uppercase;
}

.menuIcon {
   display: none;
   position: relative;
   width: 50px;
   height: 50px;
   cursor: pointer;
}

.menuIcon a {
   display: block;
}

.menuIcon span,
.menuIcon span::before,
.menuIcon span::after {
   position: absolute;
   top: 50%;
   margin-top: -1px;
   left: 50%;
   margin-left: -10px;
   width: 20px;
   height: 2px;
   background-color: var(--light);
}

.menuIcon span::before,
.menuIcon span::after {
   content: '';
   display: block;
   transition: .3s;
}

.menuIcon span::before {
   transform: translateY(-5px);
}

.menuIcon span::after {
   transform: translateY(5px);
}

.menuIconActive span {
   height: 0;
}

.menuIconActive span::before {
   transform: rotate(45deg);
}

.menuIconActive span::after {
   transform: rotate(-45deg);
}

@media screen and (max-width:999px) {
   .menu {
      display: none;
   }

   .menuIcon {
      display: inline-block;
   }

   .menuItems {
      position: fixed;
      display: block;
      top: 0;
      right: 0;
      left: 0;
      margin-top: 52px;
      background-color: var(--mainColor);
      z-index: 1000;
      overflow: auto;
   }

   .menuItem {
      display: block;
      padding: 10px 0;
      text-align: center;
      color: var(--light);
   }
}

.menuOpen .menuItem {
   display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<header>
      <div class="menu" id="menu">
         <div class="menuItems">
            <a href="#" class="menuItem">Главная</a>
            <a href="#" class="menuItem">Наша команда</a>
            <a href="#" class="menuItem">Приемущества</a>
            <a href="#" class="menuItem">Связь с нами</a>
         </div>
      </div>

      <!-- Mobile menu icon -->
      <div class="menuIcon">
         <a href="#">
            <span></span>
         </a>
      </div>
   </header>

html
  • 2 2 个回答
  • 10 Views

2 个回答

  • Voted
  1. Best Answer
    Denis640Kb
    2020-03-05T22:51:25Z2020-03-05T22:51:25Z

    您需要跟踪窗口的大小,并相应地检查宽度。
    最好使用参数block而不是flex,这样它们就不会合并为一个单词。
    例子:

        $(document).ready(function() {
            var menuIcon = $('.menuIcon');
            menuIcon.on('click', function(e){
                e.preventDefault;
                $(this).toggleClass('menuIconActive');
            });
            menuIcon.on('click', function(){
                if($('#menu').hasClass('menuOpen')){
                    $('#menu').fadeIn(500);
                } else {
                    $('#menu').fadeOut(500);
                }
                $('#menu').toggleClass('menuOpen');
            });
            $(window).resize(function () {
                if ($(window).width() >= '999') {
                    $('#menu').css('display', 'block');
                }
            })
        });
        header {
            width: 100%;
            height: 70px;
            background: var(--dark);
        }
    
        .menuItems {
            display: flex;
            justify-content: space-around;
        }
    
        .menuItem {
            display: inline-block;
            text-transform: uppercase;
        }
    
        .menuIcon {
            display: none;
            position: relative;
            width: 50px;
            height: 50px;
            cursor: pointer;
        }
    
        .menuIcon a {
            display: block;
        }
    
        .menuIcon span,
        .menuIcon span::before,
        .menuIcon span::after {
            position: absolute;
            top: 50%;
            margin-top: -1px;
            left: 50%;
            margin-left: -10px;
            width: 20px;
            height: 2px;
            background-color: var(--light);
        }
    
        .menuIcon span::before,
        .menuIcon span::after {
            content: '';
            display: block;
            transition: .3s;
        }
    
        .menuIcon span::before {
            transform: translateY(-5px);
        }
    
        .menuIcon span::after {
            transform: translateY(5px);
        }
    
        .menuIconActive span {
            height: 0;
        }
    
        .menuIconActive span::before {
            transform: rotate(45deg);
        }
    
        .menuIconActive span::after {
            transform: rotate(-45deg);
        }
    
        @media screen and (max-width:999px) {
            .menu {
                display: none;
            }
    
            .menuIcon {
                display: inline-block;
            }
    
            .menuItems {
                position: fixed;
                display: block;
                top: 0;
                right: 0;
                left: 0;
                margin-top: 52px;
                background-color: var(--mainColor);
                z-index: 1000;
                overflow: auto;
            }
    
            .menuItem {
                display: block;
                padding: 10px 0;
                text-align: center;
                color: var(--light);
            }
        }
    
        .menuOpen .menuItem {
            display: block;
        }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <header>
        <div class="menu" id="menu">
            <div class="menuItems">
                <a href="#" class="menuItem">Главная</a>
                <a href="#" class="menuItem">Наша команда</a>
                <a href="#" class="menuItem">Приемущества</a>
                <a href="#" class="menuItem">Связь с нами</a>
            </div>
        </div>
    
        <!-- Mobile menu icon -->
        <div class="menuIcon">
            <a href="#">
                <span>123</span>
            </a>
        </div>
    </header>

    • 2
  2. fanfer
    2020-03-05T17:16:49Z2020-03-05T17:16:49Z

    $(document).ready(function() {
      function someFunc() {
        var menuIcon = $('.menuIcon');
        menuIcon.on('click', function(e) {
          e.preventDefault;
          $(this).toggleClass('menuIconActive');
        });
        menuIcon.on('click', function() {
          $('#menu').toggleClass('menuOpen');
          if ($('#menu').hasClass('menuOpen')) {
            $('#menu').fadeIn(500);
          } else {
            $('#menu').fadeOut(500);
          }
        });
        if ($(window).width() >= '999') {
          $('#menu').css(display, flex);
        }
      }
      someFunc();
    
      $(window).resize(function() {
        someFunc();
      })
    });
    header {
      width: 100%;
      height: 70px;
      background: var(--dark);
    }
    
    .menuItems {
      display: flex;
      justify-content: space-around;
    }
    
    .menuItem {
      display: inline-block;
      text-transform: uppercase;
    }
    
    .menuIcon {
      display: none;
      position: relative;
      width: 50px;
      height: 50px;
      cursor: pointer;
    }
    
    .menuIcon a {
      display: block;
    }
    
    .menuIcon span,
    .menuIcon span::before,
    .menuIcon span::after {
      position: absolute;
      top: 50%;
      margin-top: -1px;
      left: 50%;
      margin-left: -10px;
      width: 20px;
      height: 2px;
      background-color: var(--light);
    }
    
    .menuIcon span::before,
    .menuIcon span::after {
      content: '';
      display: block;
      transition: .3s;
    }
    
    .menuIcon span::before {
      transform: translateY(-5px);
    }
    
    .menuIcon span::after {
      transform: translateY(5px);
    }
    
    .menuIconActive span {
      height: 0;
    }
    
    .menuIconActive span::before {
      transform: rotate(45deg);
    }
    
    .menuIconActive span::after {
      transform: rotate(-45deg);
    }
    
    @media screen and (max-width:999px) {
      .menu {
        display: none;
      }
      .menuIcon {
        display: inline-block;
      }
      .menuItems {
        position: fixed;
        display: block;
        top: 0;
        right: 0;
        left: 0;
        margin-top: 52px;
        background-color: var(--mainColor);
        z-index: 1000;
        overflow: auto;
      }
      .menuItem {
        display: block;
        padding: 10px 0;
        text-align: center;
        color: var(--light);
      }
    }
    
    .menuOpen .menuItem {
      display: block;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <header>
      <div class="menu" id="menu">
        <div class="menuItems">
          <a href="#" class="menuItem">Главная</a>
          <a href="#" class="menuItem">Наша команда</a>
          <a href="#" class="menuItem">Приемущества</a>
          <a href="#" class="menuItem">Связь с нами</a>
        </div>
      </div>
    
      <!-- Mobile menu icon -->
      <div class="menuIcon">
        <a href="#">
          <span></span>
        </a>
      </div>
    </header>

    • 0

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    如何从列表中打印最大元素(str 类型)的长度?

    • 2 个回答
  • Marko Smith

    如何在 PyQT5 中清除 QFrame 的内容

    • 1 个回答
  • Marko Smith

    如何将具有特定字符的字符串拆分为两个不同的列表?

    • 2 个回答
  • Marko Smith

    导航栏活动元素

    • 1 个回答
  • Marko Smith

    是否可以将文本放入数组中?[关闭]

    • 1 个回答
  • Marko Smith

    如何一次用多个分隔符拆分字符串?

    • 1 个回答
  • Marko Smith

    如何通过 ClassPath 创建 InputStream?

    • 2 个回答
  • Marko Smith

    在一个查询中连接多个表

    • 1 个回答
  • Marko Smith

    对列表列表中的所有值求和

    • 3 个回答
  • Marko Smith

    如何对齐 string.Format 中的列?

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5