Menu CSS – Menu con cursore

3
Pubblicato il 27 settembre, 2009 da Andrea Leti

MENU-CSS

Gli effetti rollover chi l’ha detto che debbano essere utilizzati solo per lo sfondo? Provate questo Menu!

Un nuovissimo menu con cursore che identifica esattamente dove si sta per cliccare e comunque la categoria selezionata!

Questo il testo HTML:

<ul class="Menu">
           <li> Prima voce </li>
           <li> Seconda voce </li>
           <li>Terza Voce</li>
</ul>

Le regole CSS da utilizzare sono:

.Menu{
width:199px; margin:0;
padding: 15px 0;
border-right:1px solid #999;
test-align:right;
}

.Menu li{ list-style:none;
position:relative;
right:-3px;
}

.Menu a{
display:block;
text-decoration:none;
border-right:5px solid;
padding:5px 10px 5px 0;
background:#fff;
color:#000;
}

.Menu a:link, .Menu a:visited:{
border-color:#999;
}

.Menu a:hover,.Menu a:focus,
.Menu a:active{
border-color:#444;
text-decoration:underline;
}

Ho creato una pagina apposita per questo esempio: Menu con cursore

Spero di avervi fatto cosa gradita! Provate questo Menu, commentatelo e fatemi vedere come lo avete utilizzato.

Articoli correlati

Tag: CSS, menu css, Tutorial CSS

Questo sito non rappresenta una testata giornalistica e viene aggiornato senza alcuna periodicità, esclusivamente sulla base della disponibilità del materiale. Pertanto, non è un prodotto editoriale sottoposto alla disciplina di cui all'art. 1, comma III della L. n. 62 del 7.03.2001.



3 commenti.

  1. diggita.it
    27 settembre, 2009 alle 01:28

    Menu CSS – Menu con cursore…

    Codice html e css pronto per creare il tuo menu css gratis.
    Tutto gia pronto e preconfezionato!

    In questo articolo vedrete come sia davvero semplice con pochissime righe di codice css, creare un menu con effetto “scorrimento”…

  2. Franco
    9 gennaio, 2010 alle 10:09

    Menu CSS – Menu con cursore???
    Credo che ti sei dimenticato qualcosa!
    Nella pagina di esempio, non funziona nessun memù!
    “con cursore” cosa intendi?

    Saluti…

  3. Andrea Leti
    9 gennaio, 2010 alle 20:05

    Perdonami Franco, e credo di non sbagliarmi, ma cosa c’è che non va?

    A me sembra funzionare benissimo! L’ho provato anche su un altro pc! Controlla nuovamente per favore!
    Se il problema persiste mi diresti che sistema operativo utilizzi e con quale browser stai navigando?


Lascia un commento





Vuoi anche tu un avatar per i Blog Wordpress? Vai su Gravatar.com!
E' facile, veloce, Intuitivo!
Personalizza i tuoi commenti! Fatti riconoscere! Fatti apprezzare!

Pubblicizza qui

Paga solo per i risultati -  Guadagna soldi con la Webfandom pubblicizza qui il suo sito web Photoshopinaction

Feedelissimo

Pagina Fan di AndreaLeti.it