How To Create a CSS3 and jQuery Dashboard Menu

By Michael Rohde

Today's article on how to create a dashboard menu with CSS3 and jQuery concludes HTMLgoodies' three-part series of articles that focused on code snippets from Webstuffshare.com. This particular approach to designing a website menu is ingenious and borrows heavily from the dashboard menu found on Apple machines, in particular, Leopard.

The CSS3 & jQuery Dashboard Menu Demo

The dashboard menu focuses on icons to allow a visitor to navigate your site. The demo can be found here. At first blush, you might think it an empty page. However, look closer at the bottom left of the screen and you'll see a plus symbol. Click that plus symbol and you'll see the dashboard that coder Hidayat Sagita created. Let's do a deep dive on the code.

Hidayat first explains that to hide the dashboard, you need to set its position to a minus point and define the overflow properties so that it's hidden. This will hide any other content that you have at the bottom of the page. But in this case, the white space is welcome in that it could potentially draw the visitors attention to the plus symbol. While the demo shows items like email, calendar and calculator on the dashboard, you are encouraged to think of these items as placeholders that you will update with your site's content menus.

Let's Dive Into the Code!

<div id="dashboard">
<img src="images/toggle.png" id="toggle">
<div id="dashboard-menu">
<!--list of widgets-->
</div>
<div id="dot-container">
<!--dots groups-->
</div>
</div>

The code shown above defines a dashboard div, a dashboard-menu div and a div for the background dots. This provides you with three different divs: one for activating the dashboard; one for the widgets; and one for the background image--in the case of the demo--that would be the dots. The next step is to style the three divs as such:

#dashboard {
font-family: Arial;
font-style: normal;
background: #a3acb7;
display: block;
width: 100%;
height: 150px;
margin-right: auto;
margin-left: auto;
-webkit-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
position: absolute;
bottom: 0px;
}

#dashboard-menu {
position: absolute;
display: block;
z-index: 2;
}

#dot-container {
display: block;
width: 200%;
text-align: left;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}

#toggle {
display: inline-block;
margin-top: -3em;
left: 0;
position: absolute;
cursor: pointer;
}

While the above code does not feature anything new or groundbreaking, it does provide working code that you can use for your own site. Most of this CSS code is rather basic and the shadow technique has been covered before on HTMLgoodies. The z-index code might be considered a bit more rare. W3Cschools.com defines it as follows, "The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order." In this case, the z-index places the dashboard-menu div in front of the dot-container div.

At this point, you've got yourself an empty gray box at the bottom of your web page. Let's see how Hidayat creates the metallic effect on the dashboard. To paraphrase his words, the most interesting technique in creating this dashboard effect is how to create the metallic effect on the dashboard's background using only CSS and jQuery. The effect is a grouping of black circle divs with white shadows on it. They are repeated horizontally until they are equal to the page width. After that, they are repeated vertically. Then move some of the odd dots to make it look more real.

Here's the CSS:

.dot {
background: #1f1f1f;
width: 4px;
height: 4px;
display: inline-block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 1px 0px #ffffff;
-moz-box-shadow: 0px 1px 0px #ffffff;
box-shadow: 0px 1px 0px #ffffff;
margin-right: .3em;
}

And here's how to implement the CSS in your HTML:

<!--example : 1 dot-->
<div id="dot-container">
<span class="dot"> </span><span class="dot"> </span><span class="dot"> </span><span class="dot"> </span><span class="dot"> </span><span class="dot"> </span>
</div>

<!--example : dot groups-->
<div id="dot-container">
<div style="margin-left:0em; margin-bottom: -.5em">
<span class="dot"> </span><span class="dot"> </span><span class="dot"> </span><span class="dot"> </span><span class="dot"> </span><span class="dot"> </span>
</div>
<div style="margin-left:0.4em; margin-bottom: -.5em">
<span class="dot"> </span><span class="dot"> </span><span class="dot"> </span><span class="dot"> </span>
</div>
</div>

Basically, you just created a black circle with a white shadow. You won't have to copy and paste ad nauseum to display multiple circles. Instead, Hidayat uses jQuery to repeat them dynamically. This is inserted into the dot container div:

//Create base variable, check document width and count how much dot per line.
var a, b, element = '';
documentWidth = $(window).width();
dotLength = parseInt(documentWidth/10);

//Loop dot per line
for(a=0; a<= 11; a++) {

//Check is even or odd to add some pixel to the margin left
className= ((a%2) == 0) ? '0' : '0.4em';
element = element + '
<div style="margin-left:'+className+'; margin-bottom: -.5em">n';

//Loop to create the dot
for(b=0; b<=dotLength; b++) {
element = element + 't<span class="dot"> </span>';
}

element = element + '</div>

';
}

//Insert dots on #dot-container
$('#dot-container').html(element);

Now it's time to insert the widgets:

<div id="dashboard-menu">
<ul>
<li>
<img src="images/gauge.png"> <br> Dashboard
</li>
<li>
<img src="images/mail.png"> <br> E-Mail Client
</li>
<li>
<img src="images/calendar.png"> <br> Calendar
</li>
<li>
<img src="images/map.png"> <br> Geolocation
</li>
<li>
<img src="images/note.png"> <br> Sticky Note
</li>
<li>
<img src="images/wireless.png"> <br> AirPort
</li>
<li>
<img src="images/calculator.png"> <br> Calculator
</li>
</ul>
</div>

Naturally, you'll want to update these images to fit your own site's content. Of course, per the nature of HTML lists, your widgets will appear in a vertical row. Here's how Hidayat adjusts the design to accommodate for a horizontal design:

#dashboard-menu {
position: absolute;
display: block;
left: -65em;
z-index: 2;
}

#dashboard-menu ul li {
display: inline-block;
text-align: center;
margin-right: 2em;
margin-top: 1em;
color: #313235;
text-shadow: 0px 1px 0px #fff;
font-weight: bold;
}

li img {
margin-bottom: .7em;
border: 0;
cursor: pointer;
}

Now it's time to set the dashboard so the visitor can make it appear and disappear. This is used with jQuery as well. First, you have to hide the dashboard:

#dashboard {
font-family: Arial;
font-style: normal;
background: #a3acb7;
display: block;
width: 100%;
height: 150px;
margin-right: auto;
margin-left: auto;
-webkit-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
position: absolute;
bottom: -150px;
}

And now for the jQuery to allow for the hiding and the showing of the dashboard:

//Add event toggle on #toggle
$('#toggle').toggle(

function() {

//Rotate toggle
$(this).stop().animate({rotate : '-=45deg'});
$('#dashboard').stop().animate({bottom : '0px'});
$('#dashboard-menu').stop().animate({left : '3em'});
},

function() {

//Revert rotate toggle
$(this).stop().animate({rotate : '0deg'});
$('#dashboard').stop().animate({bottom : '-150px'}, 700);
$('#dashboard-menu').stop().animate({left : '-65em'});
}
);

And there you have it: a dashboard menu using CSS3 and jQuery to mimic the effect used by Leopard!

 



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date