如何实现汉堡菜单Hover/Click状态下的白色样式切换

问题描述 #

编程基础薄弱，希望实现汉堡菜单在鼠标Hover（悬停）或Click（点击）时，从当前颜色切换为白色（黑色背景下显示三条白色线条以保证可见性）。尝试添加color: #fff;但未生效，附上相关CSS与JS代码，需要确认CSS是否正确并给出具体实现方案。

提供的CSS代码 #

/* Header */
  .header-wrap #logo {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    font-size: 2em;
    text-align: center;
  }
  .header-wrap #logo #wsite-title {
    font-size: inherit !important;
  }
  .header-wrap .wsite-logo {
    padding: 0 50px;
  }
  .header-wrap .wsite-logo a img {
    max-height: 40px;
  }
  .header-wrap .search {
    display: none;
  }
  .header-wrap .nav-wrap {
    position: fixed;
    display: table;
    background: @shade;
    top: 0;
    left: 0;
    z-index: 15;
    height: 55px;
    -webkit-transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
    -moz-transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
    -ms-transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
    -o-transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
    transition: all 610ms cubic-bezier(0, 0.8, 0.55, 1);
  }
  .header-wrap .nav-wrap ul {
    padding: 0 4em;
  }
  .header-wrap .hamburger {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 30px;
    height: 30px;
    padding: 10px;
    cursor: pointer;
  }
    .header-wrap .hamburger span,
  .header-wrap .hamburger span:before,
  .header-wrap .hamburger span:after {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: @color;
    content: '';
  }
  .header-wrap .hamburger span {
    top: 10px;
    left: 4px;
    margin: 6px 0;
  }
  .header-wrap .hamburger span:before {
    top: -8px;
  }
  .header-wrap .hamburger span:after {
    bottom: -6px;
  }

提供的JS代码 #

jQuery(function($) {

  // Mobile sidebars
  $.fn.expandableSidebar = function(expandedClass) {
    var $me = this;

    $me.on('click', function() {
      if(!$me.hasClass(expandedClass)) {
        $me.addClass(expandedClass);
      } else {
        $me.removeClass(expandedClass);
      }
    });
  }

  var haberdasherController = {
    init: function(opts) {
      var base = this;

      // Add classes to elements
      base._attachEvents();

      setTimeout(function(){
        base._addClasses();
        base._checkCartItems();
      }, 1000);
    },

    _addClasses: function() {
      var base = this;

      // Add placeholder text to inputs
      $('.wsite-form-sublabel').each(function(){
        var sublabel = $(this).text();
        $(this).prev('.wsite-form-input').attr('placeholder', sublabel);
      });

      // Add fullwidth class to gallery thumbs if less than 6
      $('.imageGallery').each(function(){
        if ($(this).children('div').length <= 6) {
          $(this).children('div').addClass('fullwidth-mobile');
        }
      });
    },

    _stickyFooter: function() {
      var stickyFooterMargin = $('#footer-wrap').height();

      $('.wrapper').css('margin-bottom', -stickyFooterMargin);
      $('#footer-wrap, .sticky-footer-push').css('height', stickyFooterMargin);
    },

    _checkCartItems: function() {
      var base = this;

      if($('#wsite-mini-cart').find('li.wsite-product-item').length > 0) {
        $('#wsite-mini-cart').addClass('full');
        base.cartHasItems = true;
      } else {
        $('#wsite-mini-cart').removeClass('full');
        base.cartHasItems = false;
      }
    },

    _attachEvents: function() {
      var base = this;


      $('.hamburger').on('click', function(e) {
        e.preventDefault();
        $('body').toggleClass('nav-open');
      });

      // Pad header on mobile

      setTimeout(function(){
        if($(window).width() < 992) {
          $(".banner-wrap").css({"padding-top" : $(".header-wrap > .nav-wrap").height() + "px"});
        }
      }, 800);

      // Copy login and search to mobile nav
        var login = $("#member-login").clone(true),
          search = $("#wsite-header-search-form").clone(true)
        $("#navmobile .wsite-menu-default").append(login).append(search);


      // Menu text alignment
      if($('.search').is(':empty') || $('.search').css('display') == 'none') {
        $('.menu').css('text-align', 'center');
      }

      // Store category dropdown
      $('.wsite-com-sidebar').expandableSidebar('sidebar-expanded');

      // Search filters dropdown
      $('#wsite-search-sidebar').expandableSidebar('sidebar-expanded');

      // Init fancybox swipe on mobile
      if('ontouchstart' in window) {
        $('body').on('click', 'a.w-fancybox', function() {
          base._initSwipeGallery();
        });
      }

      // Init sticky footer
      if($(window).width() > 992) {
        base._stickyFooter();
      }
    },

    _initSwipeGallery: function() {
      var base = this;

      setTimeout(function(){
        var touchGallery = document.getElementsByClassName('fancybox-wrap')[0];
        var mc = new Hammer(touchGallery);
        mc.on("panleft panright", function(ev) {
          if (ev.type == "panleft") {
            $("a.fancybox-next").trigger("click");
          } else if (ev.type == "panright") {
            $("a.fancybox-prev").trigger("click");
          }
          base._initSwipeGallery();
        });
      }, 500);
    }
  }

  $(document).ready(function(){
    haberdasherController.init();
  });
});

解决方案 #

一、问题根源 #

汉堡菜单的三条线条是通过.hamburger span及其伪元素的background属性设置颜色，而非color属性，所以你添加的color: #fff不会生效，必须修改background值。

二、具体实现代码 #

1. 悬停（Hover）效果

在现有CSS末尾添加以下代码：

/* 汉堡菜单悬停时切换为白色线条 */
.header-wrap .hamburger:hover span,
.header-wrap .hamburger:hover span:before,
.header-wrap .hamburger:hover span:after {
  background: #fff;
}

2. 点击（Click）效果

你的JS代码已经实现了点击汉堡时给body添加/移除nav-open类，直接利用这个类实现点击后的颜色切换：

/* 汉堡菜单点击后（导航展开）切换为白色线条 */
body.nav-open .header-wrap .hamburger span,
body.nav-open .header-wrap .hamburger span:before,
body.nav-open .header-wrap .hamburger span:after {
  background: #fff;
}

三、优化建议（可选） #

给线条添加过渡动画，让颜色切换更平滑：

/* 修改原有线条样式，添加过渡 */
.header-wrap .hamburger span,
.header-wrap .hamburger span:before,
.header-wrap .hamburger span:after {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: @color;
  content: '';
  transition: background 0.3s ease; /* 新增过渡动画 */
}

四、无需修改JS代码 #

你的现有JS已经正确实现了点击汉堡时给body切换nav-open类的逻辑，不需要做任何改动。

内容的提问来源于stack exchange，提问作者MissMana