Un fantastico Menu Orizzontale con i CSS

In questo tutorial vedremo come inserire in due passaggi, nel nostro blog o sito, un fantastico menu orizzontale, realizzato con i CSS. E' un menu di grande impatto, grazie anche ai vari colori. Ho fatto una piccola modifica per chi vuole inserirlo nel blog con piattaforma blogger.
Come vedete, sotto c'è il menu e se vi piace, seguite il tutorial e vedrete che è un gioco da ragazzi.

• Home
  01
• About
  02
• Archive
  03
• Contact
  04
• RSS
  05
• bestar
  05

1 - Collegatevi a blogger. 2 - Andate in Layout, clickate su Aggiungi un gadget pagina, poi su HTML/JavaScript, inserite il codice sotto e salvate tutto.
<div align='right'> <p><style type="text/css"> #css_menu_13{ padding-bottom:20px; background-color:black; } #css_menu_13 ul{ list-style:none; overflow:hidden; height:110px; margin:0; padding:20px 20px 0 20px; border-bottom:5px solid white; } #css_menu_13 li{ display:inline; } #css_menu_13 li a{ display:block; float:left; width:70px; height:50px; margin:60px 2px 0 2px; border-top:5px solid white; border-right:5px solid white; border-left:5px solid white; text-decoration:none; text-align:center; text-transform:uppercase; font-family:arial; font-size:11px; font-weight:bold; color:white; } #css_menu_13 li a span{ display:block; margin-top:5px; padding:5px; } #css_menu_13 li a b{ display:block; margin-top:10px; font-family:"Arial Narrow"; font-size:60px; } #css_menu_13 li a:hover{ height:110px; margin-top:0; } #css_menu_13 li a.item1{ background-color:#FF0099; } #css_menu_13 li a.item2{ background-color:#99CC00; } #css_menu_13 li a.item3{ background-color:#FF3300; } #css_menu_13 li a.item4{ background-color:#3399FF; } #css_menu_13 li a.item5{ background-color:#FFB300; } #css_menu_13 li a.item6{ background-color:#323644; } #css_menu_13 li a.item1 span{ background-color:#CC007A; } #css_menu_13 li a.item2 span{ background-color:#7AA300; } #css_menu_13 li a.item3 span{ background-color:#CC2900; } #css_menu_13 li a.item4 span{ background-color:#297ACC; } #css_menu_13 li a.item5 span{ background-color:#CC8F00; } #css_menu_13 li a.item6 span{ background-color:#768ebc; } </style> <div id="css_menu_13"> <ul> <li><a href="#nogo" class="item1"><span>Home</span><br/><b>01</b></a></li> <li><a href="#nogo" class="item2"><span>About</span><br/><b>02</b></a></li> <li><a href="#nogo" class="item3"><span>Archive</span><br/><b>03</b></a></li> <li><a href="#nogo" class="item4"><span>Contact</span><br/><b>04</b></a></li> <li><a href="#nogo" class="item5"><span>RSS</span><br/><b>05</b></a></li> <li><a href="#nogo" class="item6"><span>bestar</span><br/><b>05</b></a></li> </ul> </div></p> </div>
Naturalmente, bisogna personalizzarlo.
Per esempio. Trovate il codice sotto e sostituite il colore, cambiando il codice esadecimale #FF0099.
#css_menu_13 li a.item1{ background-color:#FF0099; }
Qui potete scegliere il colore che volete. Troverete tutti i colori possibili. Fare la stessa cosa per gli altri colori e alla fine quando siete soddisfatti, salvate tutto.
L'ultima cosa da impostare sono gli url da inserire/sostituire.
Trovate il codice sotto, e sostituite #nogo con il vostro url.
<li><a href="#nogo" class="item1"><span>Home</span><br/><b>01</b></a></li>
Per coloro che vogliono inserire il menu nel loro sito web con WP o altre piattaforme, vi mando nel sito di FlepStudio. In caso di problemi o bisogno di consigli, basta chiedere.

Articoli correlati per categorie

 Abbonati gratis a questo blog      

Torna Su