Cikkajánló
New Yorkba vágyom rettenetesen! Persze a cikk nem erről szól, de muszáj volt kiírnom magamból. :) Tehát a cikk lényege, hogy hogyan lehet megoldani azt kóddal, hogy a cikkek
Sziasztok. Hoztam a galériába 191 darab új .png képet. Ebből tizenhárom darab teljesen új album, amik ezek lennének pontosan: Anne Hathaway (8 darab) • Brittany Robertson (6 darab) •
6. rész   Ebben a részben részletesen bemutatom a BlogPlusz CSS kódját. Idővel lehet, hogy majd frissíteni kell a cikket, mert a G-Portál is folyamatosan frissül, de jelenleg a
Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló Apró tippek weboldal szerkesztőknek
Vízszintes menü 26.

 

 
Menü kódja
A perjel helyére kell írni a link címeket.

 

<div id="modern-menu">
<div>
<a class="box menu" href="/"> <span>Menü 1</span></a> <a class="box menu" href="/"> <span>Menü 2</span></a> <a class="box menu" href="/"> <span>Menü 3</span></a> <a class="box menu" href="/"> <span>Menü 4</span></a>
</div>
</div>

 

CSS kód

 

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab&subset=latin,latin-ext);
#modern-menu{
text-align: center;
}
.box{ /* menü kinézete */
font-family: 'Roboto Slab', serif !important;
font-size: 16px !important;
color: #ffffff !important;
background: #4e4e4e !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
text-decoration: none;
padding: 12px;
margin: 0 10px;
}
.box:hover{ /* menü kinézete, ha ráviszed az egeret */
background: #F3CDE6 !important;
text-decoration: none !important;
}
.menu {
position: relative;
}
.menu:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.2s;
-webkit-transition-property: top, left, right, bottom;
-moz-transition-property: top, left, right, bottom;
-ms-transition-property: top, left, right, bottom;
-o-transition-property: top, left, right, bottom;
transition-property: top, left, right, bottom;
}
.menu:hover:before, .menu:focus:before{
-webkit-transition-delay: .1s;
-moz-transition-delay: .1s;
-ms-transition-delay: .1s;
-o-transition-delay: .1s;
transition-delay: .1s;
border: #EA95B3 solid 6px; /* körvonal kinézete - lehet pöttyös, szaggatott, stb.. is.*/
bottom: -10px;
left: -10px;
top: -10px;
right: -10px;
}
</style>

lindadesign Hozzászólások
1 326 megtekintés

Hozzászólások