How To Create Navigation Bar With Icon Using Html And CSS - CSS Horizontal Menu Bar with Icons
 |
| CSS Horizontal Menu Bar with Icons |
Full Code (HTML+CSS)
| <!DOCTYPE HTML> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| <style type="text/css"> | |
| body{ | |
| margin:0; | |
| padding:0; | |
| background:#e91e63; | |
| font-family: sans-serif; | |
| } | |
| ul{ | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| margin:0; | |
| padding:20px 0; | |
| background:#fff; | |
| display:flex; | |
| border-radius:10px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,.3); | |
| } | |
| ul li{ | |
| list-style:none; | |
| text-align:center; | |
| display:block; | |
| border-right:1px solid rgba(0,0,0,0.2); | |
| } | |
| ul li:last-child{ | |
| border-right:none; | |
| } | |
| ul li a{ | |
| text-decoration:none; | |
| padding:0 50px; | |
| display:block; | |
| } | |
| ul li a .icon{ | |
| height:40px; | |
| width:40px; | |
| text-align:center; | |
| overflow:hidden; | |
| margin:0 auto 10px; | |
| } | |
| ul li a .icon .fa{ | |
| height:100%; | |
| width:100%; | |
| line-height:40px; | |
| font-size:34px; | |
| transition:0.5s; | |
| color:#000; | |
| } | |
| ul li a .icon .fa:last-child{ | |
| color:#e91e63; | |
| } | |
| ul li a:hover .icon .fa{ | |
| transform:translatey(-110%); | |
| } | |
| ul li a .text{ | |
| position:relative; | |
| height:20px; | |
| width:100%; | |
| display:block; | |
| overflow:hidden; | |
| } | |
| ul li a .text span{ | |
| position:relative; | |
| font-size:18px; | |
| color:#000; | |
| display:block; | |
| line-height:20px; | |
| transition:0.5s; | |
| } | |
| ul li a .text span:before{ | |
| content:attr(data-text); | |
| position:absolute; | |
| top:-100%; | |
| left:0; | |
| height:100%; | |
| width:100%; | |
| color:#e91e63; | |
| } | |
| ul li a:hover .text span{ | |
| transform:translatey(20px); | |
| } | |
| @media screen and (max-width: 450px) { | |
| ul li a, ul, ul li{ | |
| width:50%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul> | |
| <li> | |
| <a href=""> | |
| <div class="icon"> | |
| <i class="fa fa-home" aria-hidden="true"></i> | |
| <i class="fa fa-home" aria-hidden="true"></i> | |
| </div> | |
| <div class="text"> <span data-text="Home">Home</span></div> | |
| </a> | |
| </li> | |
| <li> | |
| <a href=""> | |
| <div class="icon"> | |
| <i class="fa fa-file-text-o" aria-hidden="true"></i> | |
| <i class="fa fa-file-text-o" aria-hidden="true"></i> | |
| </div> | |
| <div class="text"> <span data-text="About">About</span></div> | |
| </a> | |
| </li> | |
| <li> | |
| <a href=""> | |
| <div class="icon"> | |
| <i class="fa fa-cogs" aria-hidden="true"></i> | |
| <i class="fa fa-cogs" aria-hidden="true"></i> | |
| </div> | |
| <div class="text"><span data-text="services">services</span></div> | |
| </a> | |
| </li> | |
| <li> | |
| <a href=""> | |
| <div class="icon"> | |
| <i class="fa fa-picture-o" aria-hidden="true"></i> | |
| <i class="fa fa-picture-o" aria-hidden="true"></i> | |
| </div> | |
| <div class="text"><span data-text="Portflio">Portflio</span></div> | |
| </a> | |
| </li> | |
| <li> | |
| <a href=""> | |
| <div class="icon"> | |
| <i class="fa fa-users" aria-hidden="true"></i> | |
| <i class="fa fa-users" aria-hidden="true"></i> | |
| </div> | |
| <div class="text"><span data-text="Team">Team</span></div> | |
| </a> | |
| </li> | |
| <li> | |
| <a href=""> | |
| <div class="icon"> | |
| <i class="fa fa-envelope" aria-hidden="true"></i> | |
| <i class="fa fa-envelope" aria-hidden="true"></i> | |
| </div> | |
| <div class="text"><span data-text="Contact">Contact</span></div> | |
| </a> | |
| </li> | |
| </ul> | |
| </body> </html> Codding video | |
No comments