Sunday, 6 August 2017

Flip Navigation using HTML and CSS

Flip Navigation using HTML and CSS

Hello friends, In this tutorial we are going to create a Flip Navigation  using HTML and CSS. This is a pure HTML and CSS tutorial. So instead searching a plugin lets write together.

Step 1 :


First we create our HTML markup
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Flip Navigation using CSS</title>
  5. </head>
  6. <body>
  7. <div class="container">
  8. <ul>
  9. <li><a href="#"><span data-back="Home">Home</span></a></li>
  10. <li><a href="#"><span data-back="About">About</span></a></li>
  11. <li><a href="#"><span data-back="Services">Services</span></a></li>
  12. <li><a href="#"><span data-back="Contact">Contact</span></a></li>
  13. </ul>
  14. </div>
  15. </body>
  16. </html>

Step 2 :

After creating HTML markup lets style it with css :
  1. *{
  2. margin: 0;
  3. padding:0;
  4. font-family: arial;
  5. color: #888;
  6. }
  7. .container{
  8. width: 100vw;
  9. height: 150px;
  10. background: skyblue;
  11. display: flex;
  12. justify-content: center;
  13. align-items: center;
  14. }
  15. .container ul{
  16. list-style-type: none;
  17. position: absolute;
  18. margin: 0px;
  19. padding: 0px;
  20. }
  21. .container ul li{
  22. float: left;
  23. background: #fff;
  24. margin: 2px;
  25. }
  26. .container ul li a{
  27. text-decoration: none;
  28. position: relative;
  29. color: #00f;
  30. display: block;
  31. width: 140px;
  32. height: 50px;
  33. line-height: 50px;
  34. text-align: center;
  35. border-top: 4px solid #00f;
  36. }
  37. .container ul li a span{
  38. width: 100%;
  39. height: 100%;
  40. background: #fff;
  41. display: block;
  42. color: #000;
  43. transform-style: preserve-3d;
  44. perspective: 1000;
  45. }
  46. .container ul li a span:before {
  47. content: attr(data-back);
  48. position: absolute;
  49. left: 0;
  50. top: 0;
  51. display: block;
  52. background: #236468;
  53. color: #fff;
  54. transform-origin: top;
  55. transform: rotateX(270deg);
  56. height: 100%;
  57. width: 100%;
  58. transition: .8s;
  59. }
  60. .container ul li a:hover span:before {
  62. transform: rotateX(0deg);
  64. }
  65. .container ul li a span:after {
  66. content: attr(data-back);
  67. position: absolute;
  68. left: 0;
  69. top: 0;
  70. display: block;
  71. background: orange;
  72. color: blue;
  73. transform-origin: top;
  74. transform: rotateX(270deg);
  75. height: 100%;
  76. width: 100%;
  77. transition: .8s;
  78. }
  79. .container ul li a:hover span:after {
  80. transition-delay: 0.3s;
  81. transform: rotateX(0deg);
  83. }
I have try to make things simple. I hope it will help you in your project.

Author : Naresh Pal
Website : http://nareshonline.com/flip-navigation-using-html-and-css/

at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Upload file using PHP

Upload file using PHP This is a simple tutorial to learn how to upload file using PHP with the help of HTML form. PHP makes it very...

  • Pagination Using PHP and AJAX
    Pagination Using PHP and AJAX Pagination play a vital role in web page performance In this tutorial we will create a Pagination usin...