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:
Font Awesome – icon
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.
Font Awesome ikonméret
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:
CSS DropDown Menü
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.
Bootstrap & Font Awesome
<!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>
