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

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.


Méretezési lehetőségeink, hasonlóan mint fent, kezdjük az fa perfix-el majd az ikon név és utána jön a méret: <i class=“fa fa-taxi fa-4x”></i>

font-awesomeikonmeret

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>

Példa megtekintése itt.

Nézzük hogyan tudunk ebből egy menüt összehozni. Valami ilyesmit:

css-drop-down-menu

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: ''; }

A példa itt megtekinthető.


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>

 A példa itt megtekinthető.

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

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>

A példát itt tudod megtekinteni.

You may also like...