javascript - Navigation Not Lining Up -
i'm using flexnav jquery plugin. got working, list not lining up. see attached image. not know why doing since have not altered code in way on demo site lines right. here link css source code on github: https://raw.githubusercontent.com/indyplanets/flexnav/master/css/flexnav.css
i've tried changing position property. can't seem find solution issue. i'm lost @ point. if can me fix appreciate it.
the flexnav plugin located @ http://jasonweaver.name/lab/flexiblenavigation/ , there demo on page.
/* flexnav.js 1.3.3 created 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">⋮</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: .5s ease-in-out; -moz-transition: .5s ease-in-out; -ms-transition: .5s ease-in-out; transition: .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 { 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 { display: block; background: #b2b2af; } .flexnav ul li ul li { background: #bfbfbc; } .flexnav ul li ul li ul li { 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 , (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 { 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 { 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 { 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 { 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>
add ul class .flexnav - padding: 0;
Comments
Post a Comment