Come creare un menu su un'immagine per mostrare al meglio la specialita del sito

Creando siti web di varia tematica si affrontano diverse esperienze, particolarmente quando si cerca di presentare al meglio e nello stesso momento piu chiaramente possibile  per un visitatore del sito  gli prodotti o serivizi che offre o realizza azienda presentata nel sito . Nei mesi scorsi lavorando su uno dei progetti ho voluto inventare una cosa a mio parere molto informativa e nello stesso modo comoda proprio per il cliente finale e che riguardava una azienda artigianale che produce prodotti finiti di ferro battuto.

Non volevo creare il solito menu al inizio della pagina o  uno slider  ma volevo trasmettere al visitatore la idea chiara su quello che  produceva l'azienda e solo in seguito mostrare le foto che avrebbero mostrato la loro abilita e mi e venuta una idea di usare per questo scopo un disegno dove saranno presenti quasi tutti gli elementi che loro possono realizzare.

E gia in seguito posizionare su questo disegno le voci del menu che non solo indicherebbero gli elementi che possono realizzare ma anche condurrebbero visitatore alla pagina con delle foto dettagliate.
Vediamo subito un frammento della parte alta della prima pagina perché su altre pagine veniva realizzato gia un menu diciamo solito menu orizontale . 

 

 

 

E puoi un altro compito era quello di rendere questo menu adattivo perché altrimenti non avrebbe avuto il senso di farlo. Prova di rimpicciolire la finestra del tuo browser per vedere cambiamenti. E per farlo addatavo ho usato le media query di CSS3 che abbiamo anche  descritto sul nostro sito.

Come penso hai capito il primo passo nella realizzazione del menu sarebbe di trovare una immagine addata alla tua situazione, dopo di che dovresti scoprire le posizioni esati delle voci del menu sulla immagine atraverso il loro posizionamento e atraverso utilizzo del tag div creare dei blochi per ogni voce del menu rendendo li clicabili inserendo li nel tag <a>

Nel mio caso ho fatto cosi 

<a href="/cancelli.html" class="round r6">
<div class="link">Cancelli</div>
<div class="line"></div>
<div class="dot"></div>
</a>

Dopo di ceh la sosa diventa un puo comlicata perche si devono creare stili css per pozizionamento del ogni bloccho perche class="round r6" perche per ogni voce del menu esiste il suo round  r..   

 

Vedimo come esempio stili css per uno qualsiasi voce del menu

.round.r1 {
    top: 100px;
    left: 25px;
    width: 100px;
    height: 165px;
    z-index: 5;
}
.round {
    position: absolute;
    display: inline-block;
    text-decoration: none;
}
.round .link {
    display: inline-block;
    padding: 0 12px;
    height: 20px;
    font: 16px/21px 'Cuprum', sans-serif;
    color: #5d1e10;
    background: #e4e1d5;
    border-radius: 10px;
    border: 1px solid #fff;
    text-transform: uppercase;
}
.round .line {  // stili generali per la linea che collega voce del menu con elemento sul disegno  
    height: 1px;
    width: 100%;
    border-top: 2px dashed #cdb497;
    position: absolute;
    z-index: -1;
    top: 10px;
}
round.r1 .line {  // modiffica dei stili  della linea che collega la nostra voce del menu con  la classe r1 con rispetivo elemento sul disegno 
    width: 150px;
    left: -15px;
    -webkit-transform: rotate(68deg); // inclinazione della linea, si otiene sperimentando. 
    -moz-transform: rotate(68deg);
    -ms-transform: rotate(68deg);
    transform: rotate(68deg);
    top: 80px;
}
.round .dot {
    width: 16px;
    height: 16px;
    background: url('../img/bg-dot.png') no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
}

Come hai notata qui entra nel gioco posizionamento di elementi nei CSS che nel nostro caso gioca un ruolo molto importante!!!

Oviamente che ogni voce del menu è cliccabile.

E per concludere vorrei solo dire che il vostro sito puo essere diverso e molto amichevole nel confronto dei vostri visitatori, basta un puo di fantasia e bone conoscenze almeno di css e html e i nostri corsi che riguardano questi linguaggi sicuramente potranno migliorare sensibilmente le vostre abbilita come webmaster.

Letto 260 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso