Sondage du mois

Sondage du mois
 

  La connaissance ne vaut que si elle est partagée par tous




 
  Astuce Adobe Photoshop : Raccourci outil Forme d'historique : Touche Y




Les tutoriaux: Index » Jquery » ScriptsJquery » Fly menu compatible IE7+

Introduction

  • Tutoriel posté par Sky
  • 1239 lectures
  • Mis en ligne le 09-11-2010
  • Dernière mise à jour le 09-11-2010
  • Ce tutoriel a été estimé comme simple.


Automatic Translations:
Translate Into English Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Pour faire suite à l'excellent script de Codrops malheureusement incompatible IE (Même IE9 Beta) voici une version alternative du "Fly Menu" par Tutomania.


Méthodologie

LA PARTIE HTML


CODE HTML


<!DOCTYPE html>
<html>
<head>
<title>FLY MENU</title>
</head>
<body bgcolor="#24292D">

// CONTENU DU SITE
<div id="contenu">
	<div class="website">Contenu du site</div>
</div>

// CONTENU DU MENU
<div class="menu">
	<div id="conteneur_left"></div>
	<div id="conteneur_left1"></div>
	<div id="conteneur_left2"></div>
	<div id="conteneur_left3"></div>
	<div id="conteneur"></div>
	<span id="home" class="menu_font"><a href="">ACCUEIL.</a> </span>

	<span id="client" class="menu_font"><a href="">PORTFOLIO.</a> </span>

	<span id="contact" class="menu_font"><a href="">CONTACT.</a> </span>

	<span id="blog" class="menu_font"><a href="">BLOG.</a> </span>
</div>
</body>
</html>


LA PARTIE CSS


CODE CSS


body {
margin-right:0;
margin-left:0;
font-size: 13px;
font-family: Verdana;
color:#000;
}
#contenu {
position:absolute; // IMPORTANT
z-index:1000; // IMPORTANT
width:100%;
}
.website{
background-color:#fff;
border:2px #000 solid;
padding:20px;
width:580px;
position:absolute; // IMPORTANT
z-index:10000; // IMPORTANT
margin:20px;
}
.menu {
right:0;
top:0;
text-align:right;
position:relative; // IMPORTANT
z-index:1500; // IMPORTANT
}
.menu_font {
position:relative; // IMPORTANT
z-index:1500;
font-size: 50px;
font-family: Verdana;
color:#ffffff;
}
.menu_font a  {
color:#ffffff;
text-decoration:none;
}
.menu_font a:hover {
color:#ffffff;
text-decoration:none;
}
#conteneur {
position:absolute; // IMPORTANT
z-index:1400; // IMPORTANT
right:0;
top:0;
width:300px;
overflow:hidden; // IMPORTANT
border:0px #ff0000 solid;
}

/* BLOC QUI APPARAISSENT DE LA GAUCHE */
#conteneur_left {
background:  url(bg.png) repeat-x top left;
position:absolute; // IMPORTANT
z-index:1400; // IMPORTANT
left:-1px;
top:0;
border:0px #ff0000 solid;
}
#conteneur_left1 {
background:  url(bg.png) repeat-x top left;
position:absolute;
z-index:1400;
left:-1px;
top:60px;
border:0px #ff0000 solid;
}
#conteneur_left2 {
background:  url(bg.png) repeat-x top left;
position:absolute;
z-index:1400;
left:-1px;
top:120px;
border:0px #ff0000 solid;
}
#conteneur_left3 {
background:  url(bg.png) repeat-x top left;
position:absolute;
z-index:1400;
left:-1px;
top:180px;
border:0px #ff0000 solid;
}


LA PARTIE jQuery


CODE JAVASCRIPT


$('span#home').mouseover(function() {
var test = $(window).width();
var minus = test-300;
$("#conteneur").animate({top: "0",width: "300"}, 90 );
$("#conteneur_left").animate({width: minus}, 200);
});

$('span#client').mouseover(function() {
var test = $(window).width();
var minus = test-360;
$("#conteneur").animate({top: "60",width: "360"}, 90 );
$("#conteneur_left1").animate({width: minus}, 200 );
});

$('span#contact').mouseover(function() {
var test = $(window).width();
var minus = test-300;
$("#conteneur").animate({top: "120",width: "300"}, 90 );
$("#conteneur_left2").animate({width: minus}, 200 );  
});

$('span#blog').mouseover(function() {
var test = $(window).width();
var minus = test-200;
$("#conteneur").animate({top: "180",width: "200"}, 90 );
$("#conteneur_left3").animate({width: minus}, 200 );
});

$('span#blog').mouseout(function() {
$("#conteneur_left3").animate({ width: "0" }, 200 );
});

$('span#home').mouseout(function() {
$("#conteneur_left").animate({ width: "1"  }, 200 );
});

$('span#client').mouseout(function() {
$("#conteneur_left1").animate({	width: "1"}, 200 );  
});

$('span#contact').mouseout(function() {
$("#conteneur_left2").animate({width: "1"}, 200 );  
});

Notes

  Evaluez le tutorial (0 Votes)

0
0
0

Si vous avez besoin d'informations complémentaires dirigez vous sur le forum :)

Pour les questions ou d'éventuelles remarques, dirigez vous vers le forum.

Réagir sur ce tutoriel - [Jquery] Fly menu compatible IE7+

DERNIÈRES PUBLICATIONS DE OPEN-MOUTHED

En direct de open-mouthed.com