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:
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):
Donc voila, je suis desemparé, j' attend vos precieux conseils avec impatience
Merci d'avance!
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
Merci d'avance!