CSS dropdown menü Font Awesome ikonokkal
Ebben a részben egy CSS dropdown menüt szeretnék nektek bemutatni, ahol használjuk a Font Awesome ikonokat, hogy a menünk jobban nézzen ki. Ha valaki nem ismerné, jó ismerni, ha meg már ismered, akkor is érdemes végig olvasni. Számtalan helyen lehet ezt a nagyszerű és ingyenes ikonkészletet hasznosítani! Semmi másra nem lesz szükségünk csak CSS3-ra, HTML5-re és a kis ikonokra a menü elkészítéséhez. Ragadjatok notepad++)t(.
1. Font Awesome
Első körben ismerkedjünk meg a Font Awesome ikonjaival és hogy azokat hogyan tudjuk beilleszteni a HTML kódunkba. Erről ezen az oldalon olvashatunk, de nincs más dolgunk mint a következőt beillesztenünk a <head> tagunkba:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Ezután már használhatjuk is az ikonokat. Hogyan is működik, lássuk a következő képpel és egyszerű példával:
Nekünk ebből ez a lényeges: <i class=“fa fa-taxi”></i> Gyakorlatilag ennek a segítségével már be is illesztettük az ikonunkat a weboldalunkba.
Méretek:
- alapérték: “fa fa-taxi”
- +33% “fa fa-taxi fa-lg”
- “fa fa-taxi fa-2x”
- “fa fa-taxi fa-3x”
- “fa fa-taxi fa-4x”
- “fa fa-taxi fa-5x”
Nézzünk rá egy egyszerű példát:
<!DOCTYPE html> <html> <head> <title>Font Awesome DEMO</title> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> </head> <body> <i class="fa fa-taxi fa-5x"></i> </body> </html>
Nézzük hogyan tudunk ebből egy menüt összehozni. Valami ilyesmit:
2. HTML:
<!DOCTYPE html> <html> <head> <title>DropDown Menü & Font Awesome DEMO</title> <link rel="stylesheet" type="text/css" href="dropdown.css"> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> </head> <body> <nav id="nav"> <ul> <li><a href="#"><i class="fa fa-home fa-2x"></i><Br/>Home</a></li> <li><a href="#"><i class="fa fa-newspaper-o fa-2x"></i><Br/>Blog</a> <ul> <li><a href="#"><i class="fa fa-spinner"></i>WebDesign</a> <ul> <li><a href="#"><i class="fa fa-html5"></i>HTML5</a></li> <li><a href="#"><i class="fa fa-css3"></i>CSS3</a></li> </ul> </li> <li><a href="#"><i class="fa fa-line-chart"></i>SEO</a></li> <li><a href="#"><i class="fa fa-database"></i>VPS</a></li> <li><a href="#"><i class="fa fa-sitemap"></i>Hosting</a></li> </ul> </li> <li><a href="#"><i class="fa fa-shopping-cart fa-2x"></i><Br/>Template Market</a> <ul> <li><a href="#"><i class="fa fa-star-half-o"></i>Free</a></li> <li><a href="#"><i class="fa fa-hand-o-right"></i>Premium</a></li> </ul> </li> <li><a href="#"><i class="fa fa-envelope-square"></i><Br/>Kapcsolat</a> <ul> <li><a href="#"><i class="fa fa-facebook"></i>Facebook</a></li> <li><a href="#"><i class="fa fa-twitter"></i>Twitter</a></li> </ul> </li> </ul> </nav> </body> </html>
Ha megnézitek, semmi mást nem tettem, mint a normáls menü struktúrám elé betettem azt az ikont amelyiket oda illőnek gondoltam a fent már megmutatott linkeléssel. A főmenükben sortörést alkalmaztam, az almenükben pedig folytatólagosan követi majd a szöveg, ahogy a képen is látható.
3. Következzen a CSS:
body { margin:0; padding:0; } #nav { /*nav rész szélességes, színe*/ width:100%; display:block; background-color:#11bf22; border-bottom:8px solid #006f18; } #nav ul { /*lista stílus igazítás*/ padding:0; margin:0; list-style: none; position: relative; } #nav ul:After { content: ""; display:block; clear:both; } #nav ul li { display:list-item; list-style: none; float:left; background-color:#11bf22; } #nav ul li i { /*betűméret - szélesség (ikonsor)*/ font-size:30px; width:40px; } #nav ul li a { /*betűméret - menü szöveg*/ display:block; padding:15px 30px; color:#FFF; font-size:18px; text-decoration:none; font-family: Georgia, serif; text-align:center; } #nav li a:hover { background-color: #5bbcb9; } /*hover szín*/ /* Dropdown */ /* almenük elrejtése */ #nav ul ul { display: none; position: absolute; top: 80px; } /* hover-re megjelenítés */ #nav ul li:hover > ul { display:list-item; } /* almenük lista nézetben */ #nav ul ul li { width:210px; float:none; position: relative; border-bottom:none; } #nav ul ul li i { /*almenü ikon igazítása*/ margin-right:12px; } #nav ul ul li a { padding:16px 20px; text-align:left; } /* 3. almenü követően */ nav ul ul ul li { position: absolute relative; top:-80px; left:200px; } #nav li > a:after { content: ' >'; } #nav > li > a:after {content: ' >'; } #nav li > a:only-child:after {content: ''; }
4. Bónuszkör
Lehetőség van forgó ikonok használatára is, amire a következő példát mutatnám:
<!DOCTYPE html> <html> <head> <title>Font Awesome spinning DEMO</title> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> </head> <body> <i class="fa fa-spinner fa-spin"></i> <i class="fa fa-circle-o-notch fa-spin"></i> <i class="fa fa-refresh fa-spin"></i> <i class="fa fa-cog fa-spin"></i> </body> </html>
Ahogy láthatjátok a lényeg az fa-spin utasításon van. IE8-9 alatt egyenlőre nem támogatott.
5. Bónuszkör Bootstrap
A bootstrap-el is szépen lehet házasítani. A következő példában egy egyszerű gombot alakítunk ki, gyakorlatilag 0 programozott CSS segítségével. Konkrétan az alap html-be beleszúrunk két linket a head-be és a body-ba egyetlen sort. Szerintem nem is néz ki rosszul.
<!DOCTYPE html> <html> <head> <title>Font Awesome bootstrap DEMO</title> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <a class="btn btn-lg btn-success" href="#"><i class="fa fa-flag fa-2x pull-left"></i> HTML5 Ügyesen<br>Version 1.0.1a</a> </body> </html>