Js menü rendetlenkedik
Sziasztok!
Netről szedtem le egy menüt. Az almenüket vízszintesen helyezi el. A gondom az, hogy valamiért néha meghal, vagyis nem jeleníti meg az almenüket. Erre keresem a megoldást.
A headben lévő rész:
A html:
CSS:
JS:
■ Netről szedtem le egy menüt. Az almenüket vízszintesen helyezi el. A gondom az, hogy valamiért néha meghal, vagyis nem jeleníti meg az almenüket. Erre keresem a megoldást.
A headben lévő rész:
<script type="text/javascript">
//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu")
</script>
//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu")
</script>
A html:
<div id="mydroplinemenu" class="droplinebar">
<ul>
<li><a href="#">Fomenü 1</a></li>
<li><a href="#">Fomenü 2</a>
<ul>
<li><a href="#">Alemenü 1</a></li>
<li><a href="#">Alemenü 2</a></li>
<li><a href="#">Alemenü 3</a>
</li>
<li><a href="#">Alemenü 3</a></li>
</ul>
</li>
<li><a href="#">Fomenü 3</a></li>
<li><a href="#">Fomenü 4</a>
<ul>
<li><a href="#">Alemenü 1</a></li>
<li><a href="#">Alemenü 2</a></li>
<li><a href="#">Alemenü 3</a></li>
<li><a href="#">Alemenü 4</a></li>
<li><a href="#">Alemenü 5</a></li>
</ul>
</li>
<li><a href="#">Főmenü sok</a></li>
</ul>
</div>
<ul>
<li><a href="#">Fomenü 1</a></li>
<li><a href="#">Fomenü 2</a>
<ul>
<li><a href="#">Alemenü 1</a></li>
<li><a href="#">Alemenü 2</a></li>
<li><a href="#">Alemenü 3</a>
</li>
<li><a href="#">Alemenü 3</a></li>
</ul>
</li>
<li><a href="#">Fomenü 3</a></li>
<li><a href="#">Fomenü 4</a>
<ul>
<li><a href="#">Alemenü 1</a></li>
<li><a href="#">Alemenü 2</a></li>
<li><a href="#">Alemenü 3</a></li>
<li><a href="#">Alemenü 4</a></li>
<li><a href="#">Alemenü 5</a></li>
</ul>
</li>
<li><a href="#">Főmenü sok</a></li>
</ul>
</div>
CSS:
.droplinebar{
overflow: hidden;
height:75px;
background-image:url(./img/asd2.png);
background-repeat:no-repeat;
background-color: #9fcd60;
}
.droplinebar ul{
margin: 7px;
padding: 0;
float: left;
width: 940px;
font: bold 13px Arial;
background:transparent;
}
.droplinebar ul li{
display: inline;
}
.droplinebar ul li a{
float: left;
color:#FFF;
padding: 9px 11px;
text-decoration: none;
}
.droplinebar ul li a:visited{
color:#FFF;
}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: #f96105;
background-image: url(./img/7.png);
}
/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
left: 0;
top: 0;
margin-left:30px;
background:transparent;
visibility:hidden;
}
/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 13px f96105;
font-family:bookman old style,calibri;
padding: 6px;
padding-right: 8px;
margin-top: 5px;
margin-bottom:0px;
}
.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
background: transparent;
}
overflow: hidden;
height:75px;
background-image:url(./img/asd2.png);
background-repeat:no-repeat;
background-color: #9fcd60;
}
.droplinebar ul{
margin: 7px;
padding: 0;
float: left;
width: 940px;
font: bold 13px Arial;
background:transparent;
}
.droplinebar ul li{
display: inline;
}
.droplinebar ul li a{
float: left;
color:#FFF;
padding: 9px 11px;
text-decoration: none;
}
.droplinebar ul li a:visited{
color:#FFF;
}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: #f96105;
background-image: url(./img/7.png);
}
/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
left: 0;
top: 0;
margin-left:30px;
background:transparent;
visibility:hidden;
}
/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 13px f96105;
font-family:bookman old style,calibri;
padding: 6px;
padding-right: 8px;
margin-top: 5px;
margin-bottom:0px;
}
.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
background: transparent;
}
JS:
/*********************
//* jQuery Drop Line Menu- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last updated: May 9th, 11'
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/
var droplinemenu={
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
if (!this.istopheader)
$subul.css({left:0, top:this._dimensions.h})
var $innerheader=$curobj.children('a').eq(0)
$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
if ($targetul.queue().length<=1) //if 1 or less queued animations
if (this.istopheader)
$targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h})
if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
$targetul.dequeue().slideDown(droplinemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.dequeue().slideUp(droplinemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
}) //end document.ready
}
}
//* jQuery Drop Line Menu- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last updated: May 9th, 11'
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/
var droplinemenu={
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
if (!this.istopheader)
$subul.css({left:0, top:this._dimensions.h})
var $innerheader=$curobj.children('a').eq(0)
$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
if ($targetul.queue().length<=1) //if 1 or less queued animations
if (this.istopheader)
$targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h})
if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
$targetul.dequeue().slideDown(droplinemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.dequeue().slideUp(droplinemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
}) //end document.ready
}
}
Hibaüzenet
Hibaüzenet nincs, egyszerűen
Hiba