RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

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

打开菜单时,内容下移

  • 772

如何使打开菜单时所有内容都向下一点以避免相互重叠?

$(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').fadeOut(500);
        } else {
            $('#menu').fadeIn(500);
        }
        $('#menu').toggleClass('menuOpen');
    });
});
header {
   width: 100%;
   height: 70px;
   background: var(--dark);
}

.menu {
   display: none;
}


.menuItems {
   position: fixed;
   display: block;
   top: 0;
   right: 0;
   left: 0;
   margin-top: 70px;
   background: rgba(1, 0, 1, .25);
   z-index: 10;
   overflow: auto;

}

.menuItem {
   display: block;
   padding: 10px 0;
   text-align: center;
   color: var(--light);
   font-size: 18px;
   transition: all 1s;
   transition-delay: .0s;
   margin: 4px;
   z-index: 11;
}

.menuItem:hover::after,
.menuItem:hover::before {
   position: relative;
   font-size: 22px;
   color: var(--green);
   opacity: .7;
   transition: all 1s;
   transition-delay: .5s;
}

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

.menuIcon a {
   display: block;
}

.menuIcon span,
.menuIcon span::before,
.menuIcon span::after {
   position: absolute;
   top: 69%;
   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(-7px);
}

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

.menuIconActive span {
   height: 0;
}

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

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

.logo {
   position: relative;
   bottom: 37px;
   left: 70px;
}

.logo span {
   color: var(--green);
   font-size: 30px;
   font-weight: 900;
}

.about {
   height: 800px;
   position: relative;
   padding: 40px 10px;
}

.about:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/background.png);
  z-index: -1;
  filter: blur(10px);
}

.wwc {
   display: flex;
   justify-content: center;
}

.wwcTable {
   padding: 20px 20px;
   border: 1px solid var(--light);
   color: var(--light);
   font-size: 22px;
   line-height: 45px;
}
<header>
      <div class="menu" id="menu">
         <div class="menuItems">
            <a href="#" class="menuItem">Главная</a>
            <a href="#" class="menuItem">О нас</a>
            <a href="#" class="menuItem">Контакты</a>
         </div>
      </div>
      <div class="menuIcon">
         <a href="#">
            <span></span>
         </a>
      </div>
      <div class="logo">
         <span>Tesmi</span>
      </div>
   </header>
   <main>
      <div class="about">
         <div class="wwc">
            <div class="wwcTable">
               <ul>
                  <li>Разработка веб-сайтов</li>
                  <li>Дизайн логотипов</li>
                  <li>Разработка продающих текстов</li>
                  <li>Дизайн полиграфии</li>
               </ul>
            </div>
         </div>
      </div>
   </main>

javascript
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    Евгений Иванов
    2020-03-10T16:38:55Z2020-03-10T16:38:55Z

    像这样的东西。只需交换标题中的元素。以“额外”样式注释掉

    固定为您可以使用的移动版本

    $(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').fadeOut(500);
            } else {
                $('#menu').fadeIn(500);
            }
            $('#menu').toggleClass('menuOpen');
        });
    });
    header {
       width: 100%;
       /* height: 70px;*/
       background: var(--dark);
    }
    
    .menu {
       display: none;
    }
    
    
    .menuItems {
       /*position: fixed;*/
       display: block;
       top: 0;
       right: 0;
       left: 0;
       /*margin-top: 70px;*/
       background: rgba(1, 0, 1, .25);
       z-index: 10;
       overflow: auto;
    
    }
    
    .menuItem {
       display: block;
       padding: 10px 0;
       text-align: center;
       color: var(--light);
       font-size: 18px;
       transition: all 1s;
       transition-delay: .0s;
       margin: 4px;
       z-index: 11;
    }
    
    .menuItem:hover::after,
    .menuItem:hover::before {
       position: relative;
       font-size: 22px;
       color: var(--green);
       opacity: .7;
       transition: all 1s;
       transition-delay: .5s;
    }
    
    .menuIcon {
       position: relative;
       width: 50px;
       height: 50px;
       cursor: pointer;
    }
    
    .menuIcon a {
       display: block;
    }
    
    .menuIcon span,
    .menuIcon span::before,
    .menuIcon span::after {
       position: absolute;
       top: 69%;
       margin-top: -1px;
       left: 50%;
       margin-left: -10px;
       width: 20px;
       height: 2px;
       background-color: #000;
    }
    
    .menuIcon span::before,
    .menuIcon span::after {
       content: '';
       display: block;
       transition: .3s;
    }
    
    .menuIcon span::before {
       transform: translateY(-7px);
    }
    
    .menuIcon span::after {
       transform: translateY(7px);
    }
    
    .menuIconActive span {
       height: 0;
    }
    
    .menuIconActive span::before {
       transform: rotate(45deg);
    }
    
    .menuIconActive span::after {
       transform: rotate(-45deg);
    }
    
    .logo {
       position: relative;
       bottom: 37px;
       left: 70px;
    }
    
    .logo span {
       color: var(--green);
       font-size: 30px;
       font-weight: 900;
    }
    
    .about {
       height: 800px;
       position: relative;
       padding: 40px 10px;
    }
    
    .about:before {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: url(../img/background.png);
      z-index: -1;
      filter: blur(10px);
    }
    
    .wwc {
       display: flex;
       justify-content: center;
    }
    
    .wwcTable {
       padding: 20px 20px;
       border: 1px solid var(--light);
       color: var(--light);
       font-size: 22px;
       line-height: 45px;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <header>
          <div class="menuIcon">
             <a href="#">
                <span></span>
             </a>
          </div>
          <div class="logo">
             <span>Tesmi</span>
          </div>
          <div class="menu" id="menu">
             <div class="menuItems">
                <a href="#" class="menuItem">Главная</a>
                <a href="#" class="menuItem">О нас</a>
                <a href="#" class="menuItem">Контакты</a>
             </div>
          </div>
       </header>
       <main>
          <div class="about">
             <div class="wwc">
                <div class="wwcTable">
                   <ul>
                      <li>Разработка веб-сайтов</li>
                      <li>Дизайн логотипов</li>
                      <li>Разработка продающих текстов</li>
                      <li>Дизайн полиграфии</li>
                   </ul>
                </div>
             </div>
          </div>
       </main>

    • 0

相关问题

  • 由于模糊,内容不可见

  • 弹出队列。消息显示不正确

  • 是否可以在 for 循环中插入提示?

  • 如何将 JSON 请求中的信息输出到数据表 Vuetify vue.js?

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