process_menu_FI

After my case study of Pollen in the previous post, I knew that I wanted a hamburger menu straight away. As this is my first time of making a wordpress theme, to took me quite a while to figure out how the code and hierarchy works, not mentioning to build up a hamburger menu from scratch.

To make myself work more comfortable, I’ve decided to start coding after implementing the wordpress code. As I thought integrating with wordpress could be more challenging then ui formatting.

process_menu1

I’ve started with some base structure from Bootstrap, and setup a fix navigation. Later on – the scary part, is to pull the menu data out from wordpress. I did managed to retrieve the data at some point, but all the formats were messed up. But the good news is, I made my hamburger icon! (Woo to the first step!)

process_menu2

As the menu effect that I wanted to achieve is an overlay menu – when the users clicked on the hamburger, a overlay layout will appear, listing out all the menu options. I was struggling with positioning the elements a bit. Everything was flying around, like literally. With the help and hint from my tutor, I finally figure out where the problem is – relative v.s. absolute positioning. I’m actually glad that this question pops out as I’ve always find relative and absolute position confusing. But now, I can proudly say, I FINALLY GET IT!

After the adjustment and a few touch on, the menu came out exactly as what I wanted it to look like. Although there is still some improvement to do, but for now, I’m quite happy with it, you?