Pubblicato il 02/08/12 - aggiornato il  | 18 commenti :

Megamenù dropdown con più colonne senza javascript per Blogger.

Un menù orizzontale a tendina per Blogger con elementi secondari su più colonne e senza utilizzare javascript.ma solo CSS3.
Riprendo con la serie di articoli dedicate ai menu che tanto successo hanno avuto tra i lettori più affezionati di questo blog. Il menù che presento oggi è particolare perché non ha bisogno di alcun javascript e si può installare senza modificare il modello ma solo incollando il codice in un elemento pagina HTML/Javascript nella sezione Layout della Bacheca di Blogger.

Viene usato il linguaggio CSS3 che come noto non viene ancora ben supportato dai browser di casa Microsoft. Questo non vuole dire che il menù non sarà visto da chi utilizza Internet Explorer ma solo che il suo aspetto non sarà perfetto come invece accadrà per Chrome, Firefox, Safari e Opera.

L'autore di questo menù è NetTuts+ a cui si può sempre fare riferimento se si vogliono modificare parametri o impostazioni.

megamen-css3-blogger

Sotto a ciascuna voce principale possono essere inseriti dei sottomenù da 1 a 5 colonne in cui mostrare link, testo formattato, elenchi e anche immagini. Come mio solito ho anche postato una demo

demo-menu

L'installazione non presenta alcun problema. Si va su Layout > Aggiungi un gadget > HTML/Javascript, non si mette il titolo e si incolla il codice seguente

<div id="menu">
<li><a href="#" class="drop">Home</a><!-- Inizio elemento Home -->
<div class="dropdown_2columns"><!-- Contenitore 2 colonne inizio -->
<div class="col_2">
<h3>Benvenuto!</h3>
</div>
<div class="col_2">
<p>Ciao e benvenuto ! Questa è una dimostrazione delle possibilità Mega Drop Down Menu.</p>            
<p>In questo elemento possono essere inseriti una vasta gamma di stili tipografici quali elenchi, titoli, ecc.</p>            
</div>
<div class="col_2">
<h4>Browser supportati</h4>
</div>
<div class="col_1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9YTkJvDm81CJ8FSgzn88-baa1r8FDRWtruyZIK8ZAgLzVbVetEXI8mdi86vyERyKxhiRAVqqXE73gfy1GwQ-WB5GgdHPbPtluSnvBYFb0p4aCgqJOurfH6OnAw7qnGcX1pvRl7wJqkjUC/s125/browsers-supportati.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>Questo menu è stato testato su tutti i maggiori browser.</p>
</div>
</div><!-- Fine del container a 2 colonne -->
</li><!-- Fine elemento Home -->
<li><a href="#" class="drop">5 Colonne</a><!-- Inizio Elemento a 5 colonne -->
<div class="dropdown_5columns"><!-- Inizio container a 5 colonne-->
<div class="col_5">
<h3>Questo è un esempio di un container molto largo a 5 colonne</h3>
</div>
<div class="col_1">
<p class="black_box">Questo è un box di testo grigio scuro. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
</div>
<div class="col_1">
<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
</div>
<div class="col_1">
<p class="italic">Questo è una porzione di testo in corsivo. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
</div>
<div class="col_1">
<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
</div>
<div class="col_1">
<p class="strong">Questa è una porzione di testo in grassetto. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
</div>
<div class="col_5">
<h3>Qui sono presenti dei contenuti con immagini</h3>
</div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1KuBAEXJ7gUJmE0hcLAqp8NFzb77nQvf6lC5j7HcyBjp-FgItNilVkRpeCHDqgKA4YCyDbecHnxASNCziJ19d5UDb5I2rMrtOu_BWKmoACvwN_MZRz_lCfsVQWO64NMcf0esuO3g3Dgh/s70/megamenu-immagine.jpg" width="70" height="70" class="img_left imgshadow" alt="nome-immagine" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUzVPTk7qELeIANdWsdxUHZe_g3AUOqV5_mc_7WnoVv4_Z4_WbbBB5MR2AbCNgP2oGmi-_WJlo12SL_GmhuAZDealUX-bMJ-bGRvUMhigC26BXn_pjfBSpJu8naHwIpNfSUQAzKZcf_YfK/s70/immagine-megamenu.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>
</div>
<div class="col_2">
<p class="black_box">Questo è un box scuro che può servire per evidenzaire alcuni contenuti. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>
</div>
</div><!-- Fine del container a 5 colonne -->
</li><!-- Fine elemento a 5 colonne -->
<li><a href="#" class="drop">4 Colonne</a><!-- Inizio elemento a 4 colonne -->
<div class="dropdown_4columns"><!-- Inizio container a 4 colonne -->
<div class="col_4">
<h3>Questo è il titolo</h3>
</div>
<div class="col_1">
<h4>Alcuni Link</h4>
<ul>
<li><a href="#">Forum</a></li>
<li><a href="#">Mappa sito</a></li>
<li><a href="#">Widget</a></li>
<li><a href="#">Galleria</a></li>
<li><a href="#">Video tutorial</a></li>
</ul>  
</div>
<div class="col_1">
<h4>Link Utili</h4>
<ul>
<li><a href="#">Guide</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Modulo contatto</a></li>
<li><a href="#">Foto</a></li>
<li><a href="#">Musica</a></li>
</ul>  
</div>
<div class="col_1">
<h4>Materiale vario</h4>
<ul>
<li><a href="#">Ricette</a></li>
<li><a href="#">Creatività</a></li>
<li><a href="#">Guest post</a></li>
<li><a href="#">Applicazioni</a></li>
<li><a href="#">Portfolio</a></li>
</ul>  
</div>
<div class="col_1">
<h4>Miscellanea</h4>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustrazioni</a></li>
<li><a href="#">Altro...</a></li>
</ul>  
</div>
</div><!-- Fine del container a 4 colonne -->
</li><!-- Fine elemento a 4 colonne -->
<li class="menu_right"><a href="#" class="drop">1 Colonna</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">Google Plus</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Lindedin</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Pagina Brand</a></li>
<li><a href="#">Pagina Fan</a></li>
<li><a href="#">Tumblr</a></li>
<li><a href="#">FriendFeed</a></li>
<li><a href="#">MySpace</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Youtube</a></li>
<li><a href="#">Vimeo</a></li>
<li><a href="#">Illustrazioni</a></li>
<li><a href="#">Altro...</a></li>
</ul>  
</div>
</div>
</li>
<li class="menu_right"><a href="#" class="drop">3 Colonne</a><!-- Inizio Elemento a 3 Colonne -->
<div class="dropdown_3columns align_right"><!-- Inizio Container a 3 Colonne -->
<div class="col_3">
<h3>Elenchi nei box</h3>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google Plus</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Linkedin</a></li>
</ul>  
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Forum</a></li>
<li><a href="#">Mappa sito</a></li>
<li><a href="#">Galleria</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Portfolio</a></li>
</ul>  
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustrazione</a></li>
<li><a href="#">Altro...</a></li>
</ul>  
</div>
<div class="col_3">
<h3>Esempi di immagini inserite</h3>
</div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUzVPTk7qELeIANdWsdxUHZe_g3AUOqV5_mc_7WnoVv4_Z4_WbbBB5MR2AbCNgP2oGmi-_WJlo12SL_GmhuAZDealUX-bMJ-bGRvUMhigC26BXn_pjfBSpJu8naHwIpNfSUQAzKZcf_YfK/s70/immagine-megamenu.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Leggi tutto...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1KuBAEXJ7gUJmE0hcLAqp8NFzb77nQvf6lC5j7HcyBjp-FgItNilVkRpeCHDqgKA4YCyDbecHnxASNCziJ19d5UDb5I2rMrtOu_BWKmoACvwN_MZRz_lCfsVQWO64NMcf0esuO3g3Dgh/s70/megamenu-immagine.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Leggi tutto...</a></p>
</div>
</div><!-- Fine del container a 3 colonne -->
</li><!-- End 3 columns Item -->
</div>
<style type="text/css">
body, ul, li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}
/* Barra di Navigazione */
#menu {
list-style:none;
width:800px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Angoli arrotondati non visibili con IE */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Sfondi e gradienti */
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
/* Bordi arrotondati non visibili con IE */
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Sfondi e gradienti degli elementi puntati con il cursore */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Angoli arrotondati non visibili con IE */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjjg47ECC8i3OovLYfXTc7yhPpYS0EDrfkvSCnqmrvJPdnNs7-RhUd5ZcGtkVlY3xb9wzs4jdUWiYMWObtyyaHU8BLUOOAFFmnc6SC8e5FmRfSvNEf-Msrt6Co5CzIhkliQ8vQYmzZ-jY2/s12/arrow-down.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjjg47ECC8i3OovLYfXTc7yhPpYS0EDrfkvSCnqmrvJPdnNs7-RhUd5ZcGtkVlY3xb9wzs4jdUWiYMWObtyyaHU8BLUOOAFFmnc6SC8e5FmRfSvNEf-Msrt6Co5CzIhkliQ8vQYmzZ-jY2/s12/arrow-down.png") no-repeat right 7px;
}
/* Elementi del menu */
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute !important;
left:-999em; /* Per nascondere la discesa */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradiente dello sfondo */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Angoli arrotondati non visibili con IE */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px ;
z-index:999999 !important;
top:auto;
}
/* Colonne */
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
/* Allineamento a destra */
#menu .menu_right {
float:right !important;
margin-right:0px;
}
#menu li .align_right {
/* Angoli arrotondati non visibili con IE */
-moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
/* Stili dei contenuti del menu */
#menu p, #menu h3, #menu h4, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h3 {
font-size:21px;
font-weight:bold;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h4 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Immagini inserite a sinistra */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Ombreggiatura */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
/* Stile del box grigio */
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Angoli arrotondati non visibili con IE */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid  transparent !important ;
}
</style>

Si clicca su Salva, si posiziona l'elemento sotto l'intestazione del blog e si va nuovamente su Salva disposizione. Rispetto all'autore del menu ho cambiato il tag H2 con H3 in quanto in Blogger H2 è il tag della data e non può essere usato come titolo. Conseguentemente ho sostituito il tag H3 con H4. Le personalizzazioni sono infinite. Ho inserito dei commenti, che si riconoscono perché sono compresi tra i caratteri /* e */ o tra <!-- e -->, che spiegano il significato dei tag più importanti.

La larghezza della demo è di 800 pixel che può essere modificata a seconda delle esigenze. I contenuti delle singole voci vengono lasciate alla libera fantasia. Ci sono esempi di come mettere box in evidenza, testo formattato, immagini e elenchi. Al posto dei cancelletti ( # ) vanno ovviamente inseriti gli URL dei post, delle pagine o di link esterni a cui collegare ciascuna voce del menù. Sono state anche settate le larghezze degli elementi con 1, 2, 3, 4 o 5 colonne rispettivamente a 140, 280, 420, 560 e 700 pixel. Tali numeri possono essere modificati contestualmente agli altri che rappresentano le dimensioni interne.


18 commenti :

  1. Bello! Ci faccio un pensierino. ;)

    Tempo fa ho provato quello di Scriptiny, ma m'incasinavo sempre nel creare i sottomenu e non mi veniva mai fuori corretto.

    RispondiElimina
  2. Abbastanza carino... ma mi rompo le palle a mettere i link... ecc... e poi a volte bisogna personalizzarlo un po'...

    RispondiElimina
  3. E' un problema mio o con IE le scritte si sovrappongono? Le voci contenute nei sottomenu si sovrappongono a quelle sottostanti, come se i box avessero sfondo trasparente.

    Preciso che non sono entrata con IE, ma ho semplicemente dato un'occhiata alla demo con l'estensione Chrome IE di Chrome.

    RispondiElimina
  4. Innanzitutto complimenti,nemmeno la nasa c'è la cosi'(penso che questo sia migliore),
    una domanda,
    ma se vorrei inserire solamente il menù della home in tutti i menù e possibile oppure è stato progettato per essere così?
    grazie in anticipo qualunque sia la risposta,
    e di nuovo complimenti.

    RispondiElimina
  5. l'idea è molto valida, ma purtroppo l'ho provato su diversi blog (e con diversi browser)e nn funziona... il menù nn si apre, risulta coperto dal resto del template... per me è dovuto all'incompatibilità con alcuni template... forse bisogna inserirci qualche comando che gli dice che in caso di soprammissione si deve vedere il contenuto del menù... al momento invece i contenuti del menù si aprano dietro al resto del template e risultano essere invisibili :(

    RispondiElimina
  6. @ ... Risposta cumulativa
    Ho già dato conto nel post che con IE il menù non rende bene perché è in CSS3. Speriamo che a partire dal prossimo autunno con IE10 questi problemi siano solo un brutto ricordo.
    L'effetto trasparenza e la non visibilità del menù nascosto da altri elementi del modello è una cosa che ho notato solo con IE.
    Ho messo uno z-index molto elevato

    z-index:999999 !important;

    si può provare a aggiungere qualche altro 9 ma penso che il problema, se si pone, sia dovuto al template.

    RispondiElimina
    Risposte
    1. Il vero problema è che i blog creati con Blogger si visualizzano in automatico con IE7 e non tutti gli utenti sanno che basta schiacciare F12 e cambiare modalità.

      Elimina
    2. infatti credo che sia un problema di template... avevo provato anche con altri browser ma niente....

      peccato... ciao buona serata

      Elimina
  7. Ciao Ernesto non conosco bene il linguaggio del computer.. e non se questo di cui parli era quello di cui mi dicevi qui che avresti fatto http://www.ideepercomputeredinternet.com/2012/03/come-creare-delle-mappe-del-sito.html?showComment=1342932837332#c3988246731923519306
    se è lui allora spero di riuscire a farlo grazie

    RispondiElimina
  8. Ciao Ernesto, mi stupisci sempre di più con la tua creatività inarrestabile nel html e altre cose....colgo questa occasione per una domanda molto semplice. Ho cambiato il template e il banner del mio blog. Ma questo banner è collocato a sinistra anzichè al centro...come si fa a risolvere questo problema?
    Grazie

    RispondiElimina
    Risposte
    1. @kamasa54
      Che intendi per banner? Forse l'header o intestazione? Se è così segui questi post
      http://www.ideepercomputeredinternet.com/2011/04/come-centrare-l-dell-o-header-in.html
      http://www.ideepercomputeredinternet.com/2012/01/come-centrare-o-allineare-destra-l-o-il.html

      Elimina
    2. Eureka! Ho seguito le tue indicazioni per mettere al centro l'intestazione nel blog e ci sono riuscita!
      Grazie infinite.
      Buon week end.

      Elimina
  9. Ciao Ernesto. Ti ringrazio per questo bellissimo menu, (che ho installato su modello simple), il cui risultato è eccellente per le personalizzazioni possibili, e spettacolare perché si possono inserire immagini e anteprime dei contenuti. Più di così....
    Il problema è con internet explorer, come d'altronde hai avvisato.
    Gradienti e arrotondamenti a parte (trascurabili), l'UNICO PROBLEMA che riscontro con explorer 8 è che SOLTANTO i video (youtube) coprono il menu, mentre tutto il resto è ok.

    Secondo te Ernesto, un codice da attribuire ai video in fase di pubblicazione potrebbe ovviare al problema?
    Il nome del blog è oranti di strada. (alcuni widget sono in disordine a causa di questo menù, ma questo non mi preoccupa...)
    Grazie!
    Franco Losi

    RispondiElimina
  10. IE8 e IE9 stanno per essere eliminati insieme a Windows XP e Vista, con IE10 e IE11 non dovrebbero esserci problemi comunque prova a inserire una riga di codice che troverai in questo post
    http://www.ideepercomputeredinternet.com/2012/10/cross-browser-internet-explorer-ie9-blogger.html
    Per il video di Youtube è un problema di z-index
    http://www.ideepercomputeredinternet.com/2011/06/come-posizionare-e-stabilire-l-di.html
    In questo menù ho messo
    z-index:999999 !important;
    per mostrarlo sopra a tutto il resto ma probabilmente la cosa non sempre va :)
    @#

    RispondiElimina
    Risposte
    1. Ciao Ernesto.
      Ho provato scrupolosamente i tuoi suggerimenti, ma l'ostacolo con IE8 pare insuperabile, (con crome e mozilla è ok); pazienza.
      La tua competente disponibilità consente anche agli analfabeti informatici come me di offrire qualche piccolo servizio al prossimo...
      Dunque un grande grazie Ernesto!
      Franco Losi

      Elimina
  11. Bellissimo menù, lo sto sperimentando adesso.
    Sono però in difficoltà per modificare una cosa.
    Se passo con il cursore sul "read more" mi appare uno sfondo grigio scuro dietro al link.
    E lo stesso link ha una leggera ombreggiatura.
    Visto che queste due personalizzazioni non mi piacciono, quali parametri devo modificare?
    Sono riuscita a cambiare il colore, ma il resto no.
    Ammesso sia possibile ovviamente.
    Hai un suggerimento?
    Grazie!

    RispondiElimina
    Risposte
    1. Non vedo read more però i colori a cui fai riferimento sono quelli del blocco hover
      per il colore
      #menu li:hover div a:hover {
      color:#029feb;
      }
      Per l'obreggiatura togli la riga text-shadow: 1px 1px 1px #FFFFFF; da
      #menu li:hover a {
      color:#161616;
      text-shadow: 1px 1px 1px #FFFFFF;
      }
      È possibile che alcuni colori siano ereditati dal tuo modello
      @#

      Elimina
    2. Sì, scusa, non hai visto il read more, perché stavo facendo prove e ho inserito solo adesso il menù terminato.
      I colori ero riuscita a modificarli.
      L'ombreggiatura invece rimane, così come rimane il riquadro grigio dietro il link.
      Continuano a non esaltarmi, ma non riesco proprio ad eliminarli.
      Ho idea che, come dici, possano derivare dal modello, perchè ho sostituito quasi tutti i parametri, provando, ma senza risultato.
      Poco importa, va bene uguale.
      Grazie mille comunque!
      Buona giornata.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy