Learn and share. The simplest harmony.

 

Create Your Own Dashboard Menu

Posted on June 16, 2010 and got 13 shouts so far

In this tutorial we are going to create our own dashboard menu as in Leopard dashboard. Dashboard menu in Leopard usually uses as a container for a tons of widgets we have and that will be nice if we have one on our web application. First, take a look at below demo to know the result we want to build.

Basic Technique
The dashboard will be hidden out of the webpage, in this case on the bottom of the page. We can do that by setting the dahboard position into absolute, put its bottom position with minus point and set the body’s overflow properties into hidden.

The problem with this technique is our document content will also hidden since the body’s overflow properties was set into hidden, we can solve them by moving the dashboard into the top of the page, but in this demo we’ll continue to put them on the bottom.

Expected Result:

Picture 5



Build Dashboard
We’ll separate the dashboard contents into 3 parts : toggle for showing and hiding dahsboard, dashboard menu for wrapping widgets list and dot container for wrapping dashboard’s background with metallic effect. Wrap them all on one div (as a container) so we can easily move these 3 parts only by styling this div.

Now we will styling them. Set the dashboard’s width into 100%, position absolute, bottom into 0px and also add inset box shadow into them to make emboss effect. Put the toggle’s position on top of the dashboard to make it always visible even the dashboard is hidden.

#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;
}

Expected Result:

Picture 6



Create Metallic Effect With CSS and jQuery
The most interesting technique is how to create metallic effect on dashboard’s background using only CSS and jQuery. The effect are a groups of black circle div with white shadow on it, we can repeat them horizontally until it’s equal to document width and after that repeat them vertically. Move some pixel the odd dots group’s position to make it more real.


      
      
    
.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;
}

Expected Result:

Picture

We won’t create each dot by copy and paste the span since jQuery can generate and repeat them dynamically. Repeat horizontally the dots until it’s equal to document’s width and after that repeat them vertically. The last thing to do is insert them into 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 + '
\n'; //Loop to create the dot for(b=0; b<=dotLength; b++) { element = element + '\t '; } element = element + '
'; } //Insert dots on #dot-container $('#dot-container').html(element);



Put The Widgets
The dashboard was setted perfectly, now we’ll put the widgets list. Put each widgets on unordered list and add its widget name below the widget.


  • Dashboard

  • E-Mail Client

  • Calendar

  • Geolocation

  • Sticky Note

  • AirPort

  • Calculator

Expected Result:

Picture 12



The list still appear vertical, now we must set them into horizontal orientation by set its display properties into inline-block. Add the distance on each widget and set its margin properly.

#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;
	}

Expected Result:

Picture 13



We want the widgets is moving from left to right when the dashboard is show up, so we need to set its left property into -65em.



Hide and Seek
Now we’ll add some jQuery code to the dashboard to make it able showing and hiding. Firstly we must hide the dashboard position by setting its position with some minus pixels, so it will be hidden.

#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;
}

Add toggle function to the image toggle, the first function will rotate the image toggle by set its rotate property into 45 degree (we need zachstronaut’s plugin for doing this), show the dashboard by set its bottom property value into 0px and show the menu by set its left into 3em. These action is in animate function so any change will have animation. For the second function we just need to revert these value.

//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'});
	}
);

That’s it we just made our simple dashboard menu, hope you enjoy my post and thank your for reading! :)

 

This Post Tags :

Bookmark Post :

Pin It
  • Pretty cool!
    But it doesnt work smoothly in FF. The animation is slow and kinda lagged.
    Seems to work properly only in Chrome and Safari, too bad cos it’s are not enough for this cool dashboard to be used live.

  • ih ih ih keren ih, uh uh uh jd kepengen uh
    hmmm…review ah…hihihihi

  • Wow, kinda cool stuff.
    Maybe not for use on websites but 100 % at my next cakephp project.

    Greets from Germany

  • It looks good but seem to slow to function :(

  • This is very slow because you are using so many dots that have border radius on them. if you used a very long image, you may find that you get better performance.

    if i disable all the border radius styles and the thousands of dots its nice and smooth.

  • Sweet. I could see practical applications for this
    Doesn’t work on IE7.

  • Hello ,guy . I`m chinese.

    Your website is wonderful .

    Hope to be your friends.

    My English is poor .Hope you don`t mind.

  • love it

  • I’m use on my site… Thanks

  • hey, this awesome, but when i want to use it with jquery1.7.2..it no functional, can i know why?

  • Very nice menu. Thanks for tutorial.