Cikkajánló
Újabb három darab projektdobozt készítettem. Ezeken a CSS kóddal simán lehet alakítani. Lehetnek kisebbek, nagyobban, más színűek is, de hisz ezeket tudjátok. Ahogy eddig is az egyes modulokban be
Egy olyan szövegdoboz kódját osztom most meg veletek, ami manapság eléggé elterjedt egyes weboldalakon. Mondhatni ez a jelenlegi divat. Így mielőtt még úgyis megkérdeznétek, hogyan lehet ilyen szövegdobozt készíteni,
Sikeresen összedobtam még egy G-Portálos témát, mert most egy pár napig nem nagyon leszek elérhető sajnos. Gondolkodtam, hogy fizetős legyen-e, de aztán a francokat :D Használjátok egészséggel! Azt eddig
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
Függőleges menü 21.

 
 

Menü kódja
A perjel helyére jönnek a menük linkjei. A menü kódjában ez a rész    az ikon és a menücím közötti szünet.

 

<div class="navi">
<a class="navi-link" href="/"><strike class="fa fa-home"></strike>&nbsp;&nbsp;Főoldal</a>
<a class="navi-link" href="/"><strike class="fa fa-facebook-official"></strike>&nbsp;&nbsp;Facebook</a>
<a class="navi-link" href="/"><strike class="fa fa-camera"></strike>&nbsp;&nbsp;Galéria</a>
<a class="navi-link" href="/"><strike class="fa fa-folder"></strike>&nbsp;&nbsp;Oldal</a>
<a class="navi-link" href="/"><strike class="fa fa-info"></strike>&nbsp;&nbsp;Kapcsolat</a>
</div>

 

Ikonok megjelenítésének kódja
WordPress-esek plugint is használhatnak ez helyett. Leírása itt található meg.
G-portálosoknak kötelező a lejjebb látható kód, ha ikonokat is szeretnétek megjeleníteni a menüben. Több ikon közül itt tudtok válogatni: Font Awesome Icons

 

Ikon kódja

 

<script src="https://use.fontawesome.com/9f3339f954.js"></script>

 

CSS kód

 

<style type="text/css">
strike {
text-decoration: none;
}
.navi {
width: 250px;
}
a.navi-link {
font-family: Arial;
font-size: 13px;
color: #ffffff !important;
background: #A72A2F;
text-align: left;
text-decoration: none;
display: block;
padding: 10px;
margin-bottom: -15px;
}
a.navi-link:hover {
color: #ffffff;
background: #707072;
text-decoration: none;
}
</style>

 

Forrás nincsen. A menüt én készítettem.

lindadesign Hozzászólások
2 017 megtekintés

Hozzászólások