This time around we’re going to build a super useful expanding vertical navigation menu. It’s a great way to hide a lot of links in a fairly small space and the animations will add a nice touch to your site. Even if you’re a complete beginner, you should be able to pull this off.
As you can see ( in demo ), the sections on the bottom are closed by default and slide open when you over over them. However, to add some nice variation we’ll also include a section that stays open all of the time. In the main section that is always open we’ll include a brief welcome message and in the sections that slide open will be sub-sections of navigation links.
Read also : Red Down Full Mobile Movie
Now that we have a good idea of where we’re going, Let’s get started!
The first thing we’re going to do is toss in some nice HTML5 codes to wrap the menu in.
Though it’s not styled at all, the live preview perfectly showcases the hierarchy of our navigation menu.
We’re already finished with the HTML. Now time to start with css styles.
The menu is Done!
To add more Menu Item Section, just customize and add below codes:
One Step Installation For Blogger/Blogspot Blogs
This step for Beginner Bloggers and Blogger/blogspot users. Not every one have compatibility with coding.
To add this Menu to your blogger blog follow below steps:
1. Go to Blogger Dashboard > Layout
3. Save and Drag it in your sidebar. Done 🙂
I hope you enjoyed this walkthrough of building an animated vertical navigation menu. If you can spot any Bug or you face any problem please let us know.
Enjoy Guys! and don’t forget to post your comments. © MyTricksTime.com