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?

Dev Academy : Week 3 – JavaScript and JQuery

I have really enjoyed learning more about JS and JQuery. I knew a tiny little bit. I think I understand more now, but definitely do not understand everything that I have gone through this week.

I had already completed the JS Basics and JS Loops, Arrays & Objects, so got on with JQuery Basics. Within this course the projects were:

  • Creating a Spoiler Revealer
  • Creating a Simple Lightbox
  • Creating a Mobile Drop Down Menu
  • Creating a Password Confirmation Form
  • Creating a Simple Drawing Application

It really works for me that the tutorials are focused on creating projects. I enjoy seeing how I can use what I am learning for myself, rather then just doing stuff for the sake of learning it (although you do have to do this at times when learning programming).

Besides working through the Treehouse tutorials, one of the suggested challenges for the week was to “Make your Website Interactive”. I liked the Lightbox idea and added this interactivity to my photo portfolio site.

Screen Shot 2015-03-22 at 5.37.40 pm

If you click on an image it should come up like this:

Screen Shot 2015-03-22 at 5.39.20 pm

If it doesn’t then you may have JavaScript turned off in your browser or your browser for some reason is blocking the loading of the JS.

I am also working changing the layout and structure of my personal website and am planning on adding a JQuery mobile dropdown menu. Although, you can create a dropdown menu using HTML/CSS and after I have had a go with JQuery I am going to look into doing it with HTML/CSS as I think it will look better!

The last project was creating a simple drawing application. I haven’t uploaded this, so just an image. Pretty fun making this and exciting to add the interactivity.

Screen Shot 2015-03-21 at 5.31.27 pm

Another suggested challenge was the Treehouse course “Interactive Web Pages with Javascript”. This is creating interactivity just using JS and no JQuery and using the DOM! I am into the third stage which is “Traversing and Manipulating the DOM with JavaScript”. It is taking quite a lot of my brain power and I know I won’t have grasped everything by the end but it is a start.

I have started early on Unit 2: Ruby Fundamentals, Week 4: Ruby Basics as I have work all week and am not to sure how much time I will have in the evenings. It is going well so far and I was also able to fix some Ruby stuff in my terminal so I could run the tests for the exercises. So all round quite a productive day. And I got a surf in this morning!

More on Ruby Fundamentals soon…