2018. 04. 18.Videó | PNG készítése Photoshop-ban
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
2018. 04. 01.Gif készítése Photoshop-ban
Coppermine Gallery themes

Coppermine Gallery themes
76 napja
110 néző

WordPress themes

WordPress themes
77 napja
114 néző

G-Portál themes

G-Portál themes
77 napja
67 néző

Tumblr themes

Tumblr themes
77 napja
98 néző

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>


1 477 megtekintés

Hozzászólások