Hello friends ! In this tutorial we are making hanging tab like wordpress screen option tab which shown in wordpress dashbord in the right hand side two tab are show screen option and help tab.
So today we will try to make wordpress style hanging tab.
Final Result:
First off all we mae the structur of html.
The HTML
Now we go style the hanging tab
After styling the hanging tab this is the look like this
So we add Display:none property in Nav ul CSS and add some javascript code for hanging the tab when you click on the hanging tab button then ul element will move to slide to bottom.
The Jquery
Wew! this will take long time to make the tutorial now finally finish the tutorial. How was the tutorial i hope you will learn something if you like the tutorial then share with your friends. Thanks :)
So today we will try to make wordpress style hanging tab.
Final Result:
First off all we mae the structur of html.
The HTML
Now we go style the hanging tab
After styling the hanging tab this is the look like this
nav ul{
list-style:none;
margin:0 auto;
width:80%;
padding:40px 0px;
display:none;
}
The Jquery
Wew! this will take long time to make the tutorial now finally finish the tutorial. How was the tutorial i hope you will learn something if you like the tutorial then share with your friends. Thanks :)
0 comments:
Post a Comment