javascript - DropDown Menu Display Issue -
what want in website have following code displayed appears timeout closing menu when hovering on menu section (at bottom problematic code).
this achieved without having troubles (but without timeout when hovering on menu sections)
css:
.menu { list-style:none; position:relative; } ul.menu ul { list-style:none; display:none; position:absolute; /* position relative <li> contains <ul> */ left:5em; /* there no overlaping on <li> */ top:-1em; } ul.menu li:hover > ul { display:block; } html:
<ul class="menu"> <li>equipos <ul> <li>masculinos <ul> <li><a href="#">aguilas</a></li> <li><a href="#">cef 18</a></li> <li><a href="#">celtas</a></li> <li><a href="#">indios 1</a></li> <li><a href="#">indios 2</a></li> <li><a href="#">isotopos</a></li> </ul> </li> <li>femeninos <ul> <li><a href="#">cef 18</a></li> <li><a href="#">celtas</a></li> <li><a href="#">facdef</a></li> <li><a href="#">indias</a></li> <li><a href="#">isotopos</a></li> <li><a href="#">parque sur</a></li> </ul> </li> </ul> </li> <li>categorias <ul> <li>primera masculino</li> <li>primera femenino</li> <li>reserva masculino</li> <li>reserva femenino</li> <li>inferiores</li> </ul> </li> <li>torneos <ul> <li>apertura</li> <li>anual</li> <li>clausura</li> <li>torneo de la independencia</li> </ul> </li> <li>canchas <ul> <li>cef 18</li> <li>celtas</li> <li>indios</li> </ul> </li> <li>resultados</li> <li>posiciones</li> <li>estadisticas</li> <li>boletines ats</li> <li>arbitros y designaciones</li> </ul> css:
#navigation_horiz {width:820px; clear:both; padding:0 0 0 0; margin:0 auto;} #navigation_horiz ul {height:50px; display:block;background:blue} #navigation_horiz ul li {display:block; float:left; width:200px; height:50px; background:#999; margin:0 1px 0 0; position:relative} #navigation_horiz ul li a.navlink {display:block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none} #navigation_horiz .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px} #navigation_horiz ul li #dropdown_style {background:#ccc; color:#fff} #navigation_horiz ul li #dropdown_style {color:red} html:
<div id="navigation_horiz"> <ul> <li> <a href="" class="navlink">equipos</a> <div class="dropdown" id="dropdown_style"> <a href="" class="navlink">masculinos</a> <div class="dropdown" id="dropdown_style"> <ul> <li><a href="#">aguilas</a></li> <li><a href="#">cef 18</a></li> <li><a href="#">celtas</a></li> <li><a href="#">indios 1</a></li> <li><a href="#">indios 2</a></li> <li><a href="#">isotopos</a></li> </ul> </div> <a href="" class="navlink">femeninos</a> <div class="dropdown" id="dropdown_style"> <ul> <li><a href="#">cef 18</a></li> <li><a href="#">celtas</a></li> <li><a href="#">facdef</a></li> <li><a href="#">indias</a></li> <li><a href="#">isotopos</a></li> <li><a href="#">parque sur</a></li> </ul> </div> </div><!-- .dropdown_menu --> </li> <li> <a href="" class="navlink">categorias</a> <div class="dropdown" id="dropdown_style"> <ul> <li>primera masculino</li> <li>primera femenino</li> <li>reserva masculino</li> <li>reserva femenino</li> <li>inferiores</li> </ul> </div><!-- .dropdown_menu --> </li> <li> <a href="" class="navlink">torneos</a> <div class="dropdown" id="dropdown_style"> <ul> <li>apertura</li> <li>anual</li> <li>clausura</li> <li>torneo de la independencia</li> </ul> </div><!-- .dropdown_menu --> </li> <li> <a href="" class="navlink">canchas</a> <div class="dropdown" id="dropdown_style"> <ul> <li>cef 18</li> <li>celtas</li> <li>indios</li> </ul> </div><!-- .dropdown_menu --> </li> <li> <a href="" class="navlink">resultados</a> </li> <li> <a href="" class="navlink">posiciones</a> </li> <li> <a href="" class="navlink">estadisticas</a> </li> <li> <a href="" class="navlink">boletines</a> </li> <li> <a href="" class="navlink">arbitros y designaciones</a> </li> </ul> </div><!-- #navigation_horiz --> javascript:
(function($) { $.fn.navidropdown = function(options) { //set default options var defaults={ dropdownclass: 'dropdown', //the class name drop down dropdownwidth: 'auto', //the default width of drop down elements slidedowneasing: 'easeinoutcirc', //easing method slidedown slideupeasing: 'easeinoutcirc', //easing method slideup slidedownduration: 500, //easing duration slidedown slideupduration: 1000, //easing duration slideup orientation: 'vertical' //orientation - either 'horizontal' or 'vertical' }; var opts = $.extend({}, defaults, options); return this.each(function() { var $this = $(this); $this.find('.'+opts.dropdownclass).css('width', opts.dropdownwidth).css('display', 'none'); var buttonwidth = $this.find('.'+opts.dropdownclass).parent().width() + 'px'; var buttonheight = $this.find('.'+opts.dropdownclass).parent().height() + 'px'; if(opts.orientation == 'horizontal') { $this.find('.'+opts.dropdownclass).css('left', '0px').css('top', buttonheight); } if(opts.orientation == 'vertical') { $this.find('.'+opts.dropdownclass).css('left', buttonwidth).css('top', '0px'); } $this.find('ul').hoverintent(function() {}, hidedropdown); $this.find('li').hoverintent(getdropdown, function() {}); }); var activenav = null; function getdropdown() { var newactivenav = $(this); if (activenav && activenav.get(0) !== newactivenav.get(0)) { hidedropdown(); } if (!activenav) { showdropdown(newactivenav); } activenav = newactivenav; } function showdropdown(newactivenav) { newactivenav.find('.'+opts.dropdownclass).slidedown({duration:opts.slidedownduration, easing:opts.slidedowneasing}); } function hidedropdown() { if (activenav) { activenav.find('.'+opts.dropdownclass).slideup({duration:opts.slideupduration, easing:opts.slideupeasing});//hides current dropdown activenav = null; } } }; })(jquery); $(document).ready(function() { $('#navigation_horiz').navidropdown({dropdownwidth: '300px'}); }); were messing code , how make work or how fix it?
at last got closed threat , told me lot of stuff made wrong posting still no help. many days past through , managed other people , myself problems have , tiny easy problem nobody got interested... suggest community , administrators of site clarify yourselves how improve in order working way should, otherwise not harsh on people post things did or change theme of website "stack overflow question , answer site professional , enthusiast programmers." "stack overflow question , answer site professional" since give not clue easy topics.
sincerely, martin
p.s.: post generate self conscience of real problem of site in order improve it, not mean furious.
Comments
Post a Comment