Cikkajánló
A napokban kaptam egy kérdést arról, hogyan lehet azt megcsinálni, hogy a középső modul görgethető lehessen. De csak a középső modul. Bevallom én eddig ennek nem néztem semmilyen formában
Elérkeztünk a Honlapverseny első fordulójának a végéhez. Itt azokra a honlapokra lehetett szavazni, akik nem kerültek be az első 10 közé, ami már csak 9, mert azóta egy oldal
Sziasztok! Már eléggé ideje volt új kinézetet varázsolnom az oldalamra azt hiszem, így ezen a hétvégén szántam rá egy kis időt. Nem vittem túlzásba a dolgot. Nem akartam semmi
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
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 739 megtekintés

Hozzászólások