Clean and Attractive jQuery Vertical Menu Tutorial

Introduction

Alright, today we will learn how to make a vertical menu. It looks something like a lava lamp menu (Simple Lava Lamp Menu Tutorial) because it has an icon following the hovered item. It's a pretty simple menu, but with a little bit of jQuery script, we will able to make it even more eye-catching.

1. HTML

As usual, from all my previous tutorials, I always like to keep HTML clean. Well, it's a good practise so that other can read your code easily. We use a list for the menu and a div with block and png (fix the png transparent image) classes for the moving object.

Image above illustrates the structure of the html. Class .block is floating above UL list within the #menu.

2. CSS

I have something new in CSS - quick CSS PNG fix! Credit to Komodomedia for the script. It's really easy to implement. What you need to do is, if you have a div or an image with transparent PNG image, assign the .PNG class to it and it will fix the ie6 issue. Yes, IE6 issue, it has a lot more issues. If you want to know more about it, read this article for the bugs and fixes -

Right, I have put comments in the following CSS code to explain its purposes.

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

I see that the arrow position defaults to the "selected" nav item upon load, but it's not returning to that position once you scroll through the nav. Instead the arrow stays on the last nav item that the cursor hovers over. Is there a way to correct this so the arrow always resets to the nav item with the class of "selected"?