Cikkajánló
Hoztam egy újabb G-Portálos kinézetet. Úgy látom a szavazás állásából, hogy a G-Portálos kinézeteket igénylitek a legtöbben :) De azért majd mást is hozok, de mivel volt már kérés,
Kellemes estét :) Hoztam mára még négyféle project szövegdobozt és kilencféle elit csere ikon effektet. Az összes egyesével megnézhető az alábbi linkeken. Válogassatok :) A project dobozoknál és az
Az első lépés, ha szeretnétek a Disqus bővítményt, hogy regisztrálni kell az oldalukra és az ott regisztrált felhasználónevet és jelszót kell majd megadni a WordPress bővítményben. Itt tudtok regisztrálni:
Emma Roberts G-Portálos téma Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák
Vízszintes menü 25.

 

Javascript kódja
Innen mentsétek le, majd töltsétek fel a saját tárhelyetekre és a lenti kódban az URL címet cseréljétek le. Az URL címről itt olvashattok bővebben.

 

<script src="/js/vizszintes-menu-25.js"></script>

 

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

 

<div align="center">
<div class="effect-2">
<a href="/"><span data-hover="Index">Főoldal</span></a> <a href="/"><span data-hover="Lucy menü">Lucy Hale</span></a> <a href="/"><span data-hover="Videók">Média</span></a> <a href="/"><span data-hover="Képek">Galéria</span></a> <a href="/"><span data-hover="www">Website</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);
.effect-2 a span { /* menü kinézete */
font-family: 'Roboto Slab', serif;
font-size: 16px;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
display: inline-block;
padding: 14px 14px;
background: #4E4E4E;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.csstransforms3d .effect-2 a span::before { /* ez marad, esetleg a background részt módosítsátok. Forgatásnál, AZ AHOGY FORDUL háttér színe */
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #000000;
content: attr(data-hover);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.effect-2 a:hover span,
.effect-2 a:focus span {
-webkit-transform: rotateX(90deg) translateY(-22px);
-moz-transform: rotateX(90deg) translateY(-22px);
transform: rotateX(90deg) translateY(-22px);
}
.csstransforms3d .effect-2 a:hover span::before,
.csstransforms3d .effect-2 a:focus span::before { /* menü kinézete, ha ráviszed az egeret */
text-align: center;
line-height: 49px;
background: #EACDF3;
}
</style>

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

Hozzászólások