Cikkajánló
Kérésre hoztam egy olyan szövegdobozt, amiben a benne lévő szöveget egy kattintással ki lehet jelölni és ezáltal egyből másolja is a tartalmát, amit ezután már csak be kell illeszteni
A WordPress-nek vannak beépített widget alkalmazásai, amik megjelennek a szélső sávban, ha a WordPress – Megjelenés – Widgetek menüben ezt beállítjátok. De egy saját készítésű sablonban csak úgy nem
Már is belevágok a közepébe. Remélem kisebb kárpótlás lesz ez a segítség sorozat, ha már az oldalam költöztetése miatt nem igazán maradt időm frissítéseket is hozni. Egy pár design
Prémium téma | Zendaya Coleman G-Portálos téma Sosugary Gallery | Jennifer Lawrence téma 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
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 306 megtekintés

Hozzászólások