0
Я использую плагин flexnav jquery. Я получил его работу, но список не выстраивается. См. Прикрепленное изображение. Я не знаю, почему это делается, так как я никоим образом не изменил код, но на демо-сайте он выравнивается правильно. Вот ссылка на исходный код css на github: https://raw.githubusercontent.com/indyplanets/flexnav/master/css/flexnav.cssНавигация Не подкладка вверх
Я попытался изменить свойство позиции. Я не могу найти решение моей проблемы. В этот момент я теряюсь. Если кто-то может помочь мне исправить это, я был бы признателен.
Плагин flexnav находится по адресу http://jasonweaver.name/lab/flexiblenavigation/ и есть демонстрационная версия на этой странице.
/*
\t FlexNav.js 1.3.3
\t Created by Jason Weaver http://jasonweaver.name
\t 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">⋮</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);/* 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%;
}<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>
Привет Джесси! Скриншоты великолепны, так как они помогают нам визуализировать происходящее, но не видя вашего кода (CSS, HTML, JS), мы не можем много сделать, чтобы помочь вам. –
Вы предпочитаете, чтобы я связал вас с тестовой страницей, чтобы вы могли просматривать буквально все? :) http://m.hoosiermommapcs.com/test.php –
На самом деле, было бы лучше, если бы вы могли скопировать и вставить свой код здесь, разделив его на разделы для CSS, HTML и JS, соответственно. Если есть какой-либо несвязанный код или контент, вы можете удалить его или заменить его комментарием о том, что было удалено. В противном случае, это просто слишком много, чтобы смотреть. –