0

我已经开始了，并且有一个可以工作的固定移动菜单，带有 0.4 秒的缓动过渡，也降低了滚动的高度。

到目前为止，一切都是用 CSS 完成的。

我尝试在代码底部添加背景颜色过渡，但该位拒绝为我工作。

目前过渡正在尝试修改 .et_mobile_menu 但是我已经尝试过使 #mobile_menu 和 #et-top-navigation - 都没有效果。

我已经在这几天了，但无济于事。任何关于如何做到这一点的信息都会很棒，已经相当彻底地搜索了论坛。

现场直播：Intech Tools

CSS：

 /** App Style header and Drop Down Menu **/

@media (max-width: 980px) {
 .container.et_menu_container { 
 width: calc( 100% - 60px);
 }
}

.et_mobile_menu {
 margin-left: -30px;
 padding: 5%;
 width: calc( 100% + 60px);
}

.mobile_nav.opened
.mobile_menu_bar:before {
color: #010a32 !important; content: "\4d";
}
/* hamburger text */
span.mobile_menu_bar:before {
color: #010a32 !important; content: "\61";
}

@media all and (max-width: 980px){

  /* FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */
  /* make header fixed */
  .et_header_style_left.et_fixed_nav #main-header {
    position: fixed;
  }
  /* decrease top navigation padding-top */
  .et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 5px;
  }
  /* transition top navigation padding-top */
  .et_header_style_left #et-top-navigation {
        -webkit-transition: padding-top 0.4s ease;
        -o-transition: padding-top 0.4s ease;
        transition: padding-top 0.4s ease;
  }
  /* decrease menu hamburger padding-bottom */
 .et_header_style_left .et-fixed-header .mobile_menu_bar {
    padding-bottom: 5px;
  }
  /* transition menu hamburger padding-bottom */
  .et_header_style_left .mobile_menu_bar {
        -webkit-transition: padding-bottom 0.4s ease;
        -o-transition: padding-bottom 0.4s ease;
        transition: padding-bottom 0.4s ease;
  }
}  
    /* END: FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */

/* Colour Transition Mobile Menu Scroll */
@media all and (max-width: 980px){
  .et_header_style_left .et_fixed_header .et_mobile_menu {
     background-color: #f9c13a !important;
   }
      /* transition menu colour */
  .et_header_style_left .et_mobile_menu {
        -webkit-transition: background-color 0.4s ease;
        -o-transition: background-color 0.4s ease;
        transition: background-color 0.4s ease;
  }
}
4

1 回答 1

0

由 CSS Ninja 解决：
Facebook 组的 Dwayne de Clercq：Wordpress 开发人员和网页设计师。

神奇的 CSS 是：

@media all and (max-width:980px) {
.et-fixed-header#main-header,.et-fixed-header#main-header .et_mobile_menu {
  background-color:#f9c13a!important;
  -webkit-transition:background-color 0.4s ease;
  -o-transition:background-color 0.4s ease;
  transition:background-color 0.4s ease
 }
}

为缩小和变色的固定移动菜单制作最终完整的工作代码：

CSS

 /** App Style header and Drop Down Menu **/

@media (max-width: 980px) {
 .container.et_menu_container { 
 width: calc( 100% - 60px);
 }
}

.et_mobile_menu {
 margin-left: -30px;
 padding: 5%;
 width: calc( 100% + 60px);
}

.mobile_nav.opened
.mobile_menu_bar:before {
color: #010a32 !important; content: "\4d";
}
/* hamburger text */
span.mobile_menu_bar:before {
color: #010a32 !important; content: "\61";
}

@media all and (max-width: 980px){

  /* FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */
  /* make header fixed */
  .et_header_style_left.et_fixed_nav #main-header {
    position: fixed;
  }
  /* decrease top navigation padding-top */
  .et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 5px;
  }
  /* transition top navigation padding-top */
  .et_header_style_left #et-top-navigation {
        -webkit-transition: padding-top 0.4s ease;
        -o-transition: padding-top 0.4s ease;
        transition: padding-top 0.4s ease;
  }
  /* decrease menu hamburger padding-bottom */
 .et_header_style_left .et-fixed-header .mobile_menu_bar {
    padding-bottom: 5px;
  }
  /* transition menu hamburger padding-bottom */
  .et_header_style_left .mobile_menu_bar {
        -webkit-transition: padding-bottom 0.4s ease;
        -o-transition: padding-bottom 0.4s ease;
        transition: padding-bottom 0.4s ease;
  }
}  
/* END: FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */

/* Colour Transition Mobile Menu Scroll */
@media all and (max-width:980px) {
.et-fixed-header#main-header,.et-fixed-header#main-header .et_mobile_menu {
  background-color:#f9c13a!important;
  -webkit-transition:background-color 0.4s ease;
  -o-transition:background-color 0.4s ease;
  transition:background-color 0.4s ease
 }
}
于 2019-09-07T18:27:40.543 回答