[Résolu] Menu proportionnel

Bonjour à tous !

Je suis actuellement en train de faire un site web pour passer le temps (oui, ça m'est passé comme ça par la tête), et j'essaie quelques techniques sur celui-ci.
Dans un souci de compatibilité maximale, quel que soit l'écran avec lequel mon site sera visionné, j'essaie de faire un menu vertical proportionnel à la taille de la fenêtre.
Jusqu'ici, aucuns soucis, j'ai une taille maximale du menu pour les très grands écrans, et si on s'amuse à réduire la fenêtre, le menu rétrécit pour rester sur une taille compatible à l'affichage.

Cependant ce menu est animé à la base, avec un effet de slide. La taille des images constituant mon menu étant variable en fonction de l'affichage, je suis donc obligé de gérer le retrait et le déplacement horizontal en pourcentage ... mais par rapport à une taille verticale !
Enfin bref, j'ai trouvé une solution que je détaillerai plus bas, mais qui ne marche que partiellement, lorsque vous modifiez la taille de la fenêtre, les pourcentages horizontaux ne suivent pas, il faut actualiser la page pour corriger le souci.

Bien conscient que mon explication est loin d'être clair, voici mon site (essayez de redimensionner la fenêtre et le menu disparaîtra, jusqu’à ce que vous l'actualisiez):
http://mirk.host56.com/
Et un exemple offline afin d'être encore plus clair (il ne traite que du menu) :
http://mirk.host56.com/Telechargements/Menu.zip

Le raisonnement que j'ai suivi pour réaliser ce menu :
Niveau HTML, rien d'exceptionnel, juste une liste d'images

<ul>
	<li><img src="Accueil.png"></li>
	<li><img src="Accueil.png"></li>
	<li><img src="Accueil.png"></li>
	<li><img src="Accueil.png"></li>
	<li><img src="Accueil.png"></li>
	<li><img src="Accueil.png"></li>
	<li><img src="Accueil.png"></li>
	<li><img src="Accueil.png"></li>
</ul>

Coté CSS, afin de récupérer la hauteur de la fenêtre, je mets les contenants (html et body) à une hauteur de 100%

html{
	padding:0px;
	margin:0px;
	height:100%;
}

body{
	padding:0px;
	margin:0px;
	height:100%;
}

La liste prendra 80% de la hauteur de la fenêtre (100% ça dépasse un peu), elle est figée (le menu tiendra en un morceau sur la fenêtre, pas besoin de le faire défiler, et ça fait plus classe !) et enfin la largeur est sur auto :

ul{
	list-style:none;
	position:fixed;
	padding:0px;
	margin:0px;
	height:80%;
	width:auto;
}

Le problème vient surement de

width:auto;

, cette largeur prend de base la largeur de l'image et se réajuste proportionnellement à la hauteur, mais seulement quand on actualise la page

Pour les éléments, une hauteur de 12.5% (100% / 8 éléments), une hauteur max de 95 pixels (la hauteur de l'image) et une position à gauche de -80% (-80% de la largeur du contenant, c'est à dire la largeur de la liste, celle qui pose problème), il y a également l'animation, même principe avec -10% (qui se base aussi sur la valeur qui pose problème) :

li{
	padding:0px;
	margin:0px;
	height:12.5%;
	max-height:95px;
	position:relative;
	left:-80%;
}

li:hover{
	left:-10%;
	transition:0.5s left;
}

Et enfin l'image, qui prend toute la hauteur de l'élément contenant et avec une largeur auto pour rester proportionnel :

img{
	float:left;
	height:100%;
	width:auto;
}

Voili voilou, si vous avez déjà vu un menu de ce genre ailleurs, je veux bien avoir le lien pour m’inspirer, ou sinon si vous avez une solution pour que ce menu devienne plus fluide, je suis preneur.

Merci d'avance =)
Modifié par Minute (17 Mar 2015 - 22:51)

Super ! Je ne connaissais pas l'unité vh, problème résolu donc, merci beaucoup =P
Note : il y a un léger changement dans le translate entre une grosse fenêtre et une petite, mais je suis passé à 65% pour que ça ne se voit pas.

Pour ceux qui sont intéressés par le nouveau CSS (le site vient d'être mis à jour) :

html{
	padding:0px;
	margin:0px;
	height:100%;
}

body{
	padding:0px;
	margin:0px;
	height:100%;
}

ul{
	list-style:none;
	position:fixed;
	padding:0px;
	margin:0px;
	height:80%;
}

li{
	padding:0px;
	margin:0px;
	height:12.5%;
	max-height:95px;
	position:relative;
	left:-30vh;
}

img{
	float:left;
	height:100%;
	width:auto;
	transition:0.5s transform;
}

img:hover{
	transform:translateX(65%);
	transition:0.5s transform;
}

Édit : Arf ! en fait non, tout fonctionne bien, sauf si on agrandi beaucoup la fenêtre, la taille des onglets ne change plus (parce que limité à 95px), mais leur position continue d'aller vers la gauche ... d'où la note ci-dessus, vu que je travail sur un grand écran =S
Modifié par Minute (17 Mar 2015 - 22:56)