Question

我正在使用flexnav jquery插件。我得到了它的工作，但列表没有排队。见附图。我不知道为什么它这样做，因为我没有以任何方式改变代码但是它在正确排列的演示站点上。以下是github上的css源代码的链接：https://raw.githubusercontent.com/indyplanets/flexnav/master/css/flexnav.css

我试过改变位置属性。我无法找到解决问题的方法。我此时基本上都输了。如果有人可以帮我解决这个问题，我会很感激。

flexnav插件位于http://jasonweaver.name/lab/flexiblenavigation/，页面上有一个演示。

enter image description here

＆＃13;

/*
    	FlexNav.js 1.3.3
    
    	Created by Jason Weaver http://jasonweaver.name
    	Released under http://unlicense.org/
    
    //
    */


(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"><span class="navicon">&vellip;</span></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);

＆＃13;

/* Flexnav Base Styles */

* {
  list-style: none;
  list-style-type: none;
  text-decoration: none;
}
.flexnav {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  transition: none;
  -webkit-transform-style: preserve-3d;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  max-height: 0;
}
.flexnav.opacity {
  opacity: 0;
}
.flexnav.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;
}
.flexnav.one-page {
  position: fixed;
  top: 50px;
  right: 5%;
  max-width: 200px;
  list-style: none;
}
.flexnav li {
  font-size: 100%;
  position: relative;
  overflow: hidden;
}
.flexnav li a {
  position: relative;
  display: block;
  padding: .96em;
  z-index: 2;
  overflow: hidden;
  color: #000000;
  background: #ff69b4;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.flexnav li ul {
  width: 100%;
}
.flexnav li ul li {
  font-size: 100%;
  position: relative;
  overflow: hidden;
}
.flexnav li ul.flexnav-show li {
  overflow: visible;
}
.flexnav li ul li a {
  display: block;
  background: #b2b2af;
}
.flexnav ul li ul li a {
  background: #bfbfbc;
}
.flexnav ul li ul li ul li a {
  background: #cbcbc9;
}
.flexnav .touch-button {
  position: absolute;
  z-index: 999;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  display: inline-block;
  background: #acaca1;
  background: rgba(0, 0, 0, 0.075);
  text-align: center;
}
.flexnav .touch-button:hover {
  cursor: pointer;
}
.flexnav .touch-button .navicon {
  position: relative;
  top: 1.4em;
  font-size: 12px;
  color: #666;
}
.menu-button {
  position: relative;
  display: block;
  padding: 1em;
  background: #ff69b4;
  font-family: Lobster;
  color: #0000;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  background: -webkit-linear-gradient(#ff69b4, #FFC0CB);
  background: -o-linear-gradient(#ff69b4, #FFC0CB);
  background: -moz-linear-gradient(#ff69b4, #FFC0CB);
  background: linear-gradient(#ff69b4, #FFC0CB);
}
.menu-button.one-page {
  position: fixed;
  top: 0;
  right: 5%;
  padding-right: 45px;
}
.menu-button .touch-button {
  background: transparent;
  position: absolute;
  z-index: 999;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
}
.menu-button .touch-button .navicon {
  font-size: 16px;
  position: relative;
  top: 1em;
  color: #666;
}
@media all and (min-width: 1800px) {
  body.one-page {
    padding-top: 70px;
  }
  .flexnav {
    overflow: visible;
  }
  .flexnav.opacity {
    opacity: 1;
  }
  .flexnav.one-page {
    top: 0;
    right: auto;
    max-width: 1080px;
  }
  .flexnav li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    background-color: #a6a6a2;
    overflow: visible;
    width: 20%;
  }
  .flexnav li a {
    border-left: 1px solid #acaca1;
    border-bottom: none;
  }
  .flexnav li > ul {
    position: absolute;
    top: auto;
    left: 0;
  }
  .flexnav li > ul li {
    width: 100%;
  }
  .flexnav li ul li > ul {
    margin-left: 100%;
    top: 0;
  }
  .flexnav li ul li a {
    border-bottom: none;
  }
  .flexnav li ul.open {
    display: block;
    opacity: 1;
    visibility: visible;
    z-index: 1;
  }
  .flexnav li ul.open li {
    overflow: visible;
    max-height: 100px;
  }
  .flexnav li ul.open ul.open {
    margin-left: 100%;
    top: 0;
  }
  .menu-button {
    display: none;
  }
}
.oldie body.one-page {
  padding-top: 70px;
}
.oldie .flexnav {
  overflow: visible;
}
.oldie .flexnav.one-page {
  top: 0;
  right: auto;
  max-width: 1080px;
}
.oldie .flexnav li {
  position: relative;
  list-style: none;
  float: left;
  display: block;
  background-color: #a6a6a2;
  width: 20%;
  min-height: 50px;
  overflow: visible;
}
.oldie .flexnav li:hover > ul {
  display: block;
  width: 100%;
  overflow: visible;
}
.oldie .flexnav li:hover > ul li {
  width: 100%;
  float: none;
}
.oldie .flexnav li a {
  border-left: 1px solid #acaca1;
  border-bottom: none;
  overflow: visible;
}
.oldie .flexnav li > ul {
  background: #acaca1;
  position: absolute;
  top: auto;
  left: 0;
  display: none;
  z-index: 1;
  overflow: visible;
}
.oldie .flexnav li ul li ul {
  top: 0;
}
.oldie .flexnav li ul li a {
  border-bottom: none;
}
.oldie .flexnav li ul.open {
  display: block;
  width: 100%;
  overflow: visible;
}
.oldie .flexnav li ul.open li {
  width: 100%;
}
.oldie .flexnav li ul.open ul.open {
  margin-left: 100%;
  top: 0;
  display: block;
  width: 100%;
  overflow: visible;
}
.oldie .flexnav ul li:hover ul {
  margin-left: 100%;
  top: 0;
}
.oldie .menu-button {
  display: none;
}
.oldie.ie7 .flexnav li {
  width: 19.9%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu">
  <div class="menu-button">Menu</div>
  <ul class="flexnav" data-breakpoint="800">
    <li>
      <a href="index.php">Home</a>
    </li>
    <li>
      <a href="dispatch.php">Request Pilot Cars</a>
    </li>
    <li>
      <a href="invoice.php">Submit Invoice</a>
    </li>
    <li>
      <a href="gallery.php">Photos</a>
    </li>
    <li>
      <a href="contact.php">Contact Us</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

添加ul类.flexnav - padding: 0;

导航没有排队

1 个答案: