11548 sujets

JavaScript, DOM et API Web HTML5

Menu jquery

Bonjour,

Je vous expose mon petit souci:
J'ai fais un menu en css + jquery dans un header fixe, quand je suis en haut de la page pas de souci l'animation du menu fonctionne, mais dès que je sroll l'animation ne veux plus fonctionner et j'ai beau chercher je ne trouve pas d'où vient le problème.

Voici les différents bouts de code correspondants :

CSS du menu :
img 
{
	border: none;
}

/* dock - top */
.dock 
{
	position: relative;
	margin-left: 44%;
	top: 10px;
	height: 50px; 
	text-align: center;
}

.dock-container 
{
	position: absolute;
	height: 50px;
	background: url(../img/fond_div.png);
	padding-left: 20px;
	border: 4px #3B5998 solid;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: 2px 2px 15px 2px #333;
	-moz-box-shadow: 2px 2px 15px 2px #333;
	box-shadow: 2px 2px 15px 2px #333;
}

a.dock-item 
{
	display: block;
	width: 40px;
	color: #333;
	position: absolute;
	top: 0px;
	text-align: center;
	text-decoration: none;
	font-family: 'Voltaire', sans-serif;
}

.dock-item img 
{
	border: none; 
	margin: 5px 10px 0px; 
	width: 100%; 
}

.dock-item span 
{
	display: none; 
	padding-left: 20px;
}


HTML de la page :
<link href="style/style_tb.css" rel="stylesheet" type="text/css">
<link href="style/menu.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/interface.js"></script> <!-- menu -->

</head>

<body>


<div id="container_header">

<div id="header">

<div class="dock" id="dock">
  <div class="dock-container"> <!-- Menu top -->
 <span> <a class="dock-item" href="#c1"><img src="images_menu/home.png" alt="home" /><span>Home</span></a>
  <a class="dock-item" href="#c2"><img src="images_menu/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
  <a class="dock-item" href="#c3"><img src="images_menu/music.png" alt="music" /><span>Musique(s)</span></a>
  <a class="dock-item" href="#c4"><img src="images_menu/contact.png" alt="contact" /><span>Contact</span></a></span>
  </div>
</div>

<div id="logo"><img src="img/thybarth.png" width="400" height="118" alt="LOGO"></div>

</div> <!-- fin .header -->

</div> 
<!-- fin .container_header -->

<div class="container">
<div id="left_party"><p>partie gauche</p>

</div> <!-- fin .left_party -->
</div> <!-- fin .container -->


Et enfin le Javascript qui ce trouve en bas de la page :
<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock').Fisheye(
				{
					maxWidth: 50,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container',
					itemWidth: 40,
					proximity: 90,
					halign : 'center'
				}
			)

		}
	);


</script> <!-- fin .effet menu -->


Pour vous rendre compte du souci voici le lien http://www.thybarth.fr/test/

Merci pour votre aide Smiley cligne
Modifié par ThyBarth (25 Mar 2012 - 17:24)
Sujet clos
Aller à