Nowadays, websites are not only being accessed from desktop. We can access websites from tablet or mobile devices anytime and anywhere. Therefore, a front-end web developer must create website that is compatible to all screen resolutions, from desktop to mobile devices.

Here comes Responsive Web Design. With responsive design your website will look great no matter what kind of device or screen size on which it’s being viewed. This is where web design is currently heading and if you ignore responsive design you stand a good chance of being left behind and designing sites that look out of date. And do you know? Almost all WordPress themes by ColorLabs support responsive design and we are still working on getting all of them to have responsive design.

When converting theme to support responsive layout, I always find a problem: how to fit the long menu into a small screen? The answer is to turn that long menu into a dropdown select menu. Let’s take this navigation menu from Directory, our Classified Ads theme, as an example.

We can dynamically create the dropdown menu from the original using some help from jQuery. For simplicity I will not use media queries here, just a few lines of code to convert that long original menu.

With the help of jQuery when the user is on a small screen and clicks the dropdown menu, they will get an interface to select an option that is nice and easy to choose. Much better than easier to navigate than showing a tiny links. This is how the regular row of links on Directory’s menu will be like when being seen on smaller screen.

I created a jQuery plugin for this script and you can download it at GitHub. Feel free to fork the code and send pull request if you have better solution for this code. After using plugin, the menu turn into a dropdown select menu.