Oldal kiválasztása

Oldalsó mini-menü

Szerző: | 2018. 09. 23. | Trükkös-Tippek

Hogyan készíts az oldalaidra kis ikonokként megjelenő gyorsmenüt?

Biztosan láttál már olyan kis ikonokat bármelyik méretű kijelzőn, amik oldalt elérhetők és általában a leghasznosabb funkciókat szokták ezekhez kapcsolni. Kapcsolat, időpontkérés, Social Media, stb. Ebben a posztban megmutatjuk, hogyan készítsd el Te magad is. Lássuk, mire lesz szükséged hozzá: – Php kód. – De én nem tudok…. – Oké. Hagytunk már egyedül? Nem. És most sem fogunk. Mi kell még? CSS. – Na de….. – Relax! 🙂 Ezt is mellékeljük, mégpedig egy kis magyarázat kiséretében, hogy legközelebb már ismerősek legyenek ezek az apró részletek.

A PHP kódrészlet

Első lépésként ezt a kis részletet kell majd a VEZÉRLŐPULT – MEGJELENÉS – SZERKESZTŐ menüponton keresztül beillesztened a functions.php fájlod legaljára. Ebben tudod megadni, hogy az egyes ikonok milyen funkciót kapjanak, azaz hová navigáljanak velük a látogatók. Facebooknál beállíthatod pl., a saját FB oldaladat, kapcsolatnál hogy az alapértelmezett leveleződet megnyitva közvetlenül az email címedre küldjenek levelet, ne kelljen beírniuk azt, vagy akár az időpontfoglaló rendszered formját.

PHP Kód
function dsk_sidebar_menu(){?>
<ul class="sidebar-menu">

	<li class="blog">
		<a href='https://www.divisablon.club'>Blog</a>
	</li>

	<li class="kapcsolat">
		<a href='mailto:info@divisablon.hu'>Kapcsolat</a>
	</li>

	<li class="facebook">
		<a href='https://www.facebook.com/groups/diviwordpresssablonfelhasznalok'>Facebook</a>
	</li>

	<li class="idopont">
		<a href='##'>Időpont</a>
	</li>

</ul>
<?php	
}
add_action( 'et_after_main_content', 'dsk_sidebar_menu' );

Természetesen a megfelelő helyre a saját url-t kell beillesztened. Ahol az Időpont résznél a két “##”-t látod, oda szintén be tudsz illeszteni url-t ha szükséged van rá, de hozzáadhatsz még – ha szükséges-, ha pedig nem, akkor egyszerűen törölj egy egész sort.

Ez egy komplett sor, amit törölnöd kell, vagy amit be kell illesztened, ha további elemeket is adnál a minimenühöz
<li class="idopont">
		<a href='##'>Időpont</a>
	</li>

Most jön a gúnya, azaz a CSS

Itt formázzuk meg azt, amit az előbb létrehoztunk, azaz a megfelelő CSS segítségével színeket, háttereket, méreteket rendelünk az előbb még meztelen kis kódrészleteinkhez. Az itt látható kódot másold be a VEZÉRLŐPULT – MEGJELENÉS – SZERKESZTŐ menüpontban a style.css aljára.

CSS KÓD
.sidebar-menu {
    position: fixed;
    top: 40%;
    right: 0;
}

/* STYLE1 */
.sidebar-menu li a {
    display: block;
    position: relative;
    padding: 14px 20px;
    background: #d25048;
    text-transform: uppercase;
    color: #fff;
    width: 160px;
    right: -110px;
    transition: .4s ease all;
}
/* STYLE1 */

.sidebar-menu li a:hover {
    right: 0px;
}

.sidebar-menu li a:before {
    font-family: "etModules";
    margin-right: 20px;
}

.sidebar-menu .blog a:before {
    content: "\e058";
}

.sidebar-menu .kapcsolat a:before {
    content: "\e076";
}

.sidebar-menu .facebook a:before {
    content: "\e0c1";
}

.sidebar-menu .idopont a:before {
    content: "\e025";
}

A PHP kód első soraiban adtunk egy egyedi azonosítót a minimenünek, ez lett a “sidebar-menu”.
A CSS-ben máris láthatod hogy rögtön ezzel kezdünk el dolgozni, tehát itt hivatkozunk rá. Ha a kettő nem egyezik meg tökéletesen, a dolog nem fog működni. Olyan ez, mint egy rendszám, vagy lánykori név… ilyesmi. 🙂

Nos.
A “sidebar-menu” azonosítóval hivatkozva a PHP-ben kialakított listánkra, a “fixed” pozicióval beállítottuk, hogy ne mozduljon el a képernyő széléről semmiképp (csak úgy, mint amikor azt tanultuk, hogy hogyan ragaszthatunk le valamit a képernyőre), a 40%-kal megadtuk, hogy a képernyő tetejétől mennyire szeretnénk elhelyezni, illetve a jobb oldali “0” értékkel, hogy ne legyen eltartása a képernyő jobb szélétől.

A következő szekcióban a “padding” értékkel tudjuk megadni, hogy egymáshoz képest mennyire legyenek távol a menüpontjaink, címszavaink magasságban, illetve a következő sorban megadott “háttérszínen” hol helyezkedjenek el. Ha itt egy értéket adunk meg, akkor minden távolság (top-right-bottom-left) ugyanannyi lesz, ha két értéket, akkor az elsővel a top-bottom,  a másodikkal a left-right értéket adjuk meg és megadhatunk négyet is, amikor is minden oldalnál külön eltartást állítunk be, ezesetben ezt az óramutató járásával megegyezően délnél kezdjünk és haladunk 3, 6 és 9 óra felé.

A “text-transform”-mal állítjuk a betűket (jelen esetben) nagybetűsre, majd a színét fehérre, a szélességet 160px-re, a “-110”-es érték pedig ahhoz kell, hogy elbújjon a szöveg és csak a nemsokára hozzáadott ikonok látszódjanak ki első körben.
A “0.4s” érték azt határozza meg, hogy milyen gyorsan pattanjanak vagy épp kússzanak elő majd a menü szövegek, amikor a Felhasználó föléjük húzza az egeret.

Az “etModules” az Elegant Themes ikon fontokra utal, ezek azok a kis ikonok, amiket a minimenü szövegek előtt látsz. Mindegyik ikonnak saját kódja van (e058, e076, stb.), tehát ezeket lehet (kell) változtatni attól függően, hogy mire van szükséged.

A mellékletben megtalálod az ikon fontokat, ne zavarjon meg, hogy ott 7 karkterből áll az ikonok neve, vagyis az azonosító, elegendő csak az utolsó négyet használni, ahogy tettük mi is a példában, valamint 3 féle designt készítettünk a mini-menühöz, csak ki kell cserélned a style.css-be beillesztett nagy egész kódrészletből a komplett “STYLE1”-et bármelyik másikra
( /* STYLE1 */ – től ……. /* STYLE1 */-ig!) és ha frissítesz, máris másképp néznek ki majd a “gombocskák”.

Továbbra is szívesen várjuk az elkészített remekműveket a zárt FB csoportunkban. Ha van kedved, oszd meg, hogy mások is tanulhassanak, inspirálódhassanak, vagy kérdezz bátran, ha valami nem olyan, vagy nem úgy működik, ahogy szeretted volna. Simán lehet, hogy mi sem tudjuk a választ kapásból, de olyan még nem volt, hogy ne találjunk megoldást.
No meg azért vagyunk, hogy egymástól (is) tanuljunk! 🙂

Mára ennyi, kikapcs,
üdv,

Zió

ELAKADTÁL? ÉSZREVÉTELED VAN? ÍRJ NEKÜNK!

15 + 9 =

NÉZD MEG!

TÖLTSD LE!

MUTASD MEG!