Découpage menu zig-zaguant

Hello,

J'ai un site ou les menus ressemblent actuellement à ça :

Le design est mignon et je suis assez attaché à ce style. Seulement c'est vraiment pas pratique pour les découpes.
Actuellement le site est entièrement codé avec des tables (ouch!).
J'aimerai donner une nouvelle jeunesse au site, le rendre plus responsive...
Avant de me lancer, j'aimerai avoir des conseils, quel est le meilleur moyen de traiter ce genre de menu ?
Je pensais garder ce menu pour le site et proposer un menu alternatif (avec media-queries) pour les mobiles. Est-ce la meilleure solution ? Ca veut dire 2 fois plus de boulot...
Tous les exemples sont bienvenus

Merci !

Félix

Bonjour,

responsive... avec du SVG peut-être ?
Sinon 1 image de fond par item de liste (= 1 entrée de menu) et en-dessous de approx. 420px de large se servir de background-size pour réduire la taille des images de fond (il faut aussi réduire la taille de fonte...).
Pour gérer le zoom texte, un line-height pas trop élevé sur les liens et une couleur de fond identique au fond de l'image (le bleu). Comme ça le texte peut sortir de l'image et rester lisible (mieux vaut moche qu'illisible non ?)
Plus tard remplacer les N images de fond par un sprite CSS.

Désolé pour le temps de réponse, j'ai mis un peu de temps pour réussir !
Au début j'avais même pas pensé à écrire le texte des pancartes en brut plutôt en image mais tu as raison c'est quand même mieux...!

Au final, je suis parti sur une découpe en 3 partie : le fond (panneau), les icones, une pancarte blanche.

Je suis assez proche du but, le problème porte sur l'ordre des éléments.
Sois je met z-index:-1; au :before, et à ce moment là il se retrouve derrière mon container (j'utilise bootstrap)
Soi je met z-index:0 ou rien et le panneau se retrouve devant mon texte (pancarte, icones...) même si je met un z-index:999 dans #verticalMenu1 {}

Comment faire ?

Merci beaucoup !

 
<section id="verticalMenu1">
          <ul class="verticalMenu">
          <li><a href="#"><span class="verticalMenu-1 verticalMenu"></span>Ma ville</a></li>
          <li><a href="#"><span class="verticalMenu verticalMenu-2"></span>Batiments</a></li>
          <li><a href="#"><span class="verticalMenu verticalMenu-3"></span>Unités</a></li>
          <li><a href="#"><span class="verticalMenu verticalMenu-4"></span>Recherche</a></li>
          <li><a href="#"><span class="verticalMenu verticalMenu-5"></span>Mission</a></li>
          <li><a href="#"><span class="verticalMenu verticalMenu-6"></span>Cartes</a></li>
          </ul>          
          </section>

#verticalMenu1 {
    position:relative;
    width:165px;
}

/* Panneau */
#verticalMenu1:before { 
    box-sizing:border-box;
    position:absolute;
    top:0;
    left:0;
    z-index:-1; /* <------- Problème ici */
    content:'';
    height:100%;
    width:100%;
    border-width:299px 0 183px 0;
    border-image:url('../images/menu1.png') 299 0 183 0 fill repeat stretch;
}

ul.verticalMenu {
   display:inline-block;
    list-style-type: none;
    margin: 0px;
    width:100%;
    padding-left:0px;
}

ul.verticalMenu li {
   width:100%;
   display:inline-block;
    background-image: url('../images/menuButton.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    padding-left: 0px;
}
/* Icones */
span.verticalMenu {
	display:inline-block;
	background: url('../images/spriteVerticalMenu.png') no-repeat;
	margin-right: 5px;
}
/* Sprites icones */
span.verticalMenu.verticalMenu-1{ background-position: 0 -315px; width: 35px; height: 35px; } 
/* .... */

Modifié par Felix38 (24 Jun 2014 - 15:27)