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/

Simple Drop down Menu using jQuery

Simple Drop down Menu using jQuery

Hello friends, this tutorial will help you to make the simple drop down menu using jQuery very easily. So you do not need to more plugins for this simple task.

Step 1 :

Here is our HTML markup

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Simple Dropdown using jQuery</title>
5. </head>
6. <body>
7. <div class="container">
8. <ul class="menu">
9. <li><a href="#">Home</a>
10. <ul>
11. <li><a href="#">Link One</a></li>
12. <li><a href="#">Link Two</a></li>
13. <li><a href="#">Link Three</a></li>
14. <li><a href="#">Link Four</a></li>
15. </ul>
16. </li>
17. <li><a href="#">About us</a></li>
18. <li><a href="#">Contact us</a>
19. <ul>
20. <li><a href="#">Link Another One</a></li>
21. <li><a href="#">Link Another Two</a></li>
22. <li><a href="#">Link Another Three</a></li>
23. <li><a href="#">Link Another Four</a></li>
24. </ul>
25. </li>
26. <li><a href="#">Services</a></li>
27. <li><a href="#">Our Clients</a></li>
28. </ul>
29. </div>
32. <footer>
33. &copy; NareshOnLine.com | Naresh Pal
34. </footer>
35. </div>
37. </body>
38. </html>

Step 2 :

Here is our css styling

1. <style type="text/css">
2. *{
3. margin: 0;
4. padding:0;
5. font-family: arial;
6. }
7. .container{
8. width:100%;
9. height: 50px;
11. }
12. .container ul{
13. list-style-type:none;
14. text-transform: uppercase;
15. }
16. .container ul li{
17. background: #236090;
18. float: left;
19. width: 20%;
20. height: 50px;
21. line-height: 50px;
22. text-align: center;
23. position: relative;
24. }
25. .container ul li:hover{
26. background: #023972;
27. }
28. .container ul li>a{
29. display: block;
30. text-decoration: none;
31. color: #fff;
32. }
33. .container ul li ul{
34. position: absolute;
35. width: 100%;
36. }
37. .container ul li li{
38. width: 100% !important;
39. display: none;
40. }
42. footer{
43. clear: both;
44. margin-top:20px;
45. padding: 20px;
46. color: #888;
47. border-top: 2px solid #ccc;
48. text-align: center;
49. }
50. </style>

Step 3 :

Lets add some jQuery to make this task so easy.

First add jQeury liberary using CDN Link

1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Now add your custom script

1. <script type="text/javascript">
2. $(function(){
3. // function on hover on main li
4. $('li').hover(function(){
5. // enabaling function to find child li to show
6. $(this).find('ul>li').stop().show(200);
7. }, function(){
8. //enabling call back function to hide the child li
9. $(this).find('ul>li').hide();
10. });
11. });
12. </script>

 Author : Naresh Pal

Website  : http://nareshonline.com/