CSS3 menü az IcoMoon segítségével

by Szabó Viktor · Published 2013/06/27 · Updated 2016/10/22

Egy nagyon érdekes ikon csomagra/app-ra (IcoMoon <- érdemes megnézni) bukkantam, aminek a kezelése könnyű és nagyon ötletes. A lényege, hogy vektoros ikonokat biztosít a számodra, mindezt úgy, hogy létrehoz hozzá egy “font-készletet”, amit használhatsz az oldaladon, így gyakorlatilag nem kell millió képfájlt letöltened különböző méretekben. Másik nagy előnye, hogy tetszőleges felbontáson működik, hiszen vektorgrafikus.

Ennek az ikon-betűtípusnak a használatát szeretném megmutatni nektek néhány példa segítségével. A menük elkészítéséhez csak HTML5 és CSS3 szükséges, semmi mást nem használunk. A példákat Firefox és Chrome alatt teszteltem.

Akkor vágjunk is bele!

A következő menüt szeretném létrehozni:

CSS3 menu – Black&White

Első lépésben legenerálom az ikon-betűtípusomat az IcoMoon-on. Aztán jöhet a kódolás, a HTML5 rész nálam így néz ki:


<!doctype html>

<div class="contents">
<h1>
  Menu

<em>With pure CSS3</em></h1>
<div class="menu">
<ul>
	<li><a title="" href="#"><span class="icon"><i class="icon-html5finder">
</i></span>Mac </a></li>
	<li><a title="" href="#"><span class="icon"><i class="icon-html5windows8">
</i></span>Windows8</a></li>
	<li><a title="" href="#"><span class="icon"><i class="icon-html5exit">
</i></span>Exit</a></li>
	<li><a title="" href="#"><span class="icon"><i class="icon-html5home">
</i></span>Home</a></li>
</ul>
</div>
</div>

Ahogy láthatjátok is, itt semmi extra sincs, gyakorlatilag készítek egy hagyományos menüsort. Talán annyi érdekesség van benne, hogy egy rejtett részt is teszek bele (i aria-hidden), de ezt látni fogjátok hogy miért.

Nézzük most a CSS3 fájlt, amit teletűzdeltem megjegyzésekkel:

body /*Definiálom a hátteret, a betűméretet és színt*/
{
 font-size: 14px;
 min-height: 600px;
 color: #333333;
 background-image: url('bg-img.png');
 background-size:100% 50%;
 background-repeat:no-repeat;
}
.contents /*elrendezés és méret definíciók*/
{
 width: 800px;
 margin: 30px auto;
 text-align: center;
}
h1 /*Betűméret, szín és árnyék beállítása*/
{
 font-size: 50px;
 font-weight: normal;
 color: rgb(245, 225, 200);
 text-shadow: rgb(200, 95, 65) 2px 2px 0px, rgb(8, 8, 8) 7px 7px 3px;
}
em
{
 color: rgb(245, 225, 200);
 font-style: normal;
 text-decoration: none;
}

.menu /*beállítom a menü paramétereit*/
{
 width: 480px;
 margin: 80px auto;
}

.menu ul
{
 padding: 0;
 list-style: none;
 font-size: 16px;
}
.menu li
{
 float: left;
 width: 120px;
 text-align: center;
}
.menu li span
{
 display: block;
 margin-top: 10px;
}
.menu a /*beállítom a menüm színét*/
{
 display: block;
 color: #ffffff;
 text-decoration: none;
}
.menu i /*megadom a menü pizícióját, margóját és a méretét*/
{
 position: relative;
 margin: 0 auto;
 padding: 12px;
 font-size: 30px;
}

/* ICOMOON beállítások kezdete */

@font-face { /*a @font-face definícióm még teljesen általános*/
 font-family: 'html5-ugyesen-com';
 src:url('fonts/html5-ugyesen-com.eot');
 src:url('fonts/html5-ugyesen-com?#iefix') format('embedded-opentype'),
 url('fonts/html5-ugyesen-com.woff') format('woff'),
 url('fonts/html5-ugyesen-com.ttf') format('truetype'),
 url('fonts/html5-ugyesen-com.svg#html5-ugyesen-com') format('svg');
 font-weight: normal;
 font-style: normal;
}

/* Itt történik az érdekes rész, használnom kell a data attributumot, hogy be tudjam illeszteni az ikonokat*/
[data-icon]:before {
 font-family: 'html5-ugyesen-com';
 content: attr(data-icon);
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
}

/* Mivel én ikononként létrehoztam egy class-t ezért szükségem van az egyes elemek kiemelésére */
.icon-html5finder, .icon-html5windows8, .icon-html5exit, .icon-html5home {
 font-family: 'html5-ugyesen-com';
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
}

/*tartalom megadása - az icomoon által generált állományból tudhatod, hogy mivel tudod az egyes ikonokat meghivatkozni*/
.icon-html5finder:before {
 content: "\e001";
}
.icon-html5windows8:before {
 content: "\e002";
}
.icon-html5exit:before {
 content: "\e003";
}
.icon-html5home:before {
 content: "\e000";
}

A demót itt meg tudod tekinteni, innen pedig letöltheted a szükséges fájlokat.

A fekete-fehér példa nem rossz, de most dobjuk fel egy-két csicsás effekttel és színezzük meg egy kicsit. 🙂 Valami ilyesmi lesz a végeredmény:

CSS3 animated menu

A HTML5 fájlunkon természetesen semmit sem kell változtatnunk.

<!doctype html>

</pre>
<div class="contents">
<h1>
 Animated Menu

<em>With pure CSS3</em></h1>
<div class="menu">
<ul>
	<li><a title="" href="#"><span class="icon"><i class=" icon-html5finder">
</i></span>Mac </a></li>
	<li><a title="" href="#"><span class="icon"><i class=" icon-html5windows8">
</i></span>Windows8</a></li>
	<li><a title="" href="#"><span class="icon"><i class=" icon-html5exit">
</i></span>Exit</a></li>
	<li><a title="" href="#"><span class="icon"><i class=" icon-html5home">
</i></span>Home</a></li>
</ul>
</div>
</div>
<pre>

A CSS3 fájlunkat viszont erősen meg kell túrnunk, hogy minden kívánt effekt összeálljon. Lássuk nálam hogy fest a végeredmény:

body /*Definiálom a hátteret, a betűméretet és színt*/
{
 font-size: 14px;
 min-height: 600px;
 color: #333333;
 background-image: url('bg-img.png');
 background-size:100% 50%;
 background-repeat:no-repeat;
}
.contents /*elrendezés és méret definíciók*/
{
 width: 800px;
 margin: 30px auto;
 text-align: center;
}
h1 /*Betűméret, szín és árnyék beállítása*/
{
 font-size: 50px;
 font-weight: normal;
 color: rgb(245, 225, 200);
 text-shadow: rgb(200, 95, 65) 2px 2px 0px, rgb(8, 8, 8) 7px 7px 3px;
}
em
{
 color: rgb(245, 225, 200);
 font-style: normal;
 text-decoration: none;
}

/*Beállítom a menü paramétereit*/
.menu
{
 width: 480px;
 margin: 80px auto;
}

.menu ul
{
 padding: 0;
 list-style: none;
 font-size: 16px;
}
.menu li
{
 float: left;
 width: 120px;
 text-align: center;
}
.menu li span
{
 display: block;
}

.menu a
{
 display: block;
 color: #ffffff;
 text-decoration: none;
 -moz-transition: .3s;
 -webkit-transition: .3s;
 -o-transition: .3s;
 transition: .3s;
}

/*beállítom, hogy szép kerek színes háttere legyen az egyes menüknek*/
.menu li:nth-child(1) i
{
 background: rgb(60, 90, 150);
 box-shadow: 0 0 0 0 rgba(60, 90, 150,0.6);
}
.menu li:nth-child(2) i
{
 background: rgb(210, 65, 45);
 box-shadow: 0 0 0 0 rgba(210, 65, 45,0.6);
}
.menu li:nth-child(3) i
{
 background: rgb(0, 170, 240);
 box-shadow: 0 0 0 0 rgba(0, 170, 240, 0.6);
}
.menu li:nth-child(4) i
{
 background: rgb(205, 35, 40);
 box-shadow: 0 0 0 0 rgba(205, 35, 40, 0.6);
}
/*jelenjen meg egy karika, ha az ikon fölé viszem az egeret, ami szép átlátszó*/
.menu i
{
 position: relative;
 display: inline-block;
 margin: 0 auto;
 padding: 12px;
 border-radius: 50%;
 font-size: 30px;
 transition: box-shadow .4s ease-in-out;
 -moz-transition: box-shadow .4s ease-in-out;
 -webkit-transition: box-shadow .4s ease-in-out;
 -o-transition: box-shadow .4s ease-in-out;
}
.menu a:hover i, .menu a:active i
{
 box-shadow: 0 0 0 25px transparent;
}
/*A szöveg is akkor jelenjen meg, ha fölötte vagyok az egérrel*/
.menu .icon + span
{
 margin-top: 10px;
 opacity: 0;
}
.menu a:hover span, .menu a:active span
{
 opacity: 1;
}

/* ICOMOON beállítások kezdete */

@font-face { /*a @font-face definícióm még teljesen általános*/
 font-family: 'html5-ugyesen-com';
 src:url('fonts/html5-ugyesen-com.eot');
 src:url('fonts/html5-ugyesen-com?#iefix') format('embedded-opentype'),
 url('fonts/html5-ugyesen-com.woff') format('woff'),
 url('fonts/html5-ugyesen-com.ttf') format('truetype'),
 url('fonts/html5-ugyesen-com.svg#html5-ugyesen-com') format('svg');
 font-weight: normal;
 font-style: normal;
}

/* Itt történik az érdekes rész, használnom kell a data attributumot, hogy be tudjam illeszteni az ikonokat*/
[data-icon]:before {
 font-family: 'html5-ugyesen-com';
 content: attr(data-icon);
 speak: none;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
}

/* Mivel én ikononként létrehoztam egy class-t ezért szükségem van az egyes elemek kiemelésére */
.icon-html5finder, .icon-html5windows8, .icon-html5exit, .icon-html5home {
 font-family: 'html5-ugyesen-com';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
}
/*tartalom megadása - az icomoon által generált állományból tudhatod, hogy mivel tudod az egyes ikonokat meghivatkozni*/

.icon-html5finder:before {
 content: "\e001";
}
.icon-html5windows8:before {
 content: "\e002";
}
.icon-html5exit:before {
 content: "\e003";
}
.icon-html5home:before {
 content: "\e000";
}

A példát itt tudod kipróbálni, innen pedig le tudod tölteni egyben.

Valami még hiányzik nekem.. a menü felirata túl gyorsan és mindenféle effektet nélkülözően bukkan fel.. Oldjuk ezt meg egy Bézier görbe segítségével. A CSS3 fájlunkban írjuk át a következő részt:

.menu .icon + span
{
 margin-top: 10px;
 opacity: 0;
-webkit-transition: all 450ms cubic-bezier(1.000, 0.000, 1.000, 0.550);
-moz-transition: all 450ms cubic-bezier(1.000, 0.000, 1.000, 0.550);
-ms-transition: all 450ms cubic-bezier(1.000, 0.000, 1.000, 0.550);
-o-transition: all 450ms cubic-bezier(1.000, 0.000, 1.000, 0.550);
transition: all 450ms cubic-bezier(1.000, 0.000, 1.000, 0.550);

}

A fenti kód kipróbálását, már rátok bízom.

Forrás:

http://www.w3.org/Style/CSS/current-work
http://icomoon.io/#docs

CSS3 menü az IconMoon segítségével a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van. Permissions beyond the scope of this license may be available at http://html5.ugyesen.com.

CSS3 menü az IcoMoon segítségével

You may also like...

Tutorial

CSS3 menü az IcoMoon segítségével

You may also like...

CSS dropdown menü Font Awesome ikonokkal

Tutorial