More JQuery – mobile drop down menu

Note: 2 May – whoops, this one has been sitting in my drafts for about 5 weeks!

Last week I learnt a lot about JavaScript and JQuery. One of the challenges for Week 3 of Phase 0 (for Dev Academy) was adding interactivity to our own site/s. I added a simple Lightbox effect to my photo portfolio site.

Screen Shot 2015-03-22 at 5.39.20 pm

Another of the projects I did during the JQuery course on Treehouse was ‘Creating a Mobile Drop Down Menu’. I really like the look of drop down menus for smaller screen dimensions and was keen to add this to one of my sites. I decided to add it to my personal site (which is still a work in progress).

Here is two screenshots from the course project site:

And two from my site:

I am pleased that I have managed to add a drop down menu, although I am going to explore using straight HTML5/CSS3 for this in the future. I think it will look better. I am also going to be redoing the pages as well.

I would like to make a drop down menu that looks a bit like this:

And have the menu on a large screen like this:

It maybe awhile before I get it this good though!

Here are shots of portfolio site, moving from the large screen design of my photo portfolio site to the small screen design. The aim will be to add a drop down menu for the smaller screens:

Anyone know of any good tutorials or site going through how to make a good mobile drop down menu?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s