How to Make Hanging Tab CSS and Jquery

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.

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 :)