/* coding=UTF-8 */ /* MENU AD ALBERO AD UNO O PIU' LIVELLI, REALIZZATO CON LISTE DI DEFINIZIONE (ELENCHI DI DEFINIZIONI) - Tag
definisce l'elenco di descrizione; tag
definisce il termine (nome); tag
descrive ogni termine. */ /* A differenza delle liste numerate e puntate, all'interno degli elementi delle liste di definizione è possibile includere altri elementi HTML (paragrafi, immagini, ecc...). */ /* E' possibile aggiungere livelli all'albero standard (di 2 livelli: 1°=titoli
; 2°=descrizioni
), inserendo un'ulteriore lista di definizio
dentro una didascalia
e procedere in tal modo fino ai livelli desiderati. */ dl.menu { margin: 0px; border: none; padding: 0px; text-align: left; } /* Elemento blocco, che per default viene in genere visualizzato dai browser con un margine superiore ed inferiore di 1em, che qui viene tolto. */ /* Titoli di gruppo. Descrizioni non cliccabili, che costituiscono un titolo per raggruppare logicamente le voci di menu di livello inferiore. Definiti con 2 layout differenti, il primo per le descrizioni del primo livello del menu ed il secondo per tutte le altre. Di default i browser rappresentano i titoli senza assegnare particolari margini. */ dl.menu dt { margin: 0.96em 0px 0px 0px; padding-bottom: 0.2em; font-size: 108%; color: #666666; border-bottom: 2px solid #99FF99; font-weight: normal; font-style: normal; font-variant: normal; } /* Impostato tipo-font per consentirne la modifica parametrica generalizzata. */ dl.menu dt.subliv { margin: 0px; padding-bottom: 0px; border-bottom: none; font-weight: normal; font-style: normal; font-variant: normal; } /* Annulla il margine superiore ed il bordo inferiore per le voci di gruppo che non sono al primo livello. Viene rappresentato nello spazio del
che lo contiene e ne eredita le caratteristiche (per questo serve tipo-font). */ dl.menu dt.website { color: #6B8E23 } /* Colore dei titoli dei gruppi che contengono le pagine del sito web, differenziati dai titoli dei gruppi di funzioni/programmi. */ /* Voce di primo livello che anzichè essere un gruppo (come normalmente dovrebbe essere) è una funzione (link). */ dl.menu dt.func_liv1 { color: #B8860B; border-bottom: none; font-weight: normal; font-style: italic; font-variant: normal; } /* Parametri di visualizzazione della voce di menu quando non è un link, ossia è la voce/funzione corrente, quella selezionata. */ /* Voci di menu cliccabili (funzioni/link). Di default i browser rappresentano le descrizioni con un margine sinistro di 40px. */ dl.menu dd { background: transparent url("/common-files/img/liste_puntate/freccie/bullet_green.gif") no-repeat scroll; /* Il marcatore è stato posizionato in questo modo per averlo sulla prima riga della voce di menu nel caso essa occupi più righe. Con (left center) viene al centro delle "n" righe occupate, allineato solo nel caso la voce sia monoriga. Con (left top) viene troppo in alto, visto che l'altezza della riga è maggiorata ed il testo viene centrato in essa. I valori delle URL si riferiscono sempre al percorso del foglio di stile e non a quello del documento al quale il foglio di stile è associato. */ padding-left: 14px; /* Definisce lo spazio tra la scritta ed il marcatore, comprensivo della larghezza del marcatore. */ padding-top: 5px; /* Allinea verticalmente marcatore e scritta (il valore dipende dall'altezza del marcatore usato), abbassando la scritta in relazione al marcatore che rimane come sfondo. */ margin: 0px 0px 0px 10px; /* Il margine sinistro definisce il rientro dei sottolivelli (marcatore compreso), un margine superiore (-5px) compenserebbe il padding-top usato per l'allineamento del marcatore con il testo, però se c'è un colore di sfondo definito per il contenitore della lista e non c'è un line-height abbastanza alto, il margine negativo va a pestare le righe superiori, quindi si è preferito eliminare la compensazione con margine superiore negativo e ridurre il line-height per avvicinare le righe. */ color: #B8860B; font-weight: normal; font-style: italic; font-variant: normal; } /* Colore e stile della voce quando non è un link, ossia è la voce/funzione corrente, quella selezionata. */ dl.menu dd { line-height: 1.12em; background-position: left 0.54em; } /* Regola con minore specificità rispetto alle due seguenti, che viene applicata in divisioni generiche (pagina home-mappa-sito). */ #menu-jo_open dl.menu dd { line-height: 1.12em; background-position: left 0.54em; } div.menumobile dl.menu dd { line-height: 2em; background-position: left 0.96em; } /* Voci di dettaglio atte a contenere un sottolivello. */ dl.menu dd.box { background: none; padding-left: 0px; padding-top: 0.9em; } /* Alterazione rispetto alle normali voci di dettaglio. */ /* Alterazioni visive per tutte le voci di menu cliccabili (di tutti i livelli), quando sono dei link. */ dl.menu dd a, dl.menu dt.func_liv1 a { text-decoration: none; color: #1E90FF; font-weight: normal; font-style: normal; font-variant: normal; } /* Colore e stile differente per le voci di dettaglio che sono un link (tutte a parte quella corrente). */ /* Formattazioni particolari per le voci che si vogliono differenziare dalle altre, quando sono dei link e per i titoli dei gruppi. */ dl.menu dt.evid, dl.menu dd a.evid, dl.menu dt.func_liv1 a.evid { text-decoration: none; background-color: #CCFF99; color: #3333FF; font-weight: normal; font-style: normal; font-variant: normal; } /* Questa classe CSS viene usata anche quando si vogliono evidenziare delle voci a livello di codice di programmazione ("jo_display_colonna_dx()" e "jo_display_menu()"), ossia senza una pianificazione che parte dalla tabella dei menu con il campo "menu_voci.special_layout". */ dl.menu dt.bold, dl.menu dd a.bold, dl.menu dt.func_liv1 a.bold { text-decoration: none; font-weight: bold; font-style: normal; font-variant: normal; } dl.menu dt.italic, dl.menu dd a.italic, dl.menu dt.func_liv1 a.italic { text-decoration: none; font-weight: normal; font-style: italic; font-variant: normal; } dl.menu dt.color1, dl.menu dd a.color1, dl.menu dt.func_liv1 a.color1 { text-decoration: none; background-color: #FFFF99; color: #3333FF; font-weight: normal; font-style: normal; font-variant: normal; } dl.menu dt.color2, dl.menu dd a.color2, dl.menu dt.func_liv1 a.color2 { text-decoration: none; background-color: #DCDCDC; color: #3333FF; font-weight: normal; font-style: normal; font-variant: normal; } dl.menu dd a:hover, dl.menu dt.func_liv1 a:hover { color: #FF4500; } /* Classi da assegnare ai link costituiti solo da un immagine, con effetto "roll over CSS". */ a.menu-plus-link { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. Il primo comando è per Firefox 2 e meno, gli ultimi 1x2 per IE 7 e meno che vorrebbe anche "zoom: 1;" che è stato tolto per segnalazione sui moderni Browser. */ background: transparent url("/common-files/img/icons_menu/menu_plus_double.svg") no-repeat scroll 0px 0px; } a.menu-minus-link { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ background: transparent url("/common-files/img/icons_menu/menu_minus_double.svg") no-repeat scroll 0px 0px; } #menu-jo_open a.menu-plus-link, #menu-jo_open a.menu-minus-link { width: 15px; height: 15px; position: relative; top: 2px; margin-right: 4px; background-size: 15px; } div.menumobile a.menu-plus-link, div.menumobile a.menu-minus-link { width: 25px; height: 25px; position: relative; top: 5px; margin-right: 7px; background-size: 25px; } html>body #menu-jo_open a.menu-plus-link:hover, html>body #menu-jo_open a.menu-minus-link:hover { background-position: 0px -15px; color: green; } html>body div.menumobile a.menu-plus-link:hover, html>body div.menumobile a.menu-minus-link:hover { background-position: 0px -25px; color: green; } a.menu-plus-link:hover, a.menu-minus-link:hover { color: green; } /* Per IE fino alla versione 6, per evitare il rollover grafico ed il relativo flickring. Cambia solo il colore del testo. */ /* MENU PER LAYOUT "MOBILE" AD UNO O PIU' LIVELLI (LA LISTA DELLE VOCI E' QUELLA DEL MENU AD ALBERO), CON ICONA "BURGER MENU" PER APERTURA TENDINA LISTA VOCI PIU' ALTRE ICONE PER FUNZIONI PRINCIPALI. */ div.menumobile { position: absolute; right: 0px; display: none; z-index: 100; /* Serve per essere sicuri che il menu aprendosi si sovrapponga a quanto sta sotto. */ max-width: 80%; font-size: 132%; overflow: hidden; padding: 0.2em 0.8em 2em 0.8em; border-style: solid; border-width: 0px 0px 1px 1px; border-color: #ADD8E6; border-radius: 15px 0px 0px 15px; background-color: #F0F8FF; } a.menumobile_button { /* La proprietà "display: block;" viene assegnata con la classe generale "layout-mobile". */ position: fixed; z-index: 110; visibility: visible; text-decoration: none; font-weight: normal; font-style: normal; font-variant: normal; white-space: nowrap; margin: auto; padding: 3px; border-style: solid; border-width: 2px; border-radius: 5px; border-color: #CCCCCC #666666 #666666 #CCCCCC; background-color: #59D5FF; } a.menumobile_button:hover { border-color: #333333 #999999 #999999 #333333; background-color: #00FFFF; } p.menumobile_button { position: fixed; z-index: 110; visibility: visible; text-decoration: none; font-weight: normal; font-style: normal; font-variant: normal; white-space: nowrap; margin: auto; padding: 3px; border-style: solid; border-width: 2px; border-radius: 5px; border-color: #333333 #999999 #999999 #333333; background-color: #DCDCDC; } a.menumobile_button.burger { position: fixed; /* Solo il bottone del menu viene lasciato fisso anche in "landscape", mentre scompare la testata con il logo. */ background-color: #F0F8FF; } a.menumobile_button.burger:hover { background-color: #FFFC6B; } a.menumobile_button.close { /* La proprietà "display: block;" viene assegnata con la classe generale "layout-mobile". Anche questo bottone, che ne sostituisce un'altro, rimane fisso anche in "landscape", per consentire sempre la chiusura della tendina che si è aperta. */ position: fixed; /* Solo il bottone del menu viene lasciato fisso anche in "landscape", mentre scompare la testata con il logo. */ visibility: hidden; border-style: solid; border-width: 2px; border-radius: 5px 5px 0px 0px; border-color: #CCCCCC #666666 #F0F8FF #CCCCCC; background-color: #F0F8FF; } a.menumobile_button.close:hover { border-color: #333333 #999999 #FFFC6B #333333; background-color: #FFFC6B; } div.menumobile_button_home { /* Divisione che copre l'intera testata, all'interno della quale viene "disegnato" il link-home nello spazio lasciato libero dai bottoni-menu. */ position: fixed; left: 0px; z-index: 106; /* Serve a portarla sopra il logo che ha 105 ma sotto i bottoni che hanno 110. */ width: 100%; } @media only screen and (min-aspect-ratio: 14/10) { /* Applicata per area di visualizzazione più larga dell'altezza (orientamento "landscape"). */ a.menumobile_button, p.menumobile_button, div.menumobile_button_home { position: absolute; } /* Solo il bottone del menu viene lasciato fisso anche in "landscape", mentre scompare la testata con il logo. */ } /* BARRA MENU (ORIZZONTALE) CON AL MASSIMO UN LIVELLO, REALIZZATA CON LISTE SENZA ORDINE. */ nav.menubar { position: sticky; position: -webkit-sticky; top: 0px; /* -webkit- per Safari */ z-index: 100; /* Serve per essere sicuri che il menu aprendosi si sovrapponga a quanto sta sotto. */ font-size: 108%; height: 50px; margin: 0px auto 23px auto; padding: 12px; /* Il padding sopra e sotto, insieme al colore di sfondo, servono per mantenere isolata la barra del menu rispetto al contenuto della pagina, quando la barra viene bloccata (sticky) in cima alla pagina. */ background-color: #FFFFFF; } nav.menubar td.home { /* Cella a sinistra a larghezza fissa per "Home", che può essere un gruppo o un link. La larghezza di questa cella è impostata, in una variabile, nella funzione che visualizza il menu "jo_display_menu_bar()". */ margin: 0px; padding: 0px; } nav.menubar td.cmd { /* Cella a destra per un numero variabile di bottoni a larghezza fissa, che sono dei link o se sono voci di gruppo si aprono in basso estendendosi a sinistra e non a destra. La larghezza del singolo bottone è impostata, in una variabile, nella funzione che visualizza il menu "jo_display_menu_bar()". */ margin: 0px; padding: 0px; } nav.menubar td.voci { /* Cella centrale, con la larghezza rimanente, per tutte le altre voci del menu. */ margin: 0px; padding: 0px; } nav.menubar ul { margin-top: 0px; padding-left: 0px; } /* Al primo livello di lista (ul li) ci sono le voci di menu orizzontali di vario genere, al secondo livello di lista (ul li ul li) ci sono le voci di menu che si aprono in basso e sono sempre dei link. */ nav.menubar ul li { position: relative; list-style: none; max-width: 300px; height: 50px; margin: 0px 2px; padding: 0px; text-align: center; float: left; border-radius: 8px 8px 0px 0px; color: #000000; background-color: #59D5FF; } nav.menubar td.voci ul li { max-width: 100%; min-width: 140px; } nav.menubar td.home ul li { background-color: #FFE16B; } nav.menubar td.home ul li.group:hover { background-color: #A9DEC1; } nav.menubar td.home ul li.link:hover { background-color: #00FFFF; } nav.menubar td.cmd ul li { background-color: #FFE16B; } nav.menubar td.cmd ul li.link:hover { background-color: #00FFFF; } nav.menubar ul li.group { border-bottom: 5px solid #3CB371; } nav.menubar ul li.group.groupsel { /* Classe aggiuntiva per la voce di gruppo che contiene la voce di menu attualmente selezionata, che essendo una voce di dettaglio non è visibile. */ border-bottom-color: #FF00FF; } nav.menubar ul li.group div { /* Serve quando la voce di gruppo
  • ha un balloon di aiuto, esso viene disegnato su una
    di uguale grandezza, perché se lo si disegna sulla voce
  • non funziona bene la sua disattivazione, perché
  • contiene una lista
      e viene chiuso con dopo la lista
        . */ height: 55px; } nav.menubar ul li.group p { padding: 10px 5% 0px 5%; } nav.menubar ul li.group:hover { background-color: #A9DEC1; } nav.menubar ul li.link { border-bottom: 5px solid #0099FF; } nav.menubar ul li.link:hover { background-color: #00FFFF; } nav.menubar ul li.nolink, nav.menubar td.cmd ul li.nolink, nav.menubar ul li ul li.nolink { /* Voce di menu corrente (non link) - Riquadro. */ background-color: #DCDCDC; border-bottom: 5px solid #0099FF; } nav.menubar ul li.nolink p, nav.menubar td.cmd ul li.nolink p, nav.menubar ul li ul li.nolink p { /* Voce di menu corrente (non link) - Scritta. */ padding: 10px 5% 0px 5%; color: #B8860B; font-weight: normal; font-style: italic; font-variant: normal; } nav.menubar ul li a { display: block; /* Lo trasforma per fargli occupare tutta la larghezza disponibile. */ padding: 10px 5% 0px 5%; height: 45px; /* Ne aumenta l'altezza affinché sia cliccabile tutto il riquadro, anche il bordo inferiore con il colore di sottolineatura. */ text-decoration: none; color: #000000; } nav.menubar ul li ul { position: absolute; z-index: 100; /* Serve per Internet Explorer che non fa ereditare questo valore dal contenitore generale