A jQuery powered HTML5 navigation menu

I was recently asked to knock-up a semantically simple (but elegant) navigation bar for a new open-source project I’ve become involved with (more on that soon!). Having done so with a reasonable amount of success, I thought I would also share it here for everyone else to use as well!

It’s an absolute snap to implement, with the addition of one simple class to the top-level HTML5 nav element a fully styled and accessible navigation menu will be produced. The menu also utilises the jQuery JavaScript library for it’s animation and the addition of some unobtrusive presentational elements.

There’s more detail on how to use the menu contained on the demo page. But in essence, it is as simple as creating a series of nested unordered lists. No more than that.

As always, if you have any questions or problems please leave a response here and I’ll be happy to help. You can also fork this project on github if you want to tinker with it or make some improvements.

It’s been tested in all modern browsers and functions perfectly. It does degrade relatively nicely in IE7, but don’t expect unicorns and rainbows. No IE6 support, because frankly: fuck IE6.

P.S. It’s available in four snazzy colours!

Snippets in Notepad++

I’m a massive fan of Notepad++, the lightweight Windows based text editor, it has a tiny footprint but packs enough features to make it my go-to Windows text editor. Up until quite recently however, I’d been missing snippets, but not any more.

I’ve been using Notepad++ for a few years now, but had always been frustrated by it’s productivity stifling lack of a good snippet plugin; until I discovered QuickText . This awesome little plugin by João Moreno perfectly and elegantly fills the hole I had been feeling for so long.

It’s very simple to use: simply enter a keyword; hit Ctrl+Enter and it automagically expands into your predefined text snippet. You can obviously add as many snippets as you’d like via the Options panel (Plugins > QuickText > Options…).

My only quibble with this little gem is the way it uses the $ character to denote initial cursor position. Once your snippet has been added to your document the cursor is placed at the first $ character in your snippet. Fair enough you might say, that’s a nice way of jumping to the relevant portion of a function, but it results in a problem: JavaScript (among others) uses this character in several important ways, so QuickText removing them all from your snippet (as it does) means a not inconsiderable pain in the ass adding them again.

Note: Myself and several other people have had initial problems getting QuickText to actually replace the keywords with the snippet (Ctrl+Enter did nothing). The problem is that a recent Notepad++ update also uses that keyboard shortcut, so there is a conflict which needs to be resolved before QuickText will work. What you do is go Settings > Shortcut mapper, then click on the Plugin Commands tab and scroll to near the bottom. You’re looking for ‘Replace Tag’, once you’ve found it define a new shortcut (I use Alt+Enter) and restart Notepad++. Everything should now be fully functional.

A set of simple CSS3 buttons

Having searched around for a while, looking for a set of CSS3 ‘buttons’ and not finding anything exactly right for my needs, I decided to create a set from scratch. Being the generous kind of bloke I am, I though that I’d share them here in case any other frustrated web workers are in desperate need of a button fix.

As you probably already know CSS3 support isn’t exactly ubiquitous at this stage (especially for things like linear gradients I used here) so these buttons are going to degrade in older browsers (I’m looking at you IE). Whether that stops you putting them into production is obviously up to you, they look okay when degraded (and I could probably have made them look better if I had a need to) but for the purpose they were created for there was really no need.

What this little exercise did throw up however is exactly how poor the support for CSS3 is in IE9. How Microsoft can justify their attempt to develop a ‘standards compliant’ browser and do it so poorly is beyond my understanding.

General Dev

Snippets in Notepad++

I’m a massive fan of Notepad++, the lightweight Windows-based text editor, it has a tiny footprint but packs enough features to make it my go-to Windows text editor. Up until quite recently, however, I’d been missing snippets, but not anymore.

Continue reading →

_______________________________________________________________________________________________________________________

phpBB: Serve static files from a CDN

Having recently spent the best part of a day modifying the phpBB codebase (3.0.7) to allow me to serve static files via a CDN I can say that I am greatly looking forward to hooks in 3.1.

To save you all a little effort I’m gonna share the method I used below; I’m not going to go into great detail about template and theme issues, as those are a fairly straightforward matter of swapping the old local URL’s in your template/theme for the new public CDN URL’s and clearing the cache. But rather I will explain how to modify the core files to serve smilies, forum ranks, forum images and your image set which is a tad more involved.

Continue reading →

_______________________________________________________________________________________________________________________

Amazon S3 batch editing metadata

I’ve recently had cause to start using S3 on a personal project, and while for the most part, I couldn’t be happier, there is one thing that is irritated more than I thought it would. Namely, you can’t batch edit meta-data for files from within the native AWS console.

Continue reading →

CSS

Mondrian – Random Color Generation in JavaScript

A library I wrote for generating random colors in JavaScript, it supports rgba(a), HTML color names, hex and hsl(a). Check it out!

Continue reading →

_______________________________________________________________________________________________________________________

Pretty Gist

We all love Github, but the embedded Gists aren’t great: they’re drab and lack some functionality. Pretty Gist is a jQuery plugin to make prettier and more functional embedded Github Gists. It’s super simple to use, and can easily enhance Gists already embedded on your pages by just dropping it in.

Continue reading →

_______________________________________________________________________________________________________________________

jQuery Github Widget

Have you ever wanted to add a slick, clean and simple jQuery-powered Github widget to your site? With this one, you can get it going in a couple of minutes! This Github jQuery plugin displays your user info and most recent reports in a simple clean and frankly kick-ass way.

Continue reading →

_______________________________________________________________________________________________________________________

A jQuery powered HTML5 navigation menu

I was recently asked to knock-up a semantically simple (but elegant) navigation bar for a new open-source project I’ve become involved with (more on that soon!). Having done so with a reasonable amount of success, I thought I would also share it here for everyone else to use as well!

Continue reading →

_______________________________________________________________________________________________________________________

A set of simple CSS3 buttons

Having searched around for a while, looking for a set of CSS3 ‘buttons’ and not finding anything exactly right for my needs, I decided to create a set from scratch. Being the generous kind of bloke I am, I thought that I’d share them here in case any other frustrated web workers are in desperate need of a button fix.

Continue reading →

_______________________________________________________________________________________________________________________

Why the ‘outline’ CSS property is so important

There are a lot of designers and developers who (for whatever reason) choose to remove any styling from the outline property that highlights focused anchors. This is a short post about why you shouldn’t do it, or if you really need to; how you can make it look a little better than browser default outlines.

Continue reading →

_______________________________________________________________________________________________________________________

CSS3 Media Queries and Mobile Devices

Having trouble with pages rendering poorly on modern mobile devices? Want to target those devices using just CSS? CSS3 media queries are the answer to your problems.

Continue reading →

_______________________________________________________________________________________________________________________

Simple and Minimalist Nav Bar (+ extra CSS3!)

Inspired by having a little free time, and the fun I had doing it yesterday; here is another implementation of one of Orman Clark’s designs, his ‘Clean and Simple Navigation Menu’. As you will see however, I made a couple of small changes: most noticeably to the font (due to browsers not rendering Helvetica Neue Bold nearly as well as Photoshop); and removing a couple drop shadows (just because I thought it looked a little better this way).

Continue reading →

_______________________________________________________________________________________________________________________

A Simple Thumbnail Slider

Premium Pixels has been in my RSS feed list for quite a while now, providing always high-quality design elements from Orman Clark. Low and behold, on trawling through my RSS feeds this morning I come across a new post by Orman containing something that I had been literally about to start knocking up (probably not quite as well) in Photoshop, his Simple Thumbnail Slider.

Continue reading →

_______________________________________________________________________________________________________________________

Love LESS but you’re put off by Ruby?

I’ve fiddled around with the original LESS a few times and loved the convenience of variables and nested rules in CSS, but I’ve always been reluctant to put it into production because of the fact that it’s based in Ruby. Not that I have anything against Ruby as a language, far from it in fact, but simply the fact that it isn’t as all pervasive as PHP which makes maintenance and portability a bit more of a pain that it should be. But now there’s an answer.

Continue reading →

Web Services

Quick links: ‘Multicolr’ image search and Git Immersion

A couple of really great quick links I’m sharing today: one’s a really cool tool that can help you find images based on a certain color palette; the other’s a great beginners tutorial for the Git version control system.

Continue reading →

_______________________________________________________________________________________________________________________

Tools: Uptime Robot

Having recently been on a bit of an uptime monitoring quest for a client, I started looking around the different web-based services dedicated to this purpose. Having gone through the usual batch: Pingdom, Mon.itor.us, Are My Sites Up? and several others, I quickly came to the realization that if you’re looking for a free uptime monitoring service you have to have a pretty damn good reason to not go with Uptime Robot.

Continue reading →

_______________________________________________________________________________________________________________________

Amazon S3 batch editing metadata

I’ve recently had cause to start using S3 on a personal project, and while for the most part, I couldn’t be happier, there is one thing that is irritated more than I thought it would. Namely, you can’t batch edit meta-data for files from within the native AWS console.

Continue reading →

UI/UX

Pretty Gist

We all love Github, but the embedded Gists aren’t great: they’re drab and lack some functionality. Pretty Gist is a jQuery plugin to make prettier and more functional embedded Github Gists. It’s super simple to use, and can easily enhance Gists already embedded on your pages by just dropping it in.

Continue reading →

_______________________________________________________________________________________________________________________

jQuery Github Widget

Have you ever wanted to add a slick, clean and simple jQuery-powered Github widget to your site? With this one, you can get it going in a couple of minutes! This Github jQuery plugin displays your user info and most recent reports in a simple clean and frankly kick-ass way.

Continue reading →

_______________________________________________________________________________________________________________________

A jQuery powered HTML5 navigation menu

I was recently asked to knock-up a semantically simple (but elegant) navigation bar for a new open-source project I’ve become involved with (more on that soon!). Having done so with a reasonable amount of success, I thought I would also share it here for everyone else to use as well!

Continue reading →

_______________________________________________________________________________________________________________________

A set of simple CSS3 buttons

Having searched around for a while, looking for a set of CSS3 ‘buttons’ and not finding anything exactly right for my needs, I decided to create a set from scratch. Being the generous kind of bloke I am, I thought that I’d share them here in case any other frustrated web workers are in desperate need of a button fix.

Continue reading →

_______________________________________________________________________________________________________________________

A simple jQuery powered image slider

This is another quick implementation of one of Orman Clark’s designs from Premium Pixels. As with the last previous slider I shared, this is based on malsup’s awesome Cycle jQuery plugin.

Continue reading →

_______________________________________________________________________________________________________________________

Accessibility and an introduction to ARIA

First of all, what the hell is ARIA and why should I care? Well first of all, that’s a rather rude way to start a conversation, but whatever dude; the Accessible Rich Internet Applications (ARIA) is a proposed specification (currently in the working draft stage) developed by the W3C. What it does is set out a proposed structure for front-end developers to programmatically make their applications and pages more accessible.

So in short, it makes people who have trouble viewing normal pages lives a little easier.

Continue reading →

_______________________________________________________________________________________________________________________

CSS3 Media Queries and Mobile Devices

Having trouble with pages rendering poorly on modern mobile devices? Want to target those devices using just CSS? CSS3 media queries are the answer to your problems.

Continue reading →

_______________________________________________________________________________________________________________________

Simple and Minimalist Nav Bar (+ extra CSS3!)

Inspired by having a little free time, and the fun I had doing it yesterday; here is another implementation of one of Orman Clark’s designs, his ‘Clean and Simple Navigation Menu’. As you will see however, I made a couple of small changes: most noticeably to the font (due to browsers not rendering Helvetica Neue Bold nearly as well as Photoshop); and removing a couple drop shadows (just because I thought it looked a little better this way).

Continue reading →

_______________________________________________________________________________________________________________________

Amazon S3 batch editing metadata

I’ve recently had cause to start using S3 on a personal project, and while for the most part, I couldn’t be happier, there is one thing that is irritated more than I thought it would. Namely, you can’t batch edit meta-data for files from within the native AWS console.

Continue reading →

Accessibility

Why the ‘outline’ CSS property is so important

There are a lot of designers and developers who (for whatever reason) choose to remove any styling from the outline property that highlights focused anchors. This is a short post about why you shouldn’t do it, or if you really need to; how you can make it look a little better than browser default outlines.

Continue reading →

_______________________________________________________________________________________________________________________

An accessible and validated PHP/jQuery contact form

This is a really accessible and well validated contact form powered by PHP and jQuery. The design is based on Orman Clark’s ‘Clean and Simple Signup Form‘.

Using both serverside PHP and client-side input validation (powered by Jorn Zaefferer’s great jQuery Validation Plugin) this form is developed using ARIA accessibility standards, making it one of the most accessible and reliable contact forms available.

Continue reading →

_______________________________________________________________________________________________________________________

Accessibility and an introduction to ARIA

First of all, what the hell is ARIA and why should I care? Well first of all, that’s a rather rude way to start a conversation, but whatever dude; the Accessible Rich Internet Applications (ARIA) is a proposed specification (currently in the working draft stage) developed by the W3C. What it does is set out a proposed structure for front-end developers to programmatically make their applications and pages more accessible.

So in short, it makes people who have trouble viewing normal pages lives a little easier.

Continue reading →

Front End/UI

Polyglot – A simple clientside i18n library

Polyglot is a very simple string replacement i18n library I built for a personal project and thought was self contained enough to warrant it’s own repo. It’s very simple to use, and does what it does very quicly indeed.

However, it is not a full i18n solution, it does not do any kind of: date; currency; time or any other i18n functions you might expect. It does one thing and does it well. It may do those things in the future however.

Continue reading →
_______________________________________________________________________________________________________________________

Mondrian – Random Color Generation in JavaScript

A library I wrote for generating random colors in JavaScript, it supports rgba(a), HTML color names, hex and hsl(a). Check it out!

Continue reading →
_______________________________________________________________________________________________________________________

Gutenberg templating library

I wrote a small (10 lines) and simple templating library that is dependant on ES5 compatibility in the client for a mobile web app I’m building (more on that at a later date!). You can find the source on Github. Along with the usage and testing, as always feel free to contribute!

Continue reading →

_______________________________________________________________________________________________________________________

Pretty Gist

We all love Github, but the embedded Gists aren’t great: they’re drab and lack some functionality. Pretty Gist is a jQuery plugin to make prettier and more functional embedded Github Gists. It’s super simple to use, and can easily enhance Gists already embedded on your pages by just dropping it in.

Continue reading →

_______________________________________________________________________________________________________________________

jQuery Github Widget

Have you ever wanted to add a slick, clean and simple jQuery powered Github widget to your site? With this one you can get it going in a couple minutes! This Github jQuery plugin displays your user info and most recent repos in a simple clean and frankly kick-ass way.

Continue reading →

_______________________________________________________________________________________________________________________

A jQuery powered HTML5 navigation menu

I was recently asked to knock-up a semantically simple (but elegant) navigation bar for a new open-source project I’ve become involved with (more on that soon!). Having done so with a reasonable amount of success, I thought I would also share it here for everyone else to use as well!

Continue reading →

_______________________________________________________________________________________________________________________

A set of simple CSS3 buttons

Having searched around for a while, looking for a set of CSS3 ‘buttons’ and not finding anything exactly right for my needs, I decided to create a set from scratch. Being the generous kind of bloke I am, I though that I’d share them here in case any other frustrated web workers are in desperate need of a button fix.

Continue reading →

_______________________________________________________________________________________________________________________

A simple jQuery powered image slider

This is another quick implementation of one of Orman Clark’s designs from Premium Pixels. As with the last previous slider I shared, this is based on malsup’s awesome Cycle jQuery plugin.

Continue reading →

_______________________________________________________________________________________________________________________

Why the ‘outline’ CSS property is so important

There are a lot of designers and developers who (for whatever reason) choose to remove any styling from the outline property that highlights focused anchors. This is a short post about why you shouldn’t do it, or if you really need to; how you can make it look a little better than browser default outlines.

Continue reading →

_______________________________________________________________________________________________________________________

An accessible and validated PHP/jQuery contact form

This is a really accessible and well validated contact form powered by PHP and jQuery. The design is based on Orman Clark’s ‘Clean and Simple Signup Form‘.

Using both serverside PHP and client-side input validation (powered by Jorn Zaefferer’s great jQuery Validation Plugin) this form is developed using ARIA accessibility standards, making it one of the most accessible and reliable contact forms available.

Continue reading →

_______________________________________________________________________________________________________________________

A jQuery and PHP RSS Feed Syndicator (with auto-reload!)

This simple jQuery and PHP feed loader is a dead simple and effective way of adding the contents of a news feed to any page you choose. Inserted into a page using only jQuery, it’ll allow you to keep your users up to date with whatever’s happening right now with it’s inline Ajax powered reload.

Continue reading →

_______________________________________________________________________________________________________________________

Accessibility and an introduction to ARIA

First of all, what the hell is ARIA and why should I care? Well first of all, that’s a rather rude way to start a conversation, but whatever dude; the Accessible Rich Internet Applications (ARIA) is a proposed specification (currently in the working draft stage) developed by the W3C. What it does is set out a proposed structure for front-end developers to programmatically make their applications and pages more accessible.

So in short, it makes people who have trouble viewing normal pages lives a little easier.

Continue reading →

_______________________________________________________________________________________________________________________

CSS3 Media Queries and Mobile Devices

Having trouble with pages rendering poorly on modern mobile devices? Want to target those devices using just CSS? CSS3 media queries are the answer to your problems.

Continue reading →

_______________________________________________________________________________________________________________________

Simple and Minimalist Nav Bar (+ extra CSS3!)

Inspired by having a little free time, and the fun I had doing it yesterday; here is another implementation of one of Orman Clark’s designs, his ‘Clean and Simple Navigation Menu’. As you will see however, I made a couple of small changes: most noticeably to the font (due to browsers not rendering Helvetica Neue Bold nearly as well as Photoshop); and removing a couple drop shadows (just because I thought it looked a little better this way).

Continue reading →

_______________________________________________________________________________________________________________________

A Simple Thumbnail Slider

Premium Pixels has been in my RSS feed list for quite a while now, providing always high quality design elements from Orman Clark. Low and behold, on trawling through my RSS feeds this morning I come across a new post by Orman containing something that I had been literally about to start knocking up (probably not quite as well) in Photoshop, his Simple Thumbnail Slider.

Continue reading →

_______________________________________________________________________________________________________________________

Book: jQuery Fundmentals

That was until recently when I discovered this excellent, comprehensive, lucidly written and above all free and ‘open-source’ eBook by Rebecca Murphy (@rmurphey) titled jQuery Fundamentals.

Continue reading →

_______________________________________________________________________________________________________________________

Love LESS but you’re put off by Ruby?

I’ve fiddled around with the original LESS a few times and loved the convenience of variables and nested rules in CSS, but I’ve always been reluctant to put it into production because of the fact that it’s based in Ruby. Not that I have anything against Ruby as a language, far from it in fact, but simply the fact that it isn’t as all pervasive as PHP which makes maintenance and portability a bit more of a pain that it should be. But now there’s an answer.

Continue reading →

_______________________________________________________________________________________________________________________

Amazon S3 batch editing metadata

I’ve recently had cause to start using S3 on a personal project, and while for the most part I couldn’t be happier, there is one thing that is irritated more than I thought it would. Namely, you can’t batch edit meta-data for files from within the native AWS console.

Continue reading →

JavaScript

Polyglot – A simple client-side i18n library

Polyglot is a very simple string replacement i18n library I built for a personal project and thought was self-contained enough to warrant its own repo. It’s very simple to use and does what it does very quickly indeed.

However, it is not a full i18n solution, it does not do any kind of date; currency; time or any other i18n functions you might expect. It does one thing and does it well. It may do those things in the future, however.

Continue reading →

_______________________________________________________________________________________________________________________

Mondrian – Random Color Generation in JavaScript

A library I wrote for generating random colors in JavaScript, it supports rgba(a), HTML color names, hex and hsl(a). Check it out!

Continue reading →

_______________________________________________________________________________________________________________________

Gutenberg templating library

I wrote a small (10 lines) and simple templating library that is dependant on ES5 compatibility in the client for a mobile web app I’m building (more on that at a later date!). You can find the source on Github. Along with the usage and testing, as always feel free to contribute!

Continue reading →

_______________________________________________________________________________________________________________________

Pretty Gist

We all love Github, but the embedded Gists aren’t great: they’re drab and lack some functionality. Pretty Gist is a jQuery plugin to make prettier and more functional embedded Github Gists. It’s super simple to use, and can easily enhance Gists already embedded on your pages by just dropping it in.

Continue reading →

_______________________________________________________________________________________________________________________

jQuery Github Widget

Have you ever wanted to add a slick, clean and simple jQuery-powered Github widget to your site? With this one, you can get it going in a couple of minutes! This Github jQuery plugin displays your user info and most recent reports in a simple clean and frankly kick-ass way.

Continue reading →

_______________________________________________________________________________________________________________________

A jQuery powered HTML5 navigation menu

I was recently asked to knock-up a semantically simple (but elegant) navigation bar for a new open-source project I’ve become involved with (more on that soon!). Having done so with a reasonable amount of success, I thought I would also share it here for everyone else to use as well!

Continue reading →

_______________________________________________________________________________________________________________________

An accessible and validated PHP/jQuery contact form

This is a really accessible and well-validated contact form powered by PHP and jQuery. The design is based on Orman Clark’s ‘Clean and Simple Signup Form‘.

Using both serverside PHP and client-side input validation (powered by Jorn Zaefferer’s great jQuery Validation Plugin) this form is developed using ARIA accessibility standards, making it one of the most accessible and reliable contact forms available.

Continue reading →

_______________________________________________________________________________________________________________________

A jQuery and PHP RSS Feed Syndicator (with auto-reload!)

This simple jQuery and PHP feed loader is a dead simple and effective way of adding the contents of a news feed to any page you choose. Inserted into a page using only jQuery, it’ll allow you to keep your users up to date with whatever’s happening right now with it’s inline Ajax powered reload.

Continue reading →

_______________________________________________________________________________________________________________________

Simple and Minimalist Nav Bar (+ extra CSS3!)

Inspired by having a little free time, and the fun I had doing it yesterday; here is another implementation of one of Orman Clark’s designs, his ‘Clean and Simple Navigation Menu’. As you will see, however, I made a couple of small changes: most noticeably to the font (due to browsers not rendering Helvetica Neue Bold nearly as well as Photoshop); and removing a couple drop shadows (just because I thought it looked a little better this way).

Continue reading →

_______________________________________________________________________________________________________________________

A Simple Thumbnail Slider

Premium Pixels has been in my RSS feed list for quite a while now, providing always high-quality design elements from Orman Clark. Low and behold, on trawling through my RSS feeds this morning I come across a new post by Orman containing something that I had been literally about to start knocking up (probably not quite as well) in Photoshop, his Simple Thumbnail Slider.

Continue reading →

_______________________________________________________________________________________________________________________

Book: jQuery Fundmentals

That was until recently when I discovered this excellent, comprehensive, lucidly written and above all free and ‘open-source’ eBook by Rebecca Murphy (@rmurphey) titled jQuery Fundamentals.

Continue reading →