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.

 

Step 1: Get what you need
First, let’s gather our materials. You’ll need icons. If you want to use the same icons windows uses, you can download a set by deviantArt user fediaFedia here. Upload your icons (whether you used the Widnows icons or your own) to a directory named “imgs”.

 

Step 2: The CSS

If you have an external stylesheet, add the CSS code to it. Otherwise, add it in your head section between the tags “<style type=’text/css’>” and “</style>”.
Here is the CSS code you’ll need. I’ll break it down for you so you know what everything does.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wesbar {
position: fixed;
display: block;
right: -95;
top: 0;
width: 100px;
height: 100%;
background-color: #111111;
transition: right .25s ease-in-out;
-moz-transition: right .25s ease-in-out;
-webkit-transition: right .25s ease-in-out;
color: #CCCCCC;
vertical-align:middle;
z-index:20;
}

This is the main CSS for the sidebar div. As you can see, I’ve set the position as “fixed”. This allows the sidebar to remain on the side as you scroll up or down in the page. The sidebar will follow you as you move around the page!
By default, I’ve set the right to -95. Because the width of the div is 100px, this will show a 5px wide section of the charms bar on the right side of the page. This is where the user will hover to show the charms bar. The top is set to 0 in order to make sure the bar stays at the top at all times.
The z-index is 20 in order to make sure it is on top of everything else on the page.
Finally, you’ll see the 3 transition properties over there. These are supported by most modern browsers, like Chrome, Firefox, sometimes IE, and Safari. What this does is it makes the property of right transition from its default state to its hover state, which we will code next.

1
2
3
.wesbar:hover {
right: 0;
}

There’s only one property on the hover state for the div, and that is setting the right as 0. This allows for the position of the div to change when you hover over it with your mouse. When activated, the entire div will be visible. Since we set the transition property in the last step, we will be able to see the div slide in and when we hover over it, and slide back when our mouse leaves it.

1
2
3
4
5
6
7
8
9
10
11
12
13
.wesbardiv {
width: 100px;
height: 100px;
background-color: #111111;
text-align:center;
color: #aaaaaa;
font-size:16px;
padding-left:5px;
border-left:1px solid transparent;
transition: all .25s linear;
-moz-transition: all .25s linear;
-webkit-transition: all .25s linear;
}

The wesbardiv is the div for each item on the sidebar. It’s a 100x100px box with whatever content you want inside. Not that the background-color is set to the same as the background of the wesbar. This is important because it will make sure the div has no perceivable highlight when inactive. You can also set it as “transparent” if you want, although that isn’t supported by some ancient browsers.
I’ve also set the border-left property to “1px solid transparent”, as well as setting a transition for the entire div, and I’ll explain why after coding the hover state for wesbardiv.

1
2
3
4
.wesbardiv:hover {
background-color: #333333;
border-left:1px solid #FFFFFF;
}

When you hover over it, the background-color property changes to a lighter gray, like a highlight. The border-left also changes to white. Because of the transition, this will create an attractive fading highlight effect as you hover over each item on the charm bar.

1
2
3
.wesbardiv img {
margin-bottom:-10px;
}

This only makes sure that the image is bumped upwards a bit, so that you can add a subtitle.

1
2
3
4
.wesbar a {
color: #aaaaaa;
text-decoration: none;
}

We do this to make sure there’s no underline on the links, and to style the links to be a light gray.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.wbcontent {
position: absolute;
top: 50%;
margin-top:-250px;
}
[.code]
Finally, we style the container in which all the items are going to be held. We set the <strong>position</strong> to “absolute” and the <strong>top</strong> to 50% first, to push the elements half way down.
The <strong>margin-top</strong> will depend on how many items you have in your charms bar. <strong>Multiply the amount of items on your bar by 50px (as that is half the height of each element), and make that your margin-top</strong>. For me, I had 5 items, so 5*50px is 250. Therefore, I made my margin-top -250px. This will shift the items up enough to center them vertically on the bar.
Great! That’s all the CSS we need!

&nbsp;

<strong>Step 3: The HTML</strong>

Here’s the HTML. I’ll explain how it works right after I show you the code.
Add this code after everything else on your page:
[code type=html]
<div class="wesbar">
<div class="wbcontent">

&nbsp;
<div class="wesbardiv"><img alt="" src="imgs/search.png" width="70px" height="70px" />

Search</div>
&nbsp;

&nbsp;
<div class="wesbardiv"><img alt="" src="imgs/Share.png" width="70px" height="70px" />

Share</div>
&nbsp;

&nbsp;
<div class="wesbardiv"><img alt="" src="imgs/Windows.png" width="70px" height="70px" />

Start</div>
&nbsp;

&nbsp;
<div class="wesbardiv"><img alt="" src="imgs/USB.png" width="70px" height="70px" />

Devices</div>
&nbsp;

&nbsp;
<div class="wesbardiv"><img alt="" src="imgs/settings.png" width="70px" height="70px" />

Settings</div>
&nbsp;

</div>
</div>

It’s very simple! Just enclose everything in two divs, one set with the class of “wesbar”, and one set with the class of “wbcontent”! Then, for each item you want to add, create a link enclosing a div with the class of “wesbardiv”. Follow the format in the above code.

 

Step 4: Celebrate
That’s it! You’re done! You should have a charms bar on your site now! Good for you!

 

Step 5: Extend
There’s more you can do with this. It’s extremely versatile. Here are a few examples:

Make the Charm bar only the size of the items, and position it wherever you want on the screen:

1
<img alt="" src="http://blog.bigtreeworld.com/wp-content/uploads/2012/07/070212_2354_EasilyAddaW3.png" />

Like this!

All you have to change is two things in the wesbar CSS. First, change the height to whatever you want the height of your bar to be. Second, change the top to the amount you want it offset from the top, plus whatever the positive value of the margin-top of your wbcontent is. For example, in my case, I want it 50px from the top of the screen, and my wbcontent’s margin-top is -250px, so I set my wesbar’s top to 300px (250px+50px). Voila!

 

Make the Charm bar invisible until you hover on the side:

Again, all you have to change is in the wesbar CSS. First, in all three transition properties, change “right” to “all”. Like so:

1
2
3
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;

Now, add the following to the wesbar class:

1
opacity: 0;

Finally, add the following to wesbar:hover :

1
opacity: 1;

There you go! The charm bar will now fade-slide in from the right!
Also, I’m calling it right now, Windows 8 is going to be awesome.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • Reddit
  • StumbleUpon
  • Digg
  • Email
  • RSS

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

3 responses to “Easily Add a Windows 8 Charm-Style Sidebar to Your Website”

  1. LEONEL says:

    Thank u so much! great tuto!

  2. king says:

    nice but when i created it, the sidebar jumps from the left side of the page to the right when i hover over it. Please help…

    • bigtree says:

      Hi King, sorry for the late reply!

      Just to clarify, did you adjust the code to have the bar show up on the left side, or is it showing up like that using the exact code I have up there?

Leave a Reply

Your email address will not be published. Required fields are marked *