Windows Taskbar Like Navigation Menu

3 posts Page 1 of 1
Contributors
User avatar
visualtech
VIP - Donator
VIP - Donator
Posts: 265
Joined: Sat Nov 19, 2011 2:19 pm

In this tutorial we will create a 'Windows-Like Preview' popover. So, without any further ado, let's get coding.

This is what the end-product looks like:
Image

To streamline everything, we will use a CSS and a JS framework called: Bootstrap at http://getbootstrap.com
NOTE: I have tested it with the latest one, it's not working: so use the file provided as a download.

Now, select the folder where you will store everything about your website. My folder looks like this:

Image

The assets folder will hold all of our helper files, like stylesheets, jQuery plugins, images, etc.

Go ahead and create your index.html file and add the <!DOCTYPE html> and type in a skeleton of the page. Also add the link reference to the bootstrap.css file. Just for your reference, if should look like this:

Image
I will be using version 1.7.1 of jQuery, but I guess any would work fine. https://ajax.googleapis.com/ajax/libs/j ... ery.min.js

So, go ahead and add a script reference to the CDN. (A good practice is to add all the JavaScript files at the end of the <body> section, it helps in loading the page faster.)
The code should look like this:
Image

The first script reference, links your page to the jQuery CDN. This is the base of all the things we will be doing in this tutorial. (for more information, visit http://jquery.com)

The second file, is the jQuery plugin for adding tooltips. If anyone is from a programming background, he will know that Tooltips are small pop-ups which are shown when the cursor hovered over a control; often used for providing help.

Similarly, the third file, helps in providing pop-overs which are like small boxes containing some information.
With that done, let's structure our page to make it look a little better. At this point (i.e. after adding the page's structure) the code should look like this:

Image

Keep in mind that in every bootstrap design, we HAVE to use the container class (in a div) to structure and format the page correctly.

If we open the file in our web browser, (at this point) it should look like this:
Image

Now let's see the anchor tags:
Code: Select all
<a href="#"  id="example" class="btn btn-success" rel="popover" data-placement="bottom">hover for popover</a>
The first property, href is just telling the tag where to go when clicked. Next we just add an id to this element (as well as all others) as we will need to use them via jQuery. Then, just to make things look good, we use the built-in button-styling classes, btn and btn-success. Now comes the interesting part, rel="popover", this tells that Dude, I have a popover embedded into me, stay calm. (Well, browsers don't speak; but you got the point ;) ). Technically, it's the relevance identifier.

The last property is the orientation of the popover, I am just using bottom for demonstration purposes, but for native Windows Look, use data-placement="top".

Now if you hover over the buttons you see: well, nothing. That's because the popovers are opt-in meaning that, you have to trigger them. To trigger that, we add a little jQuery.

Now the code should look like this: (after the jQuery code)
Image

Let's see the code, line-by-line.

Those of you who are unfamiliar with jQuery, there are selectors, and we use selectors to select HTML elements, and apply the magic, to perform some action when the page loads, we use
Code: Select all

$(function() {

// This code will be executed once the page has finished loading.

});

The next line, sets the variable 'img' with the HTML image link of the image you want. This can be anything.

Now, as I told you that popovers are opt-in , let's trigger 'em.

To do that, $(selector).popover({properties}); has to be called.

Let's look at one such trigger:
$("#example1").popover({ title: 'Preview', content: img, html:true });

The selector here is the element with the id of example1 (remember we had set an id to the anchor tag) and then calls the popover function.
We see that there is a Title property which tells it so set the title accordingly (here 'Preview'), next we tell the content we want in the popover, which, in this case is the variable we defined earlier: imgdoes that. Lastly, for the popover to render correctly, we tell it that the content we will be passing is of type html.

And voila! We are done.

Live Preview: http://labsvisual.no-ip.biz/tutorials/wtsk/

For all those lazy bums, here is the code: (5 code credits, hope you don't mind)

This file is hosted off-site.

------
Think that the tutorial was not up to the mark? Throw in your comments to help me improve the quality of my tutorials.
Image
User avatar
muttley1968
Hardcore Programmer
Hardcore Programmer
Posts: 622
Joined: Thu Jun 17, 2010 11:54 pm

GREAT tut thanks bro going to use this a lot
User avatar
noypikami
VIP - Donator
VIP - Donator
Posts: 151
Joined: Sat Dec 22, 2012 1:49 am

#visualtech awesome.. good info. :) keep on posting...!!! +rep
3 posts Page 1 of 1
Return to “Tutorials”