Problema con compatibilidad de los Jquery Bueno resulta que tengo un menu con submenu que usa jquery y abajo del menu tengo un s3slider, el problema es que el s3slider no se muestra y el submenu al momento de de pasar por el boton que aparece por encima del s3slider desaparece.
No se que es lo que puede estar ocurriendo, saque el jquery del submenu y hay funciono el slider, pero mi menu tiene que tener el submenu, entonces necesito encontrar cual seria el problema.
Si alguien me puede ayudar en esto porfavor.
Aqui pongo mi codigo.
Código HTML:
<title>home</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/s3Slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#slider1').s3Slider({ timeOut: 4000 }); }); </script> </head> <body id="home"> <div id="content"> <div id="header"> <div id="nav"> <ul id="topnav"> <li><a href="home.html" class="home">Home</a></li> <li><a href="about.html" class="about">About</a></li> <li><a href="gallery.html" class="gallery">Gallery</a> <div class="sub"> <div class="row"> <ul style="width: 130px;"> <li><a href="#">Designs & Interfaces</a></li> <li><a href="#">Digital Art</a></li> <li><a href="#">Mixed Media</a></li> </ul> </div> </div> </li> <li><a href="services.html" class="services">Services</a></li> <li><a href="shop.html" class="shop">Shop</a></li> <li><a href="contact.html" class="contact">Contact</a></li> </ul> </div> </div> <div id="sliderImage"> <div id="slider1"> <ul id="slider1Content"> <li class="slider1Image"> <img src="images/slider1.png" alt="1" /></a> <span class="right"><strong>Title text 2</strong><br />Content text...</span></li> <li class="slider1Image"> <img src="images/slider1.png" alt="2" /></a> <span class="right"><strong>Title text 2</strong><br />Content text...</span></li> <li class="slider1Image"> <img src="images/slider1.png" alt="3" /></a> <span class="right"><strong>Title text 2</strong><br />Content text...</span></li> <li class="slider1Image"> <img src="images/slider1.png" alt="4" /></a> <span class="right"><strong>Title text 2</strong><br />Content text...</span></li> <li class="slider1Image"> <img src="images/slider1.png" alt="5" /></a> <span class="right"><strong>Title text 2</strong><br />Content text...</span></li> <div class="clear slider1Image"></div> </ul></div> </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script> <script type="text/javascript"> $(document).ready(function() { function megaHoverOver(){ $(this).find(".sub").stop().fadeTo('fast', 1).show(); //Calculate width of all ul's (function($) { jQuery.fn.calcSubWidth = function() { rowWidth = 0; //Calculate row $(this).find("ul").each(function() { rowWidth += $(this).width(); }); }; })(jQuery); if ( $(this).find(".row").length > 0 ) { //If row exists... var biggestRow = 0; //Calculate each row $(this).find(".row").each(function() { $(this).calcSubWidth(); //Find biggest row if(rowWidth > biggestRow) { biggestRow = rowWidth; } }); //Set width $(this).find(".sub").css({'width' :biggestRow}); $(this).find(".row:last").css({'margin':'0'}); } else { //If row does not exist... $(this).calcSubWidth(); //Set Width $(this).find(".sub").css({'width' : rowWidth}); } } function megaHoverOut(){ $(this).find(".sub").stop().fadeTo('fast', 0, function() { $(this).hide(); }); } var config = { sensitivity: 2, // number = sensitivity threshold (must be 1 or higher) interval: 10, // number = milliseconds for onMouseOver polling interval over: megaHoverOver, // function = onMouseOver callback (REQUIRED) timeout: 50, // number = milliseconds delay before onMouseOut out: megaHoverOut // function = onMouseOut callback (REQUIRED) }; $("ul#topnav li .sub").css({'opacity':'0'}); $("ul#topnav li").hoverIntent(config); }); </script>
Codigo CSS:
Código:
#content {
height: 850px;
width: 980px;
margin-right: auto;
margin-left: auto;
}
#header {
width: 980px;
height: 40px;
background-color: #000;
}
#nav {
float: left;
height: 40px;
width: 486px;
}
ul#topnav {
margin: 0; padding: 0;
float:left;
width: 100%;
list-style: none;
font-size: 1.1em;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
position: relative; /*--Important--*/
}
ul#topnav li a {
float: left;
text-indent: -9999px; /*--Push text off of page--*/
height: 40px;
}
/*submenu */
ul#topnav li .sub {
position: absolute; /*--Important--*/
top: 41px;
left: 0;
float: left;
/*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
display: none; /*--Hidden for those with js turned off--*/
background-color: #000;
background-image: url(sub_bg.png);
background-repeat: repeat-x;
}
ul#topnav .sub ul li a {
background-color: #000;
}
ul#topnav .sub ul li a:hover {
background-color: #666;
}
ul#topnav li .row { /*--If needed to break out into rows--*/
clear: both;
float: left;
width: 100%;
margin-bottom: 10px;
}
ul#topnav li .sub ul{
list-style: none;
margin: 0;
padding: 0;
width: 130px;
float: left;
}
ul#topnav .sub ul li {
width: 100%; /*--Override parent list item--*/
color: #fff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
}
ul#topnav .sub ul li a {
float: none;
text-indent: 0; /*--Override text-indent from parent list item--*/
height: auto;
display: block;
text-decoration: none;
color: #03AED9;
font-size: 12px;
font-weight: bold;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 7px;
padding-left: 6px;
padding-top: 7px;
}
ul#topnav .sub ul li a:hover {
color: #000;
background-position: 5px 12px;/*--Override background position--*/
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
/* nav */
ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
}
/*--CSS Sprites - Default State--*/
ul#topnav a {
display: block;
height: 40px; /*--Specify height of navigation--*/
text-indent: -99999px; /*--Shoot the text off the page--*/
background-position: left top;
float: left;
}
/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
background-position: left bottom;
}
/*--Assign an image and width to each link--*/
ul#topnav li a.home {
background-image: url(images/nav_home.png);
width: 68px;
}
ul#topnav li a.about {
background-image: url(images/nav_about.png);
width: 86px;
}
ul#topnav li a.gallery {
background-image: url(images/nav_gallery.png);
width: 93px;
}
ul#topnav li a.services {
background-image: url(images/nav_services.png);
width: 101px;
}
ul#topnav li a.shop {
background-image: url(images/nav_shop.png);
width: 69px;
}
ul#topnav li a.contact {
background-image: url(images/nav_contact.png);
width: 69px;
}
/*-- actives pages --*/
#home li a.home {
background-position: left 40px;
}
#about li a.about{
background-position: left 40px;
}
#gallery li a.gallery {
background-position: left 40px;
}
#services li a.services {
background-position: left 40px;
}
#shop li a.shop{
background-position: left 40px;
}
#contact li a.contact{
background-position: left 40px;
}
#sliderImage {
float: left;
height: 232px;
width: 609px;
padding-top: 20px;
padding-left: 24px;
}
#slider1 {
width: 609px;
height: 232px;
position: relative;
overflow: hidden;
float: left;
}
#slider1Content {
margin:0;
padding:0;
width:609px;
}
.slider1Image { float: left; position: relative; display: none;}
.slider1Image span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 694px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;}
.clear { clear: both;}
.slider1Image span strong { font-size: 14px;}
.left { top: 0; left: 0; width: 110px !important; height: 280px;}
.right {
right: 0;
bottom: 0;
width: 582px !important;
height: 45px;
}
ul { list-style-type: none;}
a:link { text-decoration: none;}
a:visited { text-decoration: none;}
a:hover { text-decoration: none;}
a:active { text-decoration: none;}
El submenu aparece en la parte de gallery, y se supone que abajo esta el s3slider pero no se ve pero esta activo, por que cuando se abre el submenu y se pasa el mouse por donde esta el s3slider desaparece.
PRUEBA AQUI
Porfavor alguien que me ayude.
Un saludo ATTe Gidharvey
