Menu Laterale vs. 1.0

« Older Newer »

Arctic

Posted on 19/6/2013, 16:20 by: Arctic

Advanced Member

Group: Lovers

Posts: 6,548

Likes: +24

Status: Anonymous

Menu Laterale vs. 1.0

code created by Amphetamines'

E' severamente vietato spacciare questa guida per propria o postarla in altri forum senza prima averne chiesto il consenso all'autore.
88x31

barrautentelaterale

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

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

13 replies since 19/6/2013, 16:20 2253 views

Menu Laterale vs. 1.0

[HTML | Css] Come spostare il menuwrap lateralmente con tendine verticali.