-
+2
.Menu Laterale vs. 1.0code created by Amphetamines'E' severamente vietato spacciare questa guida per propria o postarla in altri forum senza prima averne chiesto il consenso all'autore.
Con la nuova barra utente è possibile creare un menù alternativo al classico menù utente disposto in maniera orizzontale in cima al forum. In questa breve guida vi spiegherò come creare un .menuwrap disposto verticalmente al lato sinistro del forum.
001. E' necessario prima di tutto rimuovere tutta la parte del menu utente presente nel forum quindi andata in amministrazione > grafica > colori e stili e rimuovete: /* MENU principale */ - /* esci e news */ - /* numero msg e link REGISTRATI */ - /* MENU contestuale(dropdown) */ - /* SUB MENU contestuale(dropright) * - /* LOGIN VELOCE */ - /* CERCA */ [ATTENZIONE] dovete rimuovere tutta la parte sottostante non solamente i commenti in rosso.
002. Una volta rimosso il tutto inserite il seguente in codice:SPOILER (clicca per visualizzare)CODICE/* MENU CREATED BY AMPHETAMINES' - http://skinfactory.forumfree.it/?t=66233574 */
.menuwrap {font-family: arial; text-transform:uppercase; background: #000; margin-right: 10px}
.menuwrap .left {position: absolute; background-color: #000; top: 30px; left: 10px; width: 160px}
.menuwrap .right {position: absolute; background-color: #000; top: 155px; left: 10px; width: 160px}
.menuwrap .left li, .menuwrap .right li {display: block}
.menuwrap .right span {float:left; display:inline}
.menuwrap li {line-height: 2.6em; color: #AAA}
.menuwrap a {margin: 0; padding: 0 11px; font-size: 9px; color: #AAA; letter-spacing: 1px}
.menuwrap a:hover {color: #FFF; border: 0}
.menuwrap .icon {padding: 0 0; float:left; margin: 0}
#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}
/* esci e news */
.menuwrap b {color: #FFF}
/* numero msg e link REGISTRATI */
.menuwrap em {padding: 2px 5px; color: #FFF; text-shadow: none; background: #525252; border-radius: 0}
.menuwrap .nick {margin-left: .6em}
.menuwrap form {padding: 0 11px 0 5px}
/* MENU contestuale(dropdown) */
.menu > a:hover, .menu:hover > a {color: #FFF}
.menu ul {width: 150px; background-color: #000; position: absolute; top: 0; left: 150px}
.menu ul {transition: .5s opacity linear; filter: alpha(opacity=50); opacity: .5} .menu ul:hover {filter: alpha(opacity=100); opacity: 1}
.menu li {padding: 5px; line-height: 100%; color: #AAA}
.menu li:first-child {padding-top: 0; border-top: 0}
.menu li strong {color: #FFF}
.menu li a {padding: 5px; font-size: 10px; color: #AAA}
.menu li a:hover, .menu li:hover > a {color: #FFF; background: #373737}
/* SUB MENU contestuale(dropright) */
/* Sposta msg pvt */
.submenu.alternative ul {border-top: 1px solid #080808; margin-top: -2px}
.submenu.alternative li:first-child {padding: 3px 4px; border-top: 0}
/* LOGIN VELOCE */
.menuwrap label, .menuwrap form a {padding: 0; font-size: 10px}
.menuwrap label:hover {color: #FFF}
.menuwrap input {padding: 3px; font: 11px verdana, arial, sans-serif; color: #000; background: #AAA; border: 1px solid #000; border-radius: 4px; box-shadow: 0 1px 0 #444}
.menuwrap input:hover {cursor: pointer; background: #BBB}
.menuwrap input:focus {cursor: default; background: #DDD; outline: none; box-shadow: 0 1px 5px #888}
.menuwrap input[type=submit] {padding: 2px; text-shadow: 0 -1px 0 #444; color: #DDD; border-radius: 4px;
background: #424242; border: 1px solid rgba(0, 0, 0, .5); box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .3), inset 0 10px rgba(255, 255, 255, .2), inset 0 10px 20px rgba(255, 255, 255, .25), inset 0 -15px 30px rgba(0, 0, 0, .3)}
.menuwrap input[type=submit]:hover {color: #FFF; background: #555}
/* CERCA */
.menuwrap .search input {display:block; margin-top: 35px; margin-bottom: 5px; color: #CCC; background: #666 url('http://img.forumfree.net/style_images/52/icon_search.png') no-repeat 96% -12%}
.menuwrap .search input:hover {color: #E0E0E0; background-color: #6F6F6F}
.menuwrap .search input:focus {color: #FFF; background-color: #888; background-position: 96.5% 110%}
003. Andate in grafica > codici HTML > in cima al forum ed inserite:CODICE<div style="width:170px; background-color:#000; height:100%; position:fixed; top:0px"></div>
Questo vi permetterà di rendere più uniforme il menu utente.
[NOTE] Potete rimuovere l'opacità e l'effetto di transizione cancellando questa parte di codice:CODICE.menu ul {transition: .5s opacity linear; filter: alpha(opacity=50); opacity: .5} .menu ul:hover {filter: alpha(opacity=100); opacity: 1}
Questo tipo di codice è stato sviluppato con il menu utente di defaut della skin di base pertanto può essere modificato come modifichereste qualsiasi tipo di menu.Potete utilizzare tranquillamente questa guida senza l'inserimento di credits ma se il tutorial vi è stato utile potete tranquillamente inserirli:
Menu Laterale vs. 1.0 for Skin Factory created by Amphetamines'CODICE<a href="http://skinfactory.forumfree.it/?t=66233574">Menu Laterale vs. 1.0</a> for <a href="http://skinfactory.forumfree.it/">Skin Factory</a> created by <a href="http://skinfactory.forumfree.it/?act=Profile&MID=7120644">Amphetamines'</a>
E' invece fatto divieto di modificare i credits presenti nel CSS.
Edited by Amphetamines' - 20/6/2013, 11:24
. -
.
Ok penso che la statua te la faro..(disegnata ti va bene?*_*)
Grazie per aver postato il codice : D. -
.
L'ho fatto subito dopo che l'hai chiesto.. era abbastanza semplice da fare! XD
Attendo di vederla disegnata allora! ù____ùCITAZIONEGrazie per aver postato il codice : D
di nulla, figurati! (:. -
.
Siii allora te la disegno subito,come la vorresti la statua?:3 hi hi hi CITAZIONEL'ho fatto subito dopo che l'hai chiesto
Ti ringrazio davvero davvero davvero ♥. -
.
Valutiamo il prima possibile =) . -
.|Ye|.+1 .
User deleted
Il tutorial è buono! Ma secondo me per renderlo ottimo dovresti correggere/aggiungere alcune cose:
- spiega come aggiungere/rimuovere l'effetto di transizione durante le varie aperture dei blocchi, come fai vedere nella preview. Io ho testato il codice su un forum di prova e ho visto che è statico, non ho guardato se nel codice ci sono errori ma da quello che ho capito non c'è transizione;
- dove scrivi di rimuovere le varie parti specifica che bisogna eliminare tutto il codice dopo. Non vorrei che qualcuno cancellasse solo i commenti e poi si mettesse a chiedere perché non gli funziona il codice/ci sono delle anomalie;
- specifica in che zona di HTML bisogna inserire l'altro codice, così non ci saranno dubbi.. -
.
Ho sistemato l'unica cosa è l'effetto transizione che non riesco ad inserire ._. . -
.|Ye|.+1 .
User deleted
Per le correzioni: ok.
Per il transition basta questo codice:CODICE.menu ul {transition: .5s opacity linear; filter: alpha(opacity=50); opacity: .5} .menu ul:hover {filter: alpha(opacity=100); opacity: 1}
da aggiungere o meno, se si vuole l'effetto di trasparenza
. -
.
Grazie! *w* ieri non avevo molto tempo per metterci d'impegno. Ho modificato e aggiunto il punto che spiega come rimuoverlo. . -
.
Tutorial accettato, posto nella giusta sezione =) . -
.
Lo gia inserito in una skin con i credit Amphe : D . -
Sasuke '95 .
User deleted
Tutorial fantastico, appena finisco le prove e sposto tutto sul forum altro che credits, ti metto una statua in bacheca 
. -
Sasuke '95 .
User deleted
Problema che ho notato: con questo tipo di menù sono praticamente inaccessibili i pulsanti sopra la barra cerca, in quanto sono orizzontali come il menù e quindi è impossibile accedere alle voci (mi sa che non sono stato chiarissimo, spero tu capisca) . -
.
Contatta l'autore per segnalare l'errore =) .
Menu Laterale vs. 1.0[HTML | Css] Come spostare il menuwrap lateralmente con tendine verticali. |
Contacts
Web