Tinkering

I haven’t made any changes to my site for a few days, but I’ve been working away trying out new things in CSS, and even playing around with a bit of JavaScript. Actually, that’s a lie- I’m using jQuery, and it’s such a small bit of code that I’ve used that I’m pretty sure I understand most of it, but there’s not really a lot there anyway…

The two main things that I’ve been working on have been a menu button, and a sliding menu. I decided to fix a menu button to the top corner of the site (mobile version) so that it doesn’t matter where you are on the site- maybe halfway down the About page- if you decide you want to visit the Contact page, you’ll be able to access it in two clicks. I decided to use the hamburger icon as my menu button. There’s a surprising amount of controversy over that icon, but I decided to go with it- I though it would be good to get the experience of using it at least once. I found an idea which I though would work really well in my case as well- animating it so that the three bars turn into an ‘X’ when clicked, so that the button can then be used to close the menu.

I first spotted the animated menu button on CodePen. And I looked at a lot of sites and tutorials about how to make a sliding-effect menu before I found this video, where it made the most sense to me.


I know I’m a bit late to the party on this one, but I’ve just discovered CodePen, and it’s amazing! I’m having a bit of trouble at the moment with some of my CSS- for some reason my page isn’t sliding over when I press the menu button, but I’m using CodePen to go through it and see where I’m running into problems. All of the html, CSS, and js appear in the browser window along with a preview, which updates automatically, so it’s a lot easier to see where problems occur. It also means that I can leave the original files intact and just change them when I’ve figured out what I need to do.

I also have another new resource: Skillfeed. You can try the site for free, and I’ve found some of the videos really informative. I don’t find myself going there as a first port of call when I’m looking for a video about a new [to me!] technique, so I think I’ll be cancelling when my trial is due to expire, but it’s still worth checking out. The site is offering a free 7 day trial, but I managed to get a longer trial through a promotion on Twitter, so it definitely pays to keep your eyes peeled!

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