28172 sujets

CSS et mise en forme, CSS3

Bonjour a tous!

Voila, je suis tellement perdu que pour une fois j' en viens a poser moi même une question.

Mon probleme est basé sur ce petit menu avec jquery, super sympa!

http://ndesign-studio.com/blog/css-dock-menu

Ce qui donne en demo ceci:

http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html

J' ai reussi a l' afficher sur mon site sans souci, le probleme est au niveau de l' animation sur le hover.

Si je laisse la page tout en haut donc en mode initial, pas de souci quand je passe ma souris sur le menu, l' animation se fait bien.

Si je descend un peu ma page en scrollant, le menu suis bien (fixed) mais pour avoir l' animation il faut mettre son curseur un peu plus haut ou se trouvait le menu a l' emplacement initial.

Le mieux est d' aller voir vous meme sur le petit site que je suis en train d'essayer de faire.

ICI


Je n' ai rien changé au css que voici:

/* dock - top */
.dock {
	position: relative; 
	height: 50px; 
	text-align: center;
}
.dock-container {
	position: absolute;
	height: 50px;
	background: url(images/menu2/dock-bg2.gif);
	padding-left: 20px;
}
a.dock-item {
	display: block;
	width: 40px;
	color: #000;
	position: absolute;
	top: 0px;
	text-align: center;
	text-decoration: none;
	font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
	border: none; 
	margin: 5px 10px 0px; 
	width: 100%; 
}
.dock-item span {
	display: none; 
	padding-left: 20px;
}

/* dock2 - bottom */
#dock2 {
	width: 100%;
	bottom: 0px;
	position: absolute;
	left: 0px;
}
.dock-container2 {
	position: fixed;
	height: 50px;
	background: url(images/menu2/dock-bg.gif);
	padding-left: 20px;
}
a.dock-item2 {
	display: block; 
	font: bold 12px Arial, Helvetica, sans-serif;
	width: 40px; 
	color: #000; 
	bottom: 0px; 
	position: absolute;
	text-align: center;
	text-decoration: none;
}
.dock-item2 span {
	display: none;
	padding-left: 20px;
}
.dock-item2 img {
	border: none; 
	margin: 5px 10px 0px; 
	width: 100%; 
}
<!--[if lt IE 7]>

 div, img { behavior: url(iepngfix.htc) }
<!--[endif]-->


-->


et le bout de code du menu du bas (bien que le probleme soit le meme pour celui du haut, on se rend mieux compte avec celui du bas):

<div class="dock" id="dock2">
  <div class="dock-container2">
  <a class="dock-item2" href="#"><span>Home</span><img src="images/menu2/home.png" alt="home" /></a> 
  <a class="dock-item2" href="#"><span>Contact</span><img src="images/menu2/email.png" alt="contact" /></a> 
  <a class="dock-item2" href="#"><span>Portfolio</span><img src="images/menu2/portfolio.png" alt="portfolio" /></a> 
  <a class="dock-item2" href="#"><span>Music</span><img src="images/menu2/music.png" alt="music" /></a> 
  <a class="dock-item2" href="#"><span>Video</span><img src="images/menu2/video.png" alt="video" /></a> 
  <a class="dock-item2" href="#"><span>History</span><img src="images/menu2/history.png" alt="history" /></a> 
  <a class="dock-item2" href="#"><span>Calendar</span><img src="images/menu2/calendar.png" alt="calendar" /></a> 
  <a class="dock-item2" href="#"><span>Links</span><img src="images/menu2/link.png" alt="links" /></a> 
  <a class="dock-item2" href="#"><span>RSS</span><img src="images/menu2/rss.png" alt="rss" /></a> 
  <a class="dock-item2" href="#"><span>RSS2</span><img src="images/menu2/rss2.png" alt="rss" /></a> 
  </div>
</div>

<!--dock menu JS options -->
<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock2').Fisheye(
				{
					maxWidth: 60,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container2',
					itemWidth: 40,
					proximity: 80,
					alignment : 'left',
					valign: 'bottom',
					halign : 'center'
				}
			)
		}
	);

</script>


Donc voila, je suis desemparé, j' attend vos precieux conseils avec impatience Smiley decu

Merci d'avance!
Bonjour,

À première vue, il s’agit d'un bug avec le plugin*. Il faut dire que 2007, il commence à dater. Et malheureusement, il ne semble pas avoir été entretenu par la suite.

Je n'ai pas réussit à trouver le code décompressé, alors je n'essaierai pas de trouver la raison du comportement. Mais mon conseil serait de trouver un autre plugin du genre plus récent.

Tu pourrais également essayer avec une version plus récente de jQuery. Mais, c'est sans garantie.



* mais peut-être ais-je loupé une erreur toute bête aussi... Si c'est le cas quelqu'un viendra sûrement la pointer
Modifié par Vaxilart (22 Apr 2012 - 06:47)
Merci de ton aide, je l' espere oui, je ne sais plus quoi faire pour l' instant, je ne connais pas jquery :S