Easily Add a Windows 8 Charm-Style Sidebar to Your Website

Requirements: HTML (basic understanding), CSS (basic understanding)

With Microsoft’s movement to the Metro interface, Windows 8 has gotten a beautiful new look. The simple, clean look of Metro drives the focus to the content as opposed to the UI.

One of the cool new features of Windows 8 is the “Charm” sidebar, which is basically a context-sensitive sidebar with buttons for things such as settings, devices, and other useful stuff. It’s unobtrusive, yet very practical and attractive.

Today, I’m going to show you how to add a simple Charm-style bar to your website. This technique is easy to implement and shouldn’t mess around with any of the other elements on your page.

July 12, 2012 at 11:54 pm | Posted in: Tutorials, Web Design | 3 comments