Question

我正在尝试在桌面上更改Flexnav's视觉行为，对于我正在构建的网站而言。默认情况下，在桌面宽度浏览器上，将鼠标悬停在具有子菜单的li上会播放子菜单，如下所示：

桌面： enter image description here

移动：

enter image description here

我想知道是否有可能改变它，所以当我将鼠标悬停在桌面上的任何li或整个ul上同时保持移动设备的多级菜单行为时，子菜单会出现如下：

enter image description here

这是我的测试服务器上的网站： website

这是HTML：

<div class="main-nav">
    <section>
      <div class="mobile-nav">
        <a class="menu-button"></a>
        <div class="top-contact">
          <a href="signin.html" class="button">Your Account</a>
          <a href="#" class="cart"><img src="img/icons/shopping.svg" alt=""> (0)</a>
        </div>
      </div>
      <nav>
        <ul class="flexnav" data-breakpoint="800">
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li>
              <a href="services.html" aria-haspopup="true">Services</a>
              <ul>
                  <li><a href="services.html">Dashboard</a></li>
                  <li><a href="utilities.html">Market Place</a></li>
                  <li><a href="propertysearch.html">Property Search</a></li>
              </ul>
          </li>
          <li><a href="blog.html">Blog</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </section>
  </div>

CSS：

.flexnav {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  transition: none;
  -webkit-transform-style: preserve-3d; // stop webkit flicker
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  max-height: 0;
  padding: 0;

  &.opacity {
    opacity: 0;
  }

  &.flexnav-show {
    max-height: 2000px;
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
  }
  &.one-page {
    position: fixed;
    top: 50px;
    right: 5%;
    max-width: 200px;
  }

  li {
    font-size: 100%;
    position: relative;
    overflow: hidden;
  }
  li a {
    position: relative;
    display: block;
    padding: .51em;
    z-index: 2;
    overflow: hidden;
    color: $black;
    background: $cream;
    border-bottom: 1px solid rgba(0,0,0,.15);
    font-weight: 400;
  }
  li ul {
    width: 100%;   

    li {
      font-size: 100%;
      position: relative;
      overflow: hidden;   
    }
  }
  li ul.flexnav-show {
    li {
      overflow: visible;
    }
  } 

  li ul li a {
    display: block;
    background: darken($cream, 10%);
  }

  .touch-button {
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    display: inline-block;
    background: darken($cream, 10%);
    text-align: center;
    &:hover {
      cursor: pointer;
    }
    .navicon {
      position: relative;
      top: 22%;
      color: #666;
    }
  }
}

.menu-button {
  display: block;
  margin: .5em;
  margin-left: -3px;
  width: 2em;
  cursor: pointer;
  height: 2em;
  float: left;
  background: url(../img/open.svg) center center no-repeat;

  &.active {
    background: url(../img/x.svg) center center no-repeat;
  }

  .touch-button {
    display: none;
  } 
}

@include at-breakpoint($medium) {
  body.one-page {
    padding-top: 70px;
  }
  .flexnav {
    overflow: visible;
    &.opacity {
      opacity: 1;
    }
    &.one-page {
      top: 0;
      right: auto;
      max-width: 1080px;
    }
    li {
      position: relative;
      list-style: none;
      float: left;
      display: block; 
      overflow: visible;
      width: 20%;
    }
    li a {
      border-bottom: none;
      background-color: $navy;
      color: $white;
      &:hover, &:focus {
        background: darken($navy, 10%);
      }
    }
    li > ul {
      position: absolute; 
      top: auto;
      left: 0;

      li {
        width: 100%;
        display: inline-block;
      }
    }
    li ul li > ul {
      margin-left: 100%;
      top: 0;
    }
    li ul li:hover > ul,
    li ul li > ul.flexnav-show {
    }   
    li ul li a {
      border-bottom: none;
      background: darken($navy, 10%);
    }
    li ul.open {
      display: block;
      opacity: 1;
      visibility: visible;
      z-index: 1;
      li {
        overflow: visible;
        max-height: 100px;
      } 
      ul.open {
        margin-left: 100%;
        top: 0;
      }
    }
    .touch-button {
      background: darken($navy, 10%);
    }
  }
  .menu-button {
    display: none;
  }
}

jQuery的：

(function() {
var $;

  $ = jQuery;

  $.fn.flexNav = function(options) {
    var $nav, $top_nav_items, breakpoint, count, nav_percent, nav_width, resetMenu, resizer, settings, showMenu, toggle_selector, touch_selector;
    settings = $.extend({
      'animationSpeed': 250,
      'transitionOpacity': true,
      'buttonSelector': '.menu-button',
      'hoverIntent': false,
      'hoverIntentTimeout': 150,
      'calcItemWidths': false,
      'hover': true
    }, options);
    $nav = $(this);
    $nav.addClass('with-js');
    if (settings.transitionOpacity === true) {
      $nav.addClass('opacity');
    }
    $nav.find("li").each(function() {
      if ($(this).has("ul").length) {
        return $(this).addClass("item-with-ul").find("ul").hide();
      }
    });
    if (settings.calcItemWidths === true) {
      $top_nav_items = $nav.find('>li');
      count = $top_nav_items.length;
      nav_width = 100 / count;
      nav_percent = nav_width + "%";
    }
    if ($nav.data('breakpoint')) {
      breakpoint = $nav.data('breakpoint');
    }
    showMenu = function() {
      if ($nav.hasClass('lg-screen') === true && settings.hover === true) {
        if (settings.transitionOpacity === true) {
          return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({
            height: ["toggle", "swing"],
            opacity: "toggle"
          }, settings.animationSpeed);
        } else {
          return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({
            height: ["toggle", "swing"]
          }, settings.animationSpeed);
        }
      }
    };
    resetMenu = function() {
      if ($nav.hasClass('lg-screen') === true && $(this).find('>ul').hasClass('flexnav-show') === true && settings.hover === true) {
        if (settings.transitionOpacity === true) {
          return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({
            height: ["toggle", "swing"],
            opacity: "toggle"
          }, settings.animationSpeed);
        } else {
          return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({
            height: ["toggle", "swing"]
          }, settings.animationSpeed);
        }
      }
    };
    resizer = function() {
      var selector;
      if ($(window).width() <= breakpoint) {
        $nav.removeClass("lg-screen").addClass("sm-screen");
        if (settings.calcItemWidths === true) {
          $top_nav_items.css('width', '100%');
        }
        selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
        $(selector).removeClass('active');
        return $('.one-page li a').on('click', function() {
          return $nav.removeClass('flexnav-show');
        });
      } else if ($(window).width() > breakpoint) {
        $nav.removeClass("sm-screen").addClass("lg-screen");
        if (settings.calcItemWidths === true) {
          $top_nav_items.css('width', nav_percent);
        }
        $nav.removeClass('flexnav-show').find('.item-with-ul').on();
        $('.item-with-ul').find('ul').removeClass('flexnav-show');
        resetMenu();
        if (settings.hoverIntent === true) {
          return $('.item-with-ul').hoverIntent({
            over: showMenu,
            out: resetMenu,
            timeout: settings.hoverIntentTimeout
          });
        } else if (settings.hoverIntent === false) {
          return $('.item-with-ul').on('mouseenter', showMenu).on('mouseleave', resetMenu);
        }
      }
    };
    $(settings['buttonSelector']).data('navEl', $nav);
    touch_selector = '.item-with-ul, ' + settings['buttonSelector'];
    $(touch_selector).append('<span class="touch-button"><i class="navicon">&#9660;</i></span>');
    toggle_selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
    $(toggle_selector).on('click', function(e) {
      var $btnParent, $thisNav, bs;
      $(toggle_selector).toggleClass('active');
      e.preventDefault();
      e.stopPropagation();
      bs = settings['buttonSelector'];
      $btnParent = $(this).is(bs) ? $(this) : $(this).parent(bs);
      $thisNav = $btnParent.data('navEl');
      return $thisNav.toggleClass('flexnav-show');
    });
    $('.touch-button').on('click', function(e) {
      var $sub, $touchButton;
      $sub = $(this).parent('.item-with-ul').find('>ul');
      $touchButton = $(this).parent('.item-with-ul').find('>span.touch-button');
      if ($nav.hasClass('lg-screen') === true) {
        $(this).parent('.item-with-ul').siblings().find('ul.flexnav-show').removeClass('flexnav-show').hide();
      }
      if ($sub.hasClass('flexnav-show') === true) {
        $sub.removeClass('flexnav-show').slideUp(settings.animationSpeed);
        return $touchButton.removeClass('active');
      } else if ($sub.hasClass('flexnav-show') === false) {
        $sub.addClass('flexnav-show').slideDown(settings.animationSpeed);
        return $touchButton.addClass('active');
      }
    });
    $nav.find('.item-with-ul *').focus(function() {
      $(this).parent('.item-with-ul').parent().find(".open").not(this).removeClass("open").hide();
      return $(this).parent('.item-with-ul').find('>ul').addClass("open").show();
    });
    resizer();
    return $(window).on('resize', resizer);
  };

}).call(this);

Answer 1

最好使用CSS媒体查询来执行您想要的操作，您必须使用类似下面的代码覆盖插件代码才能执行此操作：

/* desktop */
@media screen and (min-width: 720px) {
    width:100%;
}

/* mobile */
@media screen and (max-width: 720px) {
    width:200px;
}

你必须自己玩，或至少设置一个我们可以玩它的环境（例如在jsfiddle中）。

您最有可能遇到的问题是“位置：相对;”在顶级列表项上使用。我还没有查看代码，但我认为列表项宽度很可能是100％开始，但它可能使用它的父亲的相对宽度。为了克服这个问题，您可能必须删除该相对css属性，以便您的“100％”不会转到它的父级（顶级列表项），而是相对于100％全宽包装元素

希望这会有所帮助，如果您感到困惑，请告诉我。

Flexnav桌面视图

1 个答案: