Cikkajánló
Igaz, már jó régóta megváltozott a Cbox Chat kezelőfelülete, de csak most bírtam rávenni magam, hogy frissítsem a régi leírásokat. De ma ez is megtörtént, így jelenleg minden naprakész
Már jó sokan érdeklődtetek, hogyan lehet a Coppermine Galériában lévő legfrissebb képeket megjeleníteni a WordPress-ben. Azt javaslom, hogy inkább ezt a verziót használjátok a WordPress-es bővítmény helyett, mert ha
A WordPress-ben alapból a szövegszerkesztő elég szegényes. Gondolom az-az oka, hogy optimisták a WP készítői és úgy gondolják, hogy aki WordPress-t használ, az ismeri a kódokat és inkább kódnézetben
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 Maisie Williams G-Portálos téma
Vízszintes menü 23.

 

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 id="navi">
<div class="navi-link-left">
<a class="active" href="/"><div class="fa fa-home"></div>&nbsp;&nbsp;Főoldal</a> <a href="/"><div class="fa fa-facebook-official"></div>&nbsp;&nbspFacebook</a> <a href="/"><div class="fa fa-camera"></div>&nbsp;&nbspGaléria</a></div>
<div class="navi-link-right">
<a href="/"><div class="fa fa-folder"></div>&nbsp;&nbspOldal</a> <a href="/"><div class="fa fa-info"></div>&nbsp;&nbspKapcsolat</a></div>
</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

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

 

CSS kód

 

<style type="text/css">
#navi {
margin: 0;
padding: 12px 4px;
overflow: hidden;
background: #333333; /* menü háttérszíne */
width: 600px; /* menü szélessége */
}
.navi-link-left {
float: left;
}
.navi-link-left a { /* bal menüpontok */
font-family: Arial;
font-size: 13px;
display: inline;
color: #ffffff; /* menücímek színe */
text-align: center;
padding: 0 16px;
text-decoration: none;
}
.navi-link-left a:hover { /* ha ráviszed az egeret */
color: #ffffff; /* menücímek színe */
background: #707072; /* menücímek háttere */
padding: 10px 16px;
text-decoration: none;
}
.navi-link-left .active {
background: #6075AC;
padding: 10px 16px;
}
.navi-link-right {
display: inline;
float: right;
}
.navi-link-right a { /* jobb menüpontok */
font-family: Arial;
font-size: 13px;
display: inline;
color: white;
text-align: center;
padding: 0 16px;
text-decoration: none;
}
.navi-link-right a:hover { /* ha ráviszed az egeret */
color: #ffffff;
background: #000000;
padding: 10px 16px;
text-decoration: none;
}</style>

 

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

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

Hozzászólások