Set Menù(x2) + Sidebar - Hanami Collection

Set Menù(x2) + Sidebar - Hanami Collection

Tags
Menu Pronto
Resource
Sidebar pronta
By Valls ~ il 29 Aug. 2013

+3 8 Comments 392 Views
.

ANTEPRIMA

Set di due menù e una sidebar coordinati da usare dove volete. Possono essere usati tutti insieme o separatamente.
Per problemi o errori scrivere qui.

Se prelevate un menù, sarebbe gradito l'inserimento dei crediti:
CODICE
Menù realizzato da <a href="http://skinfactory.forumfree.it/?act=Profile&MID=2266120">Valls</a> ~ <a href="http://skinfactory.forumfree.it">Skin Factory</a>

POTETE:
☺ Modificare i colori e i font;
☺ Cambiare l'immagine, i testi e le voci e aggiungerne altre.

SCONSIGLIATO:
- Aggiungere voci nella sidebar o mettere immagini di dimensioni diverse da quelle consigliate.

VIETATO:
✖ Stravolgere l'aspetto di menù o sidebar perchè non sono basi;
✖ Spacciarli per propri;
✖ Togliere i crediti alla sidebar. Si tratta di una scritta di 9px per nulla invadente, per favore lasciatela.

MENU 1 - CODICE

Da aggiungere in Colori e Stili:

CODICE
/* MENU 01 - HANAMI COLLECTION */
.valls03menu {width: 270px}
.valls03menu li {font-size: 20px; font-family: 'Marck Script', cursive; display:inline-block; background: #FFCCCC; padding: 5px; height: 60px; width: 60px; margin: 5px; transition: all .3s ease-in-out; line-height: 60px; border-radius: 60px; text-shadow: 0 0 4px #E27C7C; border: 2px solid #FFF; color: #FFF}
.valls03menu a {color: #FFF; text-decoration: none}
.valls03menu li:first-child {transform:translate(0, 40px); -webkit-transform:translate(0, 40px); opacity: 0}
.valls03menu li:nth-child(3n) {transform:translate(40px, 0); -webkit-transform:translate(40px, 0); opacity: 0}
.valls03menu li:nth-child(2n) {background: #FF8B8B; padding-bottom: 4px; transform:translate(0, 0); -webkit-transform:translate(0, 0); transition: all .9s ease}
.valls03menu li:nth-child(5n) {transform:translate(-40px, 0); -webkit-transform:translate(-40px, 0); opacity: 0}
.valls03menu li:nth-child(7n) {transform:translate(0, -40px); -webkit-transform:translate(0, -40px); opacity: 0}
.valls03menu:hover li {transform:translate(0, 0); -webkit-transform:translate(0, 0); opacity: 1}
.valls03menu li:hover {background: #FF8B8B}
.valls03menu:hover li:nth-child(2n) {transform:scale(1.2); -webkit-transform:scale(1.2); opacity: .8}

Da aggiungere in HTML in cima a tutte le pagine:

CODICE
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Marck+Script">

Da aggiungere in HTML dove volete:

CODICE
<ul class="valls03menu">
<li><a href="http://">Lorem</a></li>
<br>
<li><a href="http://">Ipsum</a></li>
<li>Menù</li>
<li><a href="http://">Lorem</a></li>
<br>
<li><a href="http://">Dolor</a></li>
</ul>

MENU 2 - CODICE

Da aggiungere in Colori e Stili:

CODICE
/* MENU 02 - HANAMI COLLECTION */
.valls04menu {width: 500px; height: 60px}
.valls04menu li {font-size: 20px; font-family: 'Marck Script', cursive; display:inline-block; background: #FFCCCC; padding: 5px; height: 60px; width: 60px; margin: 5px; transition: all .3s ease-in-out; line-height: 60px; border-radius: 60px; text-shadow: 0 0 4px #E27C7C; border: 2px solid #FFF; color: #FFF}
.valls04menu a {color: #FFF; text-decoration: none}
.valls04menu li:first-child, .valls04menu li:nth-child(2n) {transform:translate(40px, 0); opacity: 0}
.valls04menu li:nth-child(3n) {transform:translate(0, 0); -webkit-transform:translate(0, 0); background: #FF8B8B; transition: all .9s ease}
.valls04menu li:nth-child(4n), .valls04menu li:nth-child(5n) {transform:translate(-40px, 0); -webkit-transform:translate(-40px, 0); opacity: 0}
.valls04menu:hover li {transform:translate(0, 0); -webkit-transform:translate(0, 0); opacity: 1}
.valls04menu li:hover {background: #FF8B8B}
.valls04menu:hover li:nth-child(3n) {transform:scale(1.2); -webkit-transform:scale(1.2); opacity: .8}

Da aggiungere in HTML in cima a tutte le pagine:

CODICE
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Marck+Script">

Da aggiungere in HTML dove volete:

CODICE
<ul class="valls04menu">
<li><a href="http://">Lorem</a></li>
<li><a href="http://">Ipsum</a></li>
<li>Menù</li>
<li><a href="http://">Lorem</a></li>
<li><a href="http://">Dolor</a></li>
</ul>

SIDEBAR - CODICE

Da aggiungere in Colori e Stili:

CODICE
/* SIDEBAR - HANAMI COLLECTION */
#sidebar02 {width: 250px}
.side02title {font: 27px 'Marck script'; color: #FF8B8B; margin-bottom: 35px; text-align:right; text-shadow: 1px 1px 0 #FFF}
.valls02side {background: #FFFFFF; border: 1px solid #E2E2E2; width: 250px; border-bottom: 0; padding-bottom: 1px}
.side02quote {font: 17px 'Marck script'; color: #FFF; margin: 0; background: #FF8B8B; width: 252px; border-radius: 0 0 5px 5px; border-bottom: 2px solid #FFF}
.side02quote:before {content: '« '}
.side02quote:after {content: ' »'}
.side02img {background: #FFF url(http://www.hybridupload.com/25/08/g9wi.png) no-repeat center; margin: 5px; min-height: 160px; min-width: 240px}
.side02text {background:rgba(255, 255, 255, .8); min-width: 232px; padding: 4px; font: 12px metrophobic; color: #888; text-align:justify; min-height: 152px; text-shadow: 1px 1px 0 #FFF; transform: translate(0, 3px); -webkit-transform: translate(0, 3px); opacity: 0; transition: all .3s ease-in-out}
.side02text:hover {opacity: 1; transform:translate(0, 0); -webkit-transform:translate(0, 0)}
.side02text_menu li {display: inline-block; padding: 5px; background: #FFCCCC; color: #E27C7C; font: 19px 'marck script'; line-height: 80%; border-radius: 5px; margin-bottom: -5px; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); margin-left: 2px; margin-right: 2px; transition: all .2s ease-in-out; border: 2px solid #FFF; border-top: 0; border-bottom: 0}
.side02text_menu {margin-left: -20px}
.side02text_menu li:hover {color: #FF8B8B}
.side02menu {max-width: 250px}
.side02menu li {list-style-type: none; margin-bottom: 5px; width: 220px; border-radius: 2px; text-align:left; padding: 1px 20px; font: 10px metrophobic; transition: all .3s ease-in-out; margin-left: -50px; border-left: 2px solid #FF8B8B; text-transform: uppercase; background: #FFCCCC}
.side02menu a {text-decoration: none; color: rgba(255, 255, 255, 0)}
.side02menu {margin-bottom: -138px}
.side02menu li:hover {margin-left: -140px; padding-left: 7px; color: rgba(255, 255, 255, 1); background: #FF8B8B; border-left: 2px solid #FFCCCC}

Da aggiungere in HTML in cima a tutte le pagine:

CODICE
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Marck+Script">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Metrophobic">

Da aggiungere in HTML dove volete:

CODICE
<div id="sidebar02">
<p class="side02title">Lorem ipsum</p>
<ul class="side02menu">
<a href="http://"><li>Lorem</li></a>
<a href="http://"><li>Ipsum</li></a>
<a href="http://"><li>Dolor</li></a>
<a href="http://"><li>Lorem</li></a>
<a href="http://"><li>Ipsum</li></a>
</ul>
<div class="valls02side">
<div class="side02img">
<div class="side02text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis venenatis eros. Vivamus sollicitudin consequat dui, ac mollis sapien pretium ac. Aenean ac purus ultrices, ultrices est at, suscipit mauris. Cras at aliquam sapien. Duis rutrum sollicitudin volutpat. In fermentum.
<ul class="side02text_menu">
<a href="http://"><li>Lorem</li></a>
<a href="http://"><li>Lorem</li></a>
<a href="http://"><li>Lorem</li></a></ul> </div>
</div>
</div><div class="side02quote">Inserisci una citazione</div></div><div style="font: 9px tahoma; margin-top: 6px">SIDEBAR © <a href="http://skinfactory.forumfree.it/?act=Profile&MID=2266120">VALLS ~</a></div>

CAMBIARE VELOCEMENTE IMMAGINE ALLA SIDEBAR:
Per cambiare l'immagine, potete inserire questo codice DOPO quello della sidebar:
CODICE
.side02img {background: url(IMMAGINE) no-repeat center}

Sostituite IMMAGINE con l'URL della vostra immagine.

Enjoy ~

Edited by Valls ~ - 30/8/2013, 19:35

Share

.