-
PedoBearShock+1
.User deleted
Menu utente con tendine orizzontali [v1.0]
Questa guida si prefigge lo scopo di illustrarvi la creazione di una barra menu alternativa, dove, oltre al menu utente, potrete inserire un logo ed un menu personalizzato. Il codice è preimpostato per supportare eventuali tendine aggiuntive, inserite utilizzando l'innovativo script "Aggiungere voci al menu utente [v1.2]"
Installazione
Andate in Colori e Stili, e rimuovete totalmente ogni codice relativo al menu utente. Questo passo è essenziale, altrimenti incorrerete in problemi di visualizzazione.
Una volta rimosso, copiate ed incollate al suo posto il codice che trovate di seguito:SPOILER (clicca per visualizzare)CODICE/* MENU UTENTE CON TENDINE IN ORIZZONTALE */
/* Realizzato da _Lati_ - http://ffmagazine.forumfree.it/?t=64801810 */
#menuwrap {background: #2D3542; left: 0; position: fixed; top: 0; width: 100%; z-index: 9}
#menuwrap, .menuwrap, .left .menu:first-child a {height: 58px} #menuwrap a {border-bottom: 0}
#menu_sup, #menu_inf {margin: 0; padding: 0 0 0 20px} #menu_sup, #menu_inf, .menuwrap .left ul, .menuwrap .left ul li ul {width: 920px}
/* MENU personalizzato */
.bar_submenu {height: 30px; line-height: 30px; position: fixed; top: 58px; width: 100%; z-index: 9; background: #2D3542; box-shadow: inset 0 10px 20px rgba(0, 0, 0, .2), 0 -1px rgba(255, 255, 255, .05), 0 1px rgba(255, 255, 255, .05)}
.buttons_menu {list-style-type: none; padding: 0; margin: 0; position: relative}
.buttons_menu li {display: inline-block; padding: 0 5px; color: #EAEAEA; font-weight: bold; font-family: 'Tahoma', Arial, Sans-serif; font-size: 14px}
/* colore voci */
.buttons_menu .b_menu > a {color: #EAEAEA}
.buttons_menu .b_menu:hover > a, .buttons_menu .b_menu > a:hover {color: #7952AB}
/* tendine */
.b_menu ul {display: none; position: absolute; z-index: 9; background: #2C3340; width: 10em; margin-left: -10px; padding: 0; text-align: left; border: 1px solid #424853}
.b_menu ul li {position: relative}
.b_menu ul ul {margin: 0; top: -1px; left: 100%; padding-top: 0} .b_menu ul ul li:first-child {border-top: 0}
.buttons_menu li:hover > ul {display: block}
.b_menu li {display: block; line-height: 25px; padding: 0 10px; border-top: 1px solid #424853}
.b_menu li a {color: #9ABE64; font-family: 'Tahoma', Sans-serif; font-size: 11px; font-weight: bold; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8)}
.b_menu li:hover > a, .b_menu li > a:hover {color: #AC8FCC}
/* MENU utente */
/* per modificare la posizione orizzontaler del menu utente, agire su margin-left: 180px */
body > div:first-child {width: 380px; left: 50%; margin-left: 75px}
.menuwrap .left, .menuwrap > .left > li, .menuwrap .left .menu > ul > li, .menuwrap .left ul li ul li {float: right}
.menuwrap .right {position: absolute; top: 58px; right: 50%; margin-right: -198px} .menuwrap .right:hover {display: block !important}
.menuwrap .nick, .menuwrap .left .menu ul span, .menuwrap .left .menu ul strong {display: none}
.menuwrap form {padding: 0 11px 0 5px}
.menuwrap li {color: #FFF; line-height: 31px}
.menuwrap a {margin: 0; padding: 0 9px; font-family: 'Arial', Tahoma, sans-serif; font-weight: bold; line-height: 30px; font-size: 11px; color: #9ABE64; text-shadow: 0 1px 3px rgba(0, 0, 0, .8)} .menuwrap a:hover {color: #AC8FCC; border: 0}
.menuwrap b {color: #FFF}
.menuwrap strong {color: #FFF; text-shadow: none; font-family: 'Tahoma', Sans-serif; font-weight: bold; font-size: 13px; padding: 0 5px}
.menuwrap em {position: absolute; margin: 10px 0 0 22px; line-height: 12px; padding: 2px 5px; color: #FFF; text-shadow: none; font-size: 12px; background: #900000; border-radius: 3px; box-shadow: 2px 2px 5px rgba(0, 0, 0, .5)}
.menuwrap .icon a {padding: 0 6px}
#m_up a {padding: 0 11px 0 0}
#c_up {position: absolute; right: 10px; bottom: 10px; opacity: .5}
#f_up {position: fixed; bottom: 20px; right: 1%; opacity: .9}
.p_up:hover, #c_up:hover, #f_up:hover {opacity: 1; text-decoration: none; border: 0}
.menuwrap .avatar {height: 35px !important; width: 35px !important; margin-top: 10px; border: 2px solid transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .3), 0 0 3px 3px rgba(0, 0, 0, .3); border-radius: 5px}
.menuwrap .avatar:hover {border: 2px solid transparent}
/* icone voci menu utente */
.menuwrap .left .menu > a {font-size: 0; background: no-repeat center; opacity: .8; width: 35px; height: 58px} .menuwrap .left .menu:hover > a, .menuwrap .left .menu > a:hover, .menuwrap .left .menu:first-child > a {opacity: 1}
.menuwrap .left .menu:not(.c_menu):nth-child(2) > a {background-image: url('http://latiprod.altervista.org/Video/img/messenger_hover.png')}
.menuwrap .left .menu:not(.c_menu):nth-child(3) > a {background-image: url('http://latiprod.altervista.org/Video/img/discussioni_hover.png')}
.menuwrap .left .menu:not(.c_menu):nth-child(4) > a {background-image: url('http://latiprod.altervista.org/Video/img/admin_hover.png')}
.menuwrap .left > li:not(.c_menu):nth-child(5) > a {background-image: url('http://latiprod.altervista.org/Video/img/moderation_hover.png')}
/* se avete installato lo script AGGIUNGI VOCI AL MENU UTENTE, decommentate le righe seguenti, inserendo l'immagine che desiderate, ed aggiungete "+ .c_menu" per ogni tendina aggiuntiva */
/* .menuwrap .left .menu + .c_menu > a {background-image: url('LINK_IMMAGINE')}
.menuwrap .left .menu + .c_menu + .c_menu > a {background-image: url('LINK_IMMAGINE')} */
/* MENU utente: tendina orizzontale */
.menuwrap .left .menu:hover:after {display: block; width: 0; height: 0; content: " "; border-color: transparent transparent #252C36; border-style: solid; border-width: 9px; position: relative; top: -18px; margin: 0 auto}
.menuwrap .left ul {position: absolute; right: 0; height: 30px; background: url("http://elgringo.altervista.org/albums/ffmagazine/magholic/bar_submenu.jpg")}
/* MENU utente: sotto-tendina orizzontale */
.menuwrap .left ul ul {left: 50%; margin-left: -460px; margin-top: -5px; top: 35px; background: #374458; border-radius: 0 0 5px 5px}
/* MENU utente: tendina menu icone */
.menuwrap .right ul {background: #2C3340; padding: 5px; width: 14em; border-radius: 0 0 5px 5px}
/* SUB MENU contestuale(dropright) */
/* Sposta msg pvt */
.submenu.alternative {position: static}
.submenu.alternative ul {position: absolute; top: 34px !important}
/* LOGIN VELOCE */
.menuwrap label, .menuwrap form a {padding: 0; font-size: 11px}
.menuwrap label:hover {color: #FFF}
.menuwrap input {padding: 3px; font-family: verdana; font-size: 11px; color: #505A6A; background: #20252E; border: 0; border-top: 1px solid #171A21; border-bottom: 1px solid #38465D; border-radius: 4px}
.menuwrap .login form {padding: 0; padding-top: 0}
.menuwrap .login input {position: absolute; width: 120px; margin-top: 7px}
.menuwrap .login input:nth-child(5), .menuwrap .login input:nth-child(6) {margin-top: 32px; margin-left: -8px}
.menuwrap .login form a {display: block; margin-left: 140px; line-height: 0; padding-top: 4px}
.menuwrap .login input:nth-child(7), .menuwrap .left .login em {bottom: 6px !important; display: inline-block; width: 65px; padding: 3px 5px; margin-left: 80px; text-align: center; color: #FFF; font: bold 12px arial; background: #900000; border: 0; border-radius: 3px; box-shadow: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8)}
.menuwrap .login input:nth-child(7) {margin-left: 125px; padding: 2px 5px}
Andate poi in Gestione HTML --> Codice HTML che sarà mostrato in CIMA a tutte le pagine ed inserite questo:SPOILER (clicca per visualizzare)CODICE<!-- MENU UTENTE CON TENDINE IN ORIZZONTALE - http://ffmagazine.forumfree.it/?t=64801810 //-->
<div align="center" id="menuwrap"><div align="left" id="menu_sup"><a href="/"><img src="http://elgringo.altervista.org/albums/ffmagazine/magholic/logo2.png"></a></div>
<div class="bar_submenu"><div align="left" id="menu_inf"><ul class="buttons_menu">
<li class="b_menu"><a href="#"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Apps-ktip-icon.png"> Voce 1</a></li>
<li class="b_menu"><a href="#"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Apps-preferences-plugin-script-icon.png"> Voce 2</a>
<ul>
<li><a href="#">Sottovoce 1</a></li>
<li><a href="#">Sottomenu</a>
<ul><li><a href="#">Voce 1</a></li></ul>
</li>
</ul>
</li>
<li class="b_menu"><a href="#"><img src="http://icons.iconarchive.com/icons/kyo-tux/delikate/16/Internet-icon.png"> Voce 3</a>
<ul>
<li><a href="#">Sottovoce 1</a></li>
<li><a href="#">Sottovoce 2</a></li>
<li><a href="#">Sottovoce 3</a></li>
</ul>
</li>
</ul></div></div></div>
Guardiamo adesso cosa è possibile modificare; iniziamo dal codice CSS.CODICE#menuwrap {background: #2D3542; left: 0; position: fixed; top: 0; width: 100%; z-index: 9}
E' possibile modificare il colore del background. Lasciare inalterati gli altri attributi.CODICE#menu_sup, #menu_inf, .menuwrap .left ul, .menuwrap .left ul li ul {width: 920px}
Modificare la larghezza a seconda della larghezza del container del vostro forum.CODICE.bar_submenu {height: 30px; line-height: 30px; position: fixed; top: 58px; width: 100%; z-index: 9; background: #2D3542; box-shadow: inset 0 10px 20px rgba(0, 0, 0, .2), 0 -1px rgba(255, 255, 255, .05), 0 1px rgba(255, 255, 255, .05)}
Consente di personalizzare lo stile della barra inferiore, dove è situato il menu con le icone ed il menu personalizzato. E' possibile modificare backgrounde e box-shadow. Se desiderate modificare l'altezza, abbiate cura di modificare anche margini e line-height degli altri elementi.CODICE.buttons_menu li {display: inline-block; padding: 0 5px; color: #EAEAEA; font-weight: bold; font-family: 'Tahoma', Arial, Sans-serif; font-size: 14px}
/* colore voci */
.buttons_menu .b_menu > a {color: #EAEAEA}
.buttons_menu .b_menu:hover > a, .buttons_menu .b_menu > a:hover {color: #7952AB}
Permette di modificare le voci del menu utente personalizzato (Voce 1, Voce 2, Voce 3), anche all'hover del mouse.CODICE.b_menu ul {display: none; position: absolute; z-index: 9; background: #2C3340; width: 10em; margin-left: -10px; padding: 0; text-align: left; border: 1px solid #424853}
Identifica lo stile delle tendine del menu personalizzato. Modificare solamente il background ed il bordo.CODICE.menuwrap .avatar {height: 35px !important; width: 35px !important; margin-top: 10px; border: 2px solid transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .3), 0 0 3px 3px rgba(0, 0, 0, .3); border-radius: 5px}
Permette la modifica degli stili dell'avatar del menu utente.CODICE/* icone voci menu utente */
.menuwrap .left .menu > a {font-size: 0; background: no-repeat center; opacity: .8; width: 35px; height: 58px} .menuwrap .left .menu:hover > a, .menuwrap .left .menu > a:hover, .menuwrap .left .menu:first-child > a {opacity: 1}
.menuwrap .left .menu:not(.c_menu):nth-child(2) > a {background-image: url('http://latiprod.altervista.org/Video/img/messenger_hover.png')}
.menuwrap .left .menu:not(.c_menu):nth-child(3) > a {background-image: url('http://latiprod.altervista.org/Video/img/discussioni_hover.png')}
.menuwrap .left .menu:not(.c_menu):nth-child(4) > a {background-image: url('http://latiprod.altervista.org/Video/img/admin_hover.png')}
.menuwrap .left > li:not(.c_menu):nth-child(5) > a {background-image: url('http://latiprod.altervista.org/Video/img/moderation_hover.png')}
Consente di scegliere le icone del menu utente, basterà modificare i link di background-image (nell'ordine: messenger, discussioni, amministrazione, moderazione). Tutte le immagini devono avere le stesse dimensioni (in questo caso, sono tutte 35x58px).CODICE/* se avete installato lo script AGGIUNGI VOCI AL MENU UTENTE, decommentate le righe seguenti, inserendo l'immagine che desiderate, ed aggiungete "+ .c_menu" per ogni tendina aggiuntiva */
/* .menuwrap .left .menu + .c_menu > a {background-image: url('LINK_IMMAGINE')}
.menuwrap .left .menu + .c_menu + .c_menu > a {background-image: url('LINK_IMMAGINE')} */
Come specificato, qualora aveste inserito tendine aggiuntive mediante lo script "Aggiungere voci al menu utente [v1.2]", sarà necessario decommentare questa parte, inserendo poi il link dell'immagine al posto di LINK_IMMAGINE, ed avendo cura di aggiungere una riga di codice (ed un + .c_menu) per ogni tendina aggiuntiva oltre la prima.CODICE/* MENU utente: tendina orizzontale */
.menuwrap .left .menu:hover:after {display: block; width: 0; height: 0; content: " "; border-color: transparent transparent #252C36; border-style: solid; border-width: 9px; position: relative; top: -18px; margin: 0 auto}
.menuwrap .left ul {position: absolute; right: 0; height: 30px; background: url("http://elgringo.altervista.org/albums/ffmagazine/magholic/bar_submenu.jpg")}
Passando sulle icone del menu utente, si crea un background che si sovrappone alla barra inferiore, così da nasconderne i contenuti. Il primo selettore permette di personalizzare il triangolino che compare sotto le icone, il secondo selettore identifica il background. E' opportuno inserire una immagine od uno stile css che siano identici a quanto specificato in .bar_submenuCODICE/* MENU utente: sotto-tendina orizzontale */
.menuwrap .left ul ul {left: 50%; margin-left: -460px; margin-top: -5px; top: 35px; background: #374458; border-radius: 0 0 5px 5px}
Consente di personalizzare lo stile della sottotendina (quella che compare ad esempio quando passate sulle voci del menu dell'amministrazione). Potete modificare il margin-left, il background e il border-radius. Lasciate invariato il resto.CODICE/* MENU utente: tendina menu icone */
.menuwrap .right ul {background: #2C3340; padding: 5px; width: 14em; border-radius: 0 0 5px 5px}
Personalizza lo stile delle tendine del menu a destra (icone e cerca)CODICE.menuwrap input {padding: 3px; font-family: verdana; font-size: 11px; color: #505A6A; background: #20252E; border: 0; border-top: 1px solid #171A21; border-bottom: 1px solid #38465D; border-radius: 4px}
Personalizza lo stile degli input del menu (ad esempio, il form cerca).
Passiamo adesso al codice HTML.
In questa parteCODICE<div align="left" id="menu_sup"><a href="/"><img src="http://elgringo.altervista.org/albums/ffmagazine/magholic/logo2.png"></a></div>
potete inserire il logo del forum, oppure qualche altro contenuto a piacere.
Se volete aggiungere voci al menu a sinistra, nella barra inferiore, vi basterà replicare questa parte:CODICE<li class="b_menu"><a href="#"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Apps-ktip-icon.png"> Voce 1</a></li>
inserendola prima diCODICE</ul></div></div></div>
Menu utente con tendine orizzontali [v1.0]
Questa guida si prefigge lo scopo di illustrarvi la creazione di una barra menu alternativa, dove, oltre al menu utente, potrete inserire un logo ed un menu personalizzato. Il codice è preimpostato per supportare eventuali tendine aggiuntive, inserite utilizzando l'innovativo script "Aggiungere voci al menu utente [v1.2]"
Installazione
Andate in Colori e Stili, e rimuovete totalmente ogni codice relativo al menu utente. Questo passo è essenziale, altrimenti incorrerete in problemi di visualizzazione.
Una volta rimosso, copiate ed incollate al suo posto il codice che trovate di seguito:SPOILER (clicca per visualizzare)CODICE/* MENU UTENTE CON TENDINE IN ORIZZONTALE */
/* Realizzato da _Lati_ - http://ffmagazine.forumfree.it/?t=64801810 */
#menuwrap {background: #2D3542; left: 0; position: fixed; top: 0; width: 100%; z-index: 9}
#menuwrap, .menuwrap, .left .menu:first-child a {height: 58px} #menuwrap a {border-bottom: 0}
#menu_sup, #menu_inf {margin: 0; padding: 0 0 0 20px} #menu_sup, #menu_inf, .menuwrap .left ul, .menuwrap .left ul li ul {width: 920px}
/* MENU personalizzato */
.bar_submenu {height: 30px; line-height: 30px; position: fixed; top: 58px; width: 100%; z-index: 9; background: #2D3542; box-shadow: inset 0 10px 20px rgba(0, 0, 0, .2), 0 -1px rgba(255, 255, 255, .05), 0 1px rgba(255, 255, 255, .05)}
.buttons_menu {list-style-type: none; padding: 0; margin: 0; position: relative}
.buttons_menu li {display: inline-block; padding: 0 5px; color: #EAEAEA; font-weight: bold; font-family: 'Tahoma', Arial, Sans-serif; font-size: 14px}
/* colore voci */
.buttons_menu .b_menu > a {color: #EAEAEA}
.buttons_menu .b_menu:hover > a, .buttons_menu .b_menu > a:hover {color: #7952AB}
/* tendine */
.b_menu ul {display: none; position: absolute; z-index: 9; background: #2C3340; width: 10em; margin-left: -10px; padding: 0; text-align: left; border: 1px solid #424853}
.b_menu ul li {position: relative}
.b_menu ul ul {margin: 0; top: -1px; left: 100%; padding-top: 0} .b_menu ul ul li:first-child {border-top: 0}
.buttons_menu li:hover > ul {display: block}
.b_menu li {display: block; line-height: 25px; padding: 0 10px; border-top: 1px solid #424853}
.b_menu li a {color: #9ABE64; font-family: 'Tahoma', Sans-serif; font-size: 11px; font-weight: bold; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8)}
.b_menu li:hover > a, .b_menu li > a:hover {color: #AC8FCC}
/* MENU utente */
/* per modificare la posizione orizzontaler del menu utente, agire su margin-left: 180px */
body > div:first-child {width: 380px; left: 50%; margin-left: 75px}
.menuwrap .left, .menuwrap > .left > li, .menuwrap .left .menu > ul > li, .menuwrap .left ul li ul li {float: right}
.menuwrap .right {position: absolute; top: 58px; right: 50%; margin-right: -198px} .menuwrap .right:hover {display: block !important}
.menuwrap .nick, .menuwrap .left .menu ul span, .menuwrap .left .menu ul strong {display: none}
.menuwrap form {padding: 0 11px 0 5px}
.menuwrap li {color: #FFF; line-height: 31px}
.menuwrap a {margin: 0; padding: 0 9px; font-family: 'Arial', Tahoma, sans-serif; font-weight: bold; line-height: 30px; font-size: 11px; color: #9ABE64; text-shadow: 0 1px 3px rgba(0, 0, 0, .8)} .menuwrap a:hover {color: #AC8FCC; border: 0}
.menuwrap b {color: #FFF}
.menuwrap strong {color: #FFF; text-shadow: none; font-family: 'Tahoma', Sans-serif; font-weight: bold; font-size: 13px; padding: 0 5px}
.menuwrap em {position: absolute; margin: 10px 0 0 22px; line-height: 12px; padding: 2px 5px; color: #FFF; text-shadow: none; font-size: 12px; background: #900000; border-radius: 3px; box-shadow: 2px 2px 5px rgba(0, 0, 0, .5)}
.menuwrap .icon a {padding: 0 6px}
#m_up a {padding: 0 11px 0 0}
#c_up {position: absolute; right: 10px; bottom: 10px; opacity: .5}
#f_up {position: fixed; bottom: 20px; right: 1%; opacity: .9}
.p_up:hover, #c_up:hover, #f_up:hover {opacity: 1; text-decoration: none; border: 0}
.menuwrap .avatar {height: 35px !important; width: 35px !important; margin-top: 10px; border: 2px solid transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .3), 0 0 3px 3px rgba(0, 0, 0, .3); border-radius: 5px}
.menuwrap .avatar:hover {border: 2px solid transparent}
/* icone voci menu utente */
.menuwrap .left .menu > a {font-size: 0; background: no-repeat center; opacity: .8; width: 35px; height: 58px} .menuwrap .left .menu:hover > a, .menuwrap .left .menu > a:hover, .menuwrap .left .menu:first-child > a {opacity: 1}
.menuwrap .left .menu:not(.c_menu):nth-child(2) > a {background-image: url('http://latiprod.altervista.org/Video/img/messenger_hover.png')}
.menuwrap .left .menu:not(.c_menu):nth-child(3) > a {background-image: url('http://latiprod.altervista.org/Video/img/discussioni_hover.png')}
.menuwrap .left .menu:not(.c_menu):nth-child(4) > a {background-image: url('http://latiprod.altervista.org/Video/img/admin_hover.png')}
.menuwrap .left > li:not(.c_menu):nth-child(5) > a {background-image: url('http://latiprod.altervista.org/Video/img/moderation_hover.png')}
/* se avete installato lo script AGGIUNGI VOCI AL MENU UTENTE, decommentate le righe seguenti, inserendo l'immagine che desiderate, ed aggiungete "+ .c_menu" per ogni tendina aggiuntiva */
/* .menuwrap .left .menu + .c_menu > a {background-image: url('LINK_IMMAGINE')}
.menuwrap .left .menu + .c_menu + .c_menu > a {background-image: url('LINK_IMMAGINE')} */
/* MENU utente: tendina orizzontale */
.menuwrap .left .menu:hover:after {display: block; width: 0; height: 0; content: " "; border-color: transparent transparent #252C36; border-style: solid; border-width: 9px; position: relative; top: -18px; margin: 0 auto}
.menuwrap .left ul {position: absolute; right: 0; height: 30px; background: url("http://elgringo.altervista.org/albums/ffmagazine/magholic/bar_submenu.jpg")}
/* MENU utente: sotto-tendina orizzontale */
.menuwrap .left ul ul {left: 50%; margin-left: -460px; margin-top: -5px; top: 35px; background: #374458; border-radius: 0 0 5px 5px}
/* MENU utente: tendina menu icone */
.menuwrap .right ul {background: #2C3340; padding: 5px; width: 14em; border-radius: 0 0 5px 5px}
/* SUB MENU contestuale(dropright) */
/* Sposta msg pvt */
.submenu.alternative {position: static}
.submenu.alternative ul {position: absolute; top: 34px !important}
/* LOGIN VELOCE */
.menuwrap label, .menuwrap form a {padding: 0; font-size: 11px}
.menuwrap label:hover {color: #FFF}
.menuwrap input {padding: 3px; font-family: verdana; font-size: 11px; color: #505A6A; background: #20252E; border: 0; border-top: 1px solid #171A21; border-bottom: 1px solid #38465D; border-radius: 4px}
.menuwrap .login form {padding: 0; padding-top: 0}
.menuwrap .login input {position: absolute; width: 120px; margin-top: 7px}
.menuwrap .login input:nth-child(5), .menuwrap .login input:nth-child(6) {margin-top: 32px; margin-left: -8px}
.menuwrap .login form a {display: block; margin-left: 140px; line-height: 0; padding-top: 4px}
.menuwrap .login input:nth-child(7), .menuwrap .left .login em {bottom: 6px !important; display: inline-block; width: 65px; padding: 3px 5px; margin-left: 80px; text-align: center; color: #FFF; font: bold 12px arial; background: #900000; border: 0; border-radius: 3px; box-shadow: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8)}
.menuwrap .login input:nth-child(7) {margin-left: 125px; padding: 2px 5px}
Andate poi in Gestione HTML --> Codice HTML che sarà mostrato in CIMA a tutte le pagine ed inserite questo:SPOILER (clicca per visualizzare)CODICE<!-- MENU UTENTE CON TENDINE IN ORIZZONTALE - http://ffmagazine.forumfree.it/?t=64801810 //-->
<div align="center" id="menuwrap"><div align="left" id="menu_sup"><a href="/"><img src="http://elgringo.altervista.org/albums/ffmagazine/magholic/logo2.png"></a></div>
<div class="bar_submenu"><div align="left" id="menu_inf"><ul class="buttons_menu">
<li class="b_menu"><a href="#"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Apps-ktip-icon.png"> Voce 1</a></li>
<li class="b_menu"><a href="#"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Apps-preferences-plugin-script-icon.png"> Voce 2</a>
<ul>
<li><a href="#">Sottovoce 1</a></li>
<li><a href="#">Sottomenu</a>
<ul><li><a href="#">Voce 1</a></li></ul>
</li>
</ul>
</li>
<li class="b_menu"><a href="#"><img src="http://icons.iconarchive.com/icons/kyo-tux/delikate/16/Internet-icon.png"> Voce 3</a>
<ul>
<li><a href="#">Sottovoce 1</a></li>
<li><a href="#">Sottovoce 2</a></li>
<li><a href="#">Sottovoce 3</a></li>
</ul>
</li>
</ul></div></div></div>
Guardiamo adesso cosa è possibile modificare; iniziamo dal codice CSS.CODICE#menuwrap {background: #2D3542; left: 0; position: fixed; top: 0; width: 100%; z-index: 9}
E' possibile modificare il colore del background. Lasciare inalterati gli altri attributi.
#menu_sup, #menu_inf, .menuwrap .left ul, .menuwrap .left ul li ul {width: 920px}
Modificare la larghezza a seconda della larghezza del container del vostro forum.
.bar_submenu {height: 30px; line-height: 30px; position: fixed; top: 58px; width: 100%; z-index: 9; background: #2D3542; box-shadow: inset 0 10px 20px rgba(0, 0, 0, .2), 0 -1px rgba(255, 255, 255, .05), 0 1px rgba(255, 255, 255, .05)}
Consente di personalizzare lo stile della barra inferiore, dove è situato il menu con le icone ed il menu personalizzato. E' possibile modificare backgrounde e box-shadow. Se desiderate modificare l'altezza, abbiate cura di modificare anche margini e line-height degli altri elementi.
.buttons_menu li {display: inline-block; padding: 0 5px; color: #EAEAEA; font-weight: bold; font-family: 'Tahoma', Arial, Sans-serif; font-size: 14px}
/* colore voci */
.buttons_menu .b_menu > a {color: #EAEAEA}
.buttons_menu .b_menu:hover > a, .buttons_menu .b_menu > a:hover {color: #7952AB}
Permette di modificare le voci del menu utente personalizzato (Voce 1, Voce 2, Voce 3), anche all'hover del mouse.
.b_menu ul {display: none; position: absolute; z-index: 9; background: #2C3340; width: 10em; margin-left: -10px; padding: 0; text-align: left; border: 1px solid #424853}
Identifica lo stile delle tendine del menu personalizzato. Modificare solamente il background ed il bordo.
.menuwrap .avatar {height: 35px !important; width: 35px !important; margin-top: 10px; border: 2px solid transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, .3), 0 0 3px 3px rgba(0, 0, 0, .3); border-radius: 5px}
Permette la modifica degli stili dell'avatar del menu utente.
/* icone voci menu utente */
.menuwrap .left .menu > a {font-size: 0; background: no-repeat center; opacity: .8; width: 35px; height: 58px} .menuwrap .left .menu:hover > a, .menuwrap .left .menu > a:hover, .menuwrap .left .menu:first-child > a {opacity: 1}
.menuwrap .left .menu:not(.c_menu):nth-child(2) > a {background-image: url('http://latiprod.altervista.org/Video/img/messenger_hover.png')}
.menuwrap .left .menu:not(.c_menu):nth-child(3) > a {background-image: url('http://latiprod.altervista.org/Video/img/discussioni_hover.png')}
.menuwrap .left .menu:not(.c_menu):nth-child(4) > a {background-image: url('http://latiprod.altervista.org/Video/img/admin_hover.png')}
.menuwrap .left > li:not(.c_menu):nth-child(5) > a {background-image: url('http://latiprod.altervista.org/Video/img/moderation_hover.png')}
Consente di scegliere le icone del menu utente, basterà modificare i link di background-image (nell'ordine: messenger, discussioni, amministrazione, moderazione). Tutte le immagini devono avere le stesse dimensioni (in questo caso, sono tutte 35x58px).
/* se avete installato lo script AGGIUNGI VOCI AL MENU UTENTE, decommentate le righe seguenti, inserendo l'immagine che desiderate, ed aggiungete "+ .c_menu" per ogni tendina aggiuntiva */
/* .menuwrap .left .menu + .c_menu > a {background-image: url('LINK_IMMAGINE')}
.menuwrap .left .menu + .c_menu + .c_menu > a {background-image: url('LINK_IMMAGINE')} */
Come specificato, qualora aveste inserito tendine aggiuntive mediante lo script "Aggiungere voci al menu utente [v1.2]", sarà necessario decommentare questa parte, inserendo poi il link dell'immagine al posto di LINK_IMMAGINE, ed avendo cura di aggiungere una riga di codice (ed un + .c_menu) per ogni tendina aggiuntiva oltre la prima.
/* MENU utente: tendina orizzontale */
.menuwrap .left .menu:hover:after {display: block; width: 0; height: 0; content: " "; border-color: transparent transparent #252C36; border-style: solid; border-width: 9px; position: relative; top: -18px; margin: 0 auto}
.menuwrap .left ul {position: absolute; right: 0; height: 30px; background: url("http://elgringo.altervista.org/albums/ffmagazine/magholic/bar_submenu.jpg")}
Passando sulle icone del menu utente, si crea un background che si sovrappone alla barra inferiore, così da nasconderne i contenuti. Il primo selettore permette di personalizzare il triangolino che compare sotto le icone, il secondo selettore identifica il background. E' opportuno inserire una immagine od uno stile css che siano identici a quanto specificato in .bar_submenu
/* MENU utente: sotto-tendina orizzontale */
.menuwrap .left ul ul {left: 50%; margin-left: -460px; margin-top: -5px; top: 35px; background: #374458; border-radius: 0 0 5px 5px}
Consente di personalizzare lo stile della sottotendina (quella che compare ad esempio quando passate sulle voci del menu dell'amministrazione). Potete modificare il margin-left, il background e il border-radius. Lasciate invariato il resto.
/* MENU utente: tendina menu icone */
.menuwrap .right ul {background: #2C3340; padding: 5px; width: 14em; border-radius: 0 0 5px 5px}
Personalizza lo stile delle tendine del menu a destra (icone e cerca)
.menuwrap input {padding: 3px; font-family: verdana; font-size: 11px; color: #505A6A; background: #20252E; border: 0; border-top: 1px solid #171A21; border-bottom: 1px solid #38465D; border-radius: 4px}
Personalizza lo stile degli input del menu (ad esempio, il form cerca).
Passiamo adesso al codice HTML.
In questa parteCODICE<div align="left" id="menu_sup"><a href="/"><img src="http://elgringo.altervista.org/albums/ffmagazine/magholic/logo2.png"></a></div>
potete inserire il logo del forum, oppure qualche altro contenuto a piacere.
Se volete aggiungere voci al menu a sinistra, nella barra inferiore, vi basterà replicare questa parte:CODICE<li class="b_menu"><a href="#"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Apps-ktip-icon.png"> Voce 1</a></li>
inserendola prima diCODICE</ul></div></div></div>
Informazioni
Il codice non presenta problemi di visualizzazione noti sui browser più utilizzati.CITAZIONEIl codice è compatibile solamente con il NUOVO LAYOUT
In progetto: estensione della compatibilità anche al vecchio layout.
Credits
Il ForumFree Magazine non pretende crediti obbligatori con link e banner da inserirsi sul vostro forum. Tuttavia, dal momento che il codice ha richiesto uno sforzo non indifferente, chiunque volesse inserirli può trovarli qui di seguito (è fatto invece severo divieto di rimuovere i crediti presenti nel codice):CODICE<a href="http://ffmagazine.forumfree.it/?t=64801810">Menu utente con tendine orizzontali [v1.0]</a> creato da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=3347616">_Lati_</a>
E' possibile, come indicato nei termini di utilizzo, ridistribuire questa guida sui vostri forum lasciandone inalterati integrità e contenuti/crediti ed inserendo il seguente codice in fondo al messaggio:CODICE<div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><a title="Menu utente con tendine orizzontali [v1.0]" href="http://ffmagazine.forumfree.it/?t=64801810"><b>Menu utente con tendine orizzontali [v1.0]</b></a>
Realizzata da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=3347616">_Lati_</a> del <a title="Forumfree Magazine - Stai al passo con Forumfree!" href="http://ffmagazine.forumfree.it/"><b>ForumFree Magazine</b></a>.
Guida rilasciata sotto una <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Licenza Creative Commons 3.0</a>.</div>Menu utente con tendine orizzontali [v1.0]
Realizzata da _Lati_ del ForumFree Magazine.
Guida rilasciata sotto una Licenza Creative Commons 3.0.
.
Menu utente con tendine orizzontali [V1.0]_Lati_ Copyright |
