Buongiorno a tutti,
Sto progrettando un sito (momentaneamente in locale) e per fare il menù volevo ispirarmi a quello di questo sito:
http://www.primissima.it/cinema_news/Smanettando con firebug sono riuscito a salvare la parte html, css, le immagini e una parte js. Nonostante non funzioni ancora perfettamente (la colorazione istantanea del menù funziona solo se si clicca) mi piacerebbe trovare il modo di inserirlo sul mio sito.
Ho cercato un po' di informazioni, ma non ho trovato nessun componente per ricrearlo.
Ho deciso di provare a crearlo da codice e adattarlo a Joomla, l'unico problema è che ho trovato tante guide per "modificare" menù già esistenti, ma pochissime per definirli da zero.
Alla fine penso che un copia&incolla del css e varie dovrebbe fare la maggior parte del lavoro, il problema è il dove e il come.
#menu{ height: 67px; overflow:hidden; padding: 0px 20px; position: relative; }
#menu ul li {float: left; padding-left: 14px; margin: 0 }
#menu ul li.level1{ padding-left: 16px }
#menu ul li a{ color:#333; display: block; float:left; font-size: 13px; height: 30px; line-height: 27px; padding-right: 2px; text-shadow: #999 0 0 1px; }
#menu ul li.level1 a, #menu ul li.disabled a{ padding-right: 9px; }
#menu ul li.selected{ background: url(bg_menu.png) no-repeat 0 -90px; padding-left: 14px }
#menu ul li.selected a{ background: url(bg_menu.png) no-repeat 100% -150px; color:#111; padding-right: 14px; }
#menu ul li.first{ padding-left: 5px; margin-left: 0; }
#menu ul li.first a{ padding-left: 5px; }
#menu ul li.first.selected{ background-position: 0 -120px; }
#menu ul li.active.selected{ background-position: 0 0; }
#menu ul li.active.first.selected{ background-position: 0 -30px; }
#menu ul li.active.selected a{ background-position: 100% -60px; }
#menu ul li.selected a:hover{ text-decoration: none }
#menu ul li.active a span{ border-bottom: 1px solid #f03939 }
#menu ul li a.feed{ background: url(/images/template/icon_feed_menu.png) no-repeat right 8px; padding-right: 18px; white-space: nowrap }
#menu ul li.separator{ background-color: #bbb; margin: 5px 3px 0 3px; padding: 0; width:1px; height: 20px; line-height: 20px;}
#menu ul li a span{ background-image: url(/images/template/bg_menu_text.png); background-repeat: no-repeat; display: block; height:10px; margin: 10px 0 0 0; text-indent: -99999px; width:20px; }
#menu ul li a span.film{ background-position: 0 0; width:25px; }
#menu ul li a span.cinema_news{ background-position: 0 -10px; width:76px; }
#menu ul li a span.al_cinema{ background-position: 0 -20px; width:58px; }
#menu ul li a span.multimedia{ background-position: 0 -30px; width:68px; }
#menu ul li a span.dvd_blu_ray{ background-position: 0 -40px; width:80px; }
#menu ul li a span.magazine{ background-position: 0 -50px; width:56px; }
#menu ul li a span.primissima_scuola{ background-position: 0 -60px; width:111px; }
#menu ul li a span.cinema_amici{ background-position: 0 -70px; width:75px; }
#menu ul li a span.newsletter{ background-position: 0 -80px; width:69px; }
#menu ul li a span.rss{ background-position: 0 -90px; width:54px; }
#menu ul li.selected a span.film{ background-position: 0 -200px; width:25px; }
#menu ul li.selected a span.cinema_news{ background-position: 0 -210px; width:76px; }
#menu ul li.selected a span.al_cinema{ background-position: 0 -220px; width:58px; }
#menu ul li.selected a span.multimedia{ background-position: 0 -230px; width:68px; }
#menu ul li.selected a span.dvd_blu_ray{ background-position: 0 -240px; width:80px; }
#menu ul li.selected a span.magazine{ background-position: 0 -250px; width:56px; }
#menu ul li.selected a span.primissima_scuola{ background-position: 0 -260px; width:111px; }
#menu ul li.selected a span.cinema_amici{ background-position: 0 -270px; width:75px; }
#menu ul li a:hover span.newsletter{ background-position: 0 -280px; width:69px; }
#menu ul li a:hover span.rss{ background-position: 0 -290px; width:54px; }
#menu ul li ul{ display: none; height: 36px; }
#menu ul li.selected ul { background: url(bg_submenu.png) no-repeat 0 -36px; display: block; left:20px; position:absolute; top:30px; width:940px; z-index: 0 }
#menu ul li.first.selected ul { background-position: 0 -108px }
#menu ul li.active.selected ul { background-position: 0 0 }
#menu ul li.first.active.selected ul { background-position: 0 -72px }
#menu ul li.selected ul li { background:none; height:36px; padding:0; }
#menu ul li.selected ul li a { background:none; color:#333; display:inline; font-family: Tahoma; line-height: 36px; padding:0 24px 0 10px; font-weight: normal; text-shadow:none }
#menu ul li ul.categories li a { font-size: 12px; padding: 0 12px 0 10px }
#menu ul li.selected ul li a:hover { text-decoration: underline }
#menu ul li.selected ul li.selected a { color:#f03939; text-decoration: underline; }Questa dovrebbe essere la parte css direttamente dal sito.
Grazie in anticipo dell'aiuto!
