Supporters of End User
Web

Mega Menus for SharePoint - Part 3 of 3

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:Branding; CSS; MOSS; WSS; 2010

You may also be interested in: SharePoint evolution conference 2013

 

Editor's note: Follow contributors Heather Solomon and Dustin Miller @spexperience

The final post of a three part series, Heather Solomon and Dustin Miller are exploring the ever-popular "Mega Menu", and how to create a powerful, styled and functional mega menu for use on your SharePoint sites. The first post explored the HTML markup and CSS needed for navigation, organized into an unordered list. The follow-up post walked through the use of navigation taxonomy and the XSL for the menu. This final piece will first show how to implement the custom view in your master page, and then enhance it further with some shiny new CSS.

NOTE: This post is going to get seriously geeky. If you're not handy with HTML and CSS, you might have a lot of trial and error in your future. That's okay! Experiment and explore!

Uh, Dustin, about that cliffhanger...

Oh, yes. About that. You're here for part three, which means you want to know all about actually implementing the XSL for this super-awesome-fantastic mega menu.

There are a few things to understand before implementing the mega menu on your SharePoint site.

  1. The navigation items are stored in a list at the top level of your site collection
  2. The mega menu itself is created as a Data View Web Part
  3. The trick to getting the data view into your master page without any excess web part HTML markup
  4. The other trick - getting the data view to read the list from the top level site no matter how many levels deep it may appear

Point #1: The list

If you followed Part 1 in this series, you've already created the list. Hopefully you already created it at the top-level site in your site collection, no? If not, you'll want to re-do it. :)

Point #2: Creating the Data View Web Part

The next item on the agenda: Creating the Data View Web Part for the mega menu. Because it's a good idea to test it out before moving it into a master page, I recommend starting with a new Web Part Page in the Site Pages document library on your top-level site. Call it something clever, like megamenu.aspx. Open the file in SharePoint designer and make sure you're in design mode.

  1. Click inside the FullPage web part zone to make it active.
  2. 2013-03-29-MegaMenu-Part03-01.gif

  3. Then, using the ribbon, select the Insert tab, then in the Data Views & Forms group, open the Data View drop down menu. Select Empty Data View from the bottom of the drop down.
  4. 2013-03-29-MegaMenu-Part03-02.gif

  5. In the empty view that appears, click Click here to select a data source.
  6. In the Data Sources Picker dialog that appears, select the list you created for your navigation links, then click OK.
  7. Drag the Title field from the Data Source Details task pane into the view. Your view should look pretty lame so far.
  8. 2013-03-29-MegaMenu-Part03-03.gif

  9. By default, SharePoint will only show ten (10) items at a time. Configure the view to show all items by opening the Paging drop down menu in the Options ribbon tab. Select Display All Items.
  10. 2013-03-29-MegaMenu-Part03-04.gif

  11. Time to discard the XSL that SharePoint Designer has created for the view and replace it with the mega menu XSL that I've created for you! Download the final XSL and save it to your SharePoint site. For the purposes of this article, I've saved mine in a new document library called XSL, but you'll probably upload it to the Style Library on your top level site.

    Right-click the lame-looking Data View that you've created and select Web Part Properties. Expand the Miscellaneous group. Click inside the XSL Link text box to activate it, then click the ... button to open a file browser. Browse to select the file you uploaded. It will have a relative path in it - you can leave it for now.
  12. 2013-03-29-MegaMenu-Part03-05.gif

  13. Your view will still look pretty lame, but at least has a new style — a series of nested, bulleted lists. That's exactly what it should look like! Save the page and open it in your browser.
  14. 2013-03-29-MegaMenu-Part03-06.gif

Points #3 and #4: Getting it into the Master Page

So far, so good. Time to move the view into the Master Page, and get rid of the extra HTML that SharePoint usually renders around its web parts. I find it's easier to do the next step using another text editor.

In design mode, select the entire Data View Web Part that you've created. The simplest way to do it is to click the control name in the upper-left of the web part.

2013-03-29-MegaMenu-Part03-07.gif

Then, switch to Code View, and immediately press CTRL-C to copy the code for the web part. Open up your favorite text/code editor - mine is Sublime Text - and paste it into a new document.

There are a few lines that we're going to change in order to make this work properly in the master page. The first change is in the first line.


<WebPartPages:DataFormWebPart runat="server" Description="" ListDisplayName="" PartOrder="2" HelpLink="" AllowRemove="True" IsVisible="True" AllowHide="True" UseSQLDataSourcePaging="True" ExportControlledProperties="True" DataSourceID="" Title="Navigation Links" ViewFlag="8" NoDefaultStyle="TRUE" AllowConnect="True" FrameState="Normal" PageSize="10" PartImageLarge="" AsyncRefresh="False" ExportMode="All" Dir="Default" DetailLink="" ShowWithSampleData="False" ListId="cd7c21df-39fd-4797-9078-a16eb5a09410" ListName="{CD7C21DF-39FD-4797-9078-A16EB5A09410}" FrameType="TitleBarOnly" PartImageSmall="" IsIncluded="True" SuppressWebPartChrome="False" AllowEdit="True" ManualRefresh="False" ChromeType="TitleOnly" AutoRefresh="False" AutoRefreshInterval="60" AllowMinimize="True" ViewContentTypeId="" InitialAsyncDataFetch="False" MissingAssembly="Cannot import this Web Part." HelpMode="Modeless" ListUrl="" ID="g_681cae52_0114_4875_81f7_8129e4ae3d9c" ConnectionID="00000000-0000-0000-0000-000000000000" AllowZoneChange="True" IsIncludedFilter="" __MarkupType="vsattributemarkup" __WebPartId="{681CAE52-0114-4875-81F7-8129E4AE3D9C}" __AllowXSLTEditing="true" WebPart="true" Height="" Width="">

Holy cow, that's a lot of stuff. Ignore the ListIDs (yours will be different from mine anyway). Change other attributes as follows:

  • FrameType="None"
  • ChromeType="None"
  • SuppressWebPartChrome="True"

That last attribute is a nice trick. If a web part exists outside of a web part zone, you can suppress the normal table-based wrapper around SharePoint web parts.

There's a lot more that you can cut out from that first tag since it's not used by this web part. In the sample linked below, you'll see what I cut out of mine.

Moving on: Find the ParameterBindings element and add a new child with the name WebUrl — see this code sample for guidance, and please change mysitecollectionroot to the root path to the top level site of your site collection


<ParameterBindings>
    <ParameterBinding Name="ListID" ...snipped from sample... />
    <ParameterBinding Name="WebUrl" Location="None" DefaultValue="/mysitecollectionroot/"/>
</ParameterBindings>

Next, find the DataSources section of the code. You can remove the elements (including their contents) for InsertParameters, UpdateParameters and DeleteParameters, since the mega menu isn't doing any list editing. In the remaining SelectParameters element, add a child element that will pair up with the Parameter you just added. Here's a sample of mine


<SelectParameters>
    <WebPartPages:DataFormParameter Name="ListID" ...snipped from sample... />
    <WebPartPages:DataFormParameter ParameterKey="WebURL" PropertyName="ParameterValues" DefaultValue="/mysitecollectionroot/" Name="WebURL">
</SelectParameters>

The ParameterBindings section will allow you to easily change the root URL later by using the Parameters dialog for the Data View Web Part in SharePoint Designer. I'll have more insight into everything else that ParameterBindings element does in a future post.

Now, we need to fix the XslLink element, since it won't work any longer when the web part gets moved to the master page. Find the XslLink element and change its contents to a root relative path to the XSL file you uploaded.


<XslLink>
    /mysitecollectionroot/myXSLlocation/navlinks.xsl
</XslLink> 

If you really want to clean things up, you can select the contents of the Xsl element and remove them.

The final version of my web part looks like this (note: I did additional "spring cleaning" for mine):


<WebPartPages:DataFormWebPart runat="server" FrameState="Normal" FrameType="None" SuppressWebPartChrome="True" ChromeType="None" ID="g_681cae52_0114_4875_81f7_8129e4ae3d9c"  WebPart="true" __WebPartId="{C5C698A0-A9D0-495A-B28A-AAC8EBC9133B}">
    <ParameterBindings>
        <ParameterBinding Name="ListID" Location="None" DefaultValue="{CD7C21DF-39FD-4797-9078-A16EB5A09410}"/>
        <ParameterBinding Name="WebUrl" Location="None" DefaultValue="/"/>
    </ParameterBindings>
    <XslLink>
        /XSL/navlinks.xsl
    </XslLink>
        <DataFields>
            @Title,Title;@URL,URL;@Description,Description;@Parent_x0020_Link,Parent Link;@Group,Group;@Parent_x0020_Link_x003a_ID,Parent Link:ID;@ID,ID
        </DataFields>
        <Xsl/>
        <DataSources>
            <SharePoint:SPDataSource runat="server" DataSourceMode="List" SelectCommand="<View></View>" UseInternalName="true" UseServerDataFormat="true" ID="dataformwebpart1">
                <SelectParameters>
                    <WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{CD7C21DF-39FD-4797-9078-A16EB5A09410}"/>
                    <WebPartPages:DataFormParameter ParameterKey="WebURL" PropertyName="ParameterValues" DefaultValue="/" Name="WebURL">
                </SelectParameters>
        </SharePoint:SPDataSource>
    </DataSources>
</WebPartPages:DataFormWebPart>

Please don't copy and paste my example without careful editing - your ListID GUIDs and WebUrls likely won't match mine and your view won't work!

If you're feeling adventurous, you could replace ListID references with ListName, and their GUIDs with the name of your navigation items list, but the details for that I'll save for a future post!

Make it so.

Okay, what now? I assume you have a place in mind in your Master Page for the mega menu. We won't be spending any time going through the ins and outs of Master Page design in this post, but our blog, called Our SharePoint Experience, has quite a bit of related content.

Simply copy and paste the edited code into the desired location of your master page. In an effort to make a quick demo, I just placed mine immediately after the opening body tag in my master page. The screenshot below also shows a styled version of the menu using Heather's CSS.

2013-03-29-MegaMenu-Part03-08.gif

Phew, that was a hard fought battle, no? You were warned that this post would get geeky!

Speaking of Heather's CSS, I'm going to get out of the way and let Heather talk about some CSS!

CSS Enhancements

Hello again, everyone. Dustin has delivered you back to me, Heather, a CSS fanatic! There is so much you can do with CSS - it is a very powerful and extensible way to style your sites and essential for SharePoint branding. I am going to take a deeper look at the CSS already created for this mega menu and add some additional properties and new style statements to help jazz up the look and feel.

Make the menu snazzy looking

So far the CSS has been pretty basic to get the unordered list switched from a simple bulleted list to a standard web navigation bar with drop down functionality. At any time it can be spiced up using just a little more CSS.

Create a full width navigation bar

  1. The current design sets the background for the unordered list items (li) and that is the only thing that is styled. This can be changed to instead style the full list (ul) and expand it across the page. Add the following style statement that targets the first list (level 1) only and set the width to auto or a fixed value that matches the design

  2. /* List container */
    nav > ul {
        width: auto;
        height: 45px;
    }
    

  3. The height property in this style statement is very important if the list items are floated. Since those list items have been removed from the flow of the content, as far as the parent container is concerned, it is empty. Manually setting a height will force the parent container to take up space, thus showing any background styling.

    With the list container expanded in size, background style can be added in. An image can be used, or a little CSS3 to create a background gradient. Don't wig out when you see the following block of code. There are great gradient generators available online like the Ultimate CSS Gradient Generator. Also, for brevity, I'll just use the "final" property names for the CSS. If you're copying/pasting from this post instead of using the final CSS file linked below, you'll want to run your CSS file through Prefixr to generate the vendor-prefixed versions of the more advanced properties.

  4. /* Background gradient */
        background: rgb(106,98,112);
    

  5. Another nice touch would be to create some space between the left and right edges of the bar and the navigation items.

  6. padding: 0 50px;
    

  7. And finally, add rounded corners to the bar using CSS3. There are generators for this CSS code as well. Check out Border Radius and CSS3 Generator.

  8. border: 1px solid #3A313F;
    border-radius: 12px;
    

Here is a visual of the changes:

2013-03-29-MegaMenu-Part03-09.png

And a copy of the new style statement with everything combined (again, using non-prefixed properties)


/* ---------- Menu - Level 1 ---------- */
    /* List container */
        nav > ul {
            width: auto;
            height: 45px;
            padding: 0 50px;
            border: 1px solid #3A313F;

            /* Below properties are CSS3  */

            /* Background gradient */
                background: rgb(106,98,112);                    
            /* Border radius */
                border-radius: 12px;
        }

Enhance the list item style

  1. With the list bar expanded, a few changes to the list item styling would be nice. Starting with the existing list item style statement, remove the current solid background color and use a background gradient instead.

  2. /* List item container */
    nav > ul > li {
        float: left;
        width: auto; /* Required for the float property - Can optionally set a fixed width here */
        padding: 12px;
        border-right: 1px solid #ADACA2;
        position: relative;
    
        /* Below properties are CSS3  */
    
        /* Background gradient */            
        background: linear-gradient(to bottom,  rgba(227,226,179,0.38) 0%,rgba(255,255,255,0.27) 30%,rgba(255,255,255,0) 100%); /* W3C */
    }
    

  3. With the newly added left padding between the bar edge and the first navigation item, the lack of a left border really stands out (see previous screenshot). A simple style selector that uses the first-child pseudo class can add the border to the left of the first item.

  4. /* Add left border to first navigation item */
    
    nav > ul > li:first-child {
        border-left: 1px solid #ADACA2
    }
    

  5. Since the backgrounds have been upgraded the hover effect should get a face lift too. The following updates the existing styles to use a gradient background and new hover text color.

  6. /* List item container hover effect */
    nav > ul > li:hover {
        background: linear-gradient(to bottom,  rgba(227,226,179,0.54) 0%,rgba(191,196,125,0.53) 13%,rgba(165,165,97,0.52) 39%,rgba(191,196,125,0.5) 83%,rgba(227,226,179,0.49) 100%); /* W3C */
    }
    
    /* List item text hover effect */
    nav > ul > li:hover > a {
        color: white
    }
    

  7. Something else that can be added is a down arrow next to the text to give a visual indicator that there is a drop down menu associated with the navigation text. There are a few different ways this can be done:
    • Add a background image to the anchor element - the most popular and bulletproof method.
    • Use a pure CSS icon and add it via the :after pseudo class - Not fully supported in all browsers and doesn't downgrade gracefully.
    • Insert in a character after the text via the :after pseudo class - Requires a new call to a CSS file from either the master page file or the CSS file.

Just to spice things up, here is a style statement that uses the :after pseudo class to insert in the character "v" after the navigation text; it also styles it using a Google Web Font. This particular font face creates a "v" that looks like a stylistic down arrow. This technique does require linking to the Google Web Font either through the master page or through an @import statement added in the CSS file.


/* Add down arrow character after navigation item text */
nav > ul > li > a:after {
    content: "V";
    font-family: 'Cherry Cream Soda', cursive;
    color: #E3E2B3;
    font-size: 9px;
    font-weight: bold;
    padding-left: 12px;
    opacity: .7;
}

One of the following is also needed:


/*
    Put this in a CSS file - please note that the use of @import can sometimes affect performance

    @import url(http://fonts.googleapis.com/css?family=Cherry+Cream+Soda);

    Or put this in the master page within the HEAD element

    <link href='http://fonts.googleapis.com/css?family=Cherry+Cream+Soda' rel='stylesheet' type='text/css'>
*/

And in case you just aren't feeling the Google Web Font approach, here is the style statement to create a background image instead. Update the image path based on your image location and file name. The right padding value may need to be adjusted based on the size of your image.


/* Add down arrow image in navigation item text background */
nav > ul > li > a {
    background: url("insert-image-path-here") no-repeat right;
    padding-right: 30px;
}

And voila, the improved list items:

2013-03-29-MegaMenu-Part03-10.png

Here is the un-prefixed version so far..


/* ---------- Menu - Level 1 ---------- */
    /* List item container */
        nav > ul > li {
            float: left;
            width: auto; /* Required for the float property - Can optionally set a fixed width here */
            padding: 12px;
            border-right: 1px solid #ADACA2;
            position: relative;

            /* Below properties are CSS3  */

            /* Background gradient */
                background: linear-gradient(to bottom, rgba(227,226,179,0.38) 0%,rgba(255,255,255,0.27) 30%,rgba(255,255,255,0) 100%); /* W3C */
        }

    /* Add left border to first navigation item */
        nav > ul > li:first-child  {
            border-left: 1px solid #ADACA2;
        }

    /* Add down arrow character after navigation item text */
        nav > ul > li > a:after {
            content: "V";
            font-family: 'Cherry Cream Soda', cursive;
            color: #E3E2B3;
            font-size: 9px;
            font-weight: bold;
            padding-left: 12px;
            opacity: .7;
        }

    /* List item container hover effect */
        nav > ul > li:hover {

            /* Below properties are CSS3  */

            /* Background gradient */
                background: linear-gradient(to bottom, rgba(227,226,179,0.54) 0%,rgba(191,196,125,0.53) 13%,rgba(165,165,97,0.52) 39%,rgba(191,196,125,0.5) 83%,rgba(227,226,179,0.49) 100%); /* W3C */
        }

    /* List item text hover effect */
        nav > ul > li:hover > a {
            color:white;
        }

Adjust the drop down menu (level 2 menu)

  1. Whenever CSS gets enhanced or adjusted, there is usually something else that needs to get updated as a result. It is always a good idea to test all of your design after editing a portion of your CSS. Once the navigation bar updates above have been made, a few tweaks are necessary for the drop down menu styles so everything looks right. The following removes the top border from the first level 2 navigation item. This is a new style statement.

  2. /* Remove top border from first navigation item */
    nav > ul > li > ul > li:first-child {
        border-top: 0;
    }
    

  3. Next adjustments are made to an existing style statement to move the drop down menu placement just a bit.

  4. /* Show 2nd level lists when parent item is hovered */
    nav > ul > li:hover > ul {
        left: -1px;
        top: 32px;
    }
    

  5. There is a small display hiccup where the right border on the level 1 navigation items shows on top of the drop down menu. This can be fixed easily by adding the z-index property to this existing style statement.

  6. /* List container */
    nav > ul > li > ul {
        z-index: 1;
    }
    

The end result

2013-03-29-MegaMenu-Part03-11.png

You can download the final CSS - it's ready for you to use in your own mega menu experiments!

That's all, folks!

Whew! We hope you have enjoyed creating a rockin' new mega menu for your SharePoint site. We would love to hear your feedback - we may collect some popular questions or ideas into a future post - please comment below! Thanks!

Comments

Starkey

Deploying mega menu from Dev to UAT and Prod

Kudos to Heather and Dustin for these excellent blog posts.
 
Having said that how easy is this customization to move from Dev to UAT and Production environments?
 
 

Posted 02-Apr-2013 by Starkey
June

Colorful Navigation Menu

Hi Heather and Dustin,
 
I'm wondering if there is a way to display each menu item with different background color in SP2010? For example, search engines have a background color of green and time killers have blue etc.
 
Thanks
June

Posted 07-Apr-2013 by June
Darren Hemming

brilliant

Excellent guide. I wonder if the data view could use the web services to retrieve navigation items from the SharePoint global navigation instead of from a custom list. It would make the megamenu work in a dynamic collaborative context.

Posted 10-Apr-2013 by Darren Hemming
Heather Solomon

Thanks! And replies to comments...

@starkey - all of these files can easily be ported over to UAT/Prod. Also web parts can be referenced by name and not GUID, further decreasing the site dependency. @june - one way to do this would be with attribute selectors in CSS. Target an anchor by the URL. a[url*="google"] {background: red;} would only affect links that are pointing to Google.

Posted 11-Apr-2013 by Heather Solomon
Martinez

Magic Data View Builder

I'm not yet in possession of SPD because my company requires us to take a class to get "signed off" to use it and that won't be till may-ish so I can't use the DVWP but I'm wondering will the Magic DVB work in its place?

Posted 19-Apr-2013 by Martinez
JGB

Wrapping a menu item header

Thanks for the great guide!  I'm trying to wrap some wordy' menu headers in my POC based on your guide.   How would you do so in your own example?
 
Example:
 
Search Engines ->    Search
                              Engines
 
Time killers ->         Time
                              Killers
 
Thanks

Posted 02-May-2013 by JGB
BJB

My nav list is not available in SP Designer

My custom navlist and the web part page are both created at the top level site. When I add a DVWP to my page in Sharepoint Designer, my navlist is not available as an option. I can see other custom lists I created available. Why is my navlist not showing up? Is there another way I can connect to it?

Posted 06-May-2013 by BJB
User

Trouble with functionality on sub sites

The tutorial worked great for me on the top level site, but when trying to use the navigation on the sub sites the pages could not display and had an error of "list does not exist or has been deleted". I fixed that by following this remedy, http://blog.jussipalo.com/2012/01/sharepoint-list-does-not-exist-after.html But now my menu has no CSS applied to it, only on sub sites. I'm using the same Master page as the top level site and the rest of the page CSS works fine.

Posted 07-May-2013 by User
JoanneK

Awesome Post - IE10 Issues

I've just implemented this on our production SharePoint site ... is working perfect in all browsers except IE10.  Having issues with the hover - it won't always show and sporadically appears to go behind some other controls on the page.
 
Are there any issues with the IE10 hover that you're aware of?
 
Thanks again for sharing.

Posted 23-May-2013 by JoanneK
Karin Morley

Error Message

I am having trouble with the xsl.  Following you instructions, everything is great until I get to step 7. When I link to the supplied xsl file I get the following error message
 
This Web Par does not have a valid XSLT styelsheet:  Error: Invalid XML declaration.
 
Hope someone can help

Posted 25-Jun-2013 by Karin Morley
Hervé

How to do audience targeting on menu items?

Hi, I've been using this menu for years on our dotnet website. It was easy for us to hide some links from the public. Now that we're moving to SharePoint 2010, I'm wondering how you can replicate this.

Posted 13-Aug-2013 by Hervé
Derek

Adding edited code to masterpage

Hi, I must be missing something, but sure could use your help. When trying to save the master page with the edited code inserted, I receive an error. "This page contains a component that requires a different file extension to operate properly. You should rename this page with a file extension of ".aspx"." I should mention this is sharepoint 2013 and I am inserting it in the .html file and letting it update the .master file. Could this be the issue? Thanks in advance for your help.

Posted 11-Sep-2013 by Derek
Suja

Change the default font color

hi, i have applied this style for sharepoint 2013... in that list menu color does not change its showing default black... can you help me to change

Posted 12-Sep-2013 by Suja
David Woods

Applying to Sharepoint 2013

Hey there, I am trying to apply this to a SP2013 publishing site. After some effort I was able to get to the point where I add the web part to the master page, but at that point I get the "Sorry, something went wrong" error. Type 'System.Web.UI.WebControls.Parameter' does not have a public property named 'ParameterKey'. (Same for 'PropertyName'). If I remove those, I simply get "An unexpected error has occurred." Any thoughts on this would be helpful. (A SP2013 version would be even more helpful!) Thanks! David

Posted 30-Jan-2014 by David Woods
David Woods

Applying to Sharepoint 2013

Hey there, I am trying to apply this to a SP2013 publishing site. After some effort I was able to get to the point where I add the web part to the master page, but at that point I get the "Sorry, something went wrong" error. Type 'System.Web.UI.WebControls.Parameter' does not have a public property named 'ParameterKey'. (Same for 'PropertyName'). If I remove those, I simply get "An unexpected error has occurred." Any thoughts on this would be helpful. (A SP2013 version would be even more helpful!) Thanks! David

Posted 30-Jan-2014 by David Woods
Ryan

Using Managed Navigation instead of Lists?

Instead of using Lists, what would be your suggestion for using the Managed Metadata term set as a datasource? Thanks Ryan

Posted 21-Mar-2014 by Ryan
Marco Garibay

Error on step 7

Solution: http://geekswithblogs.net/naijacoder/archive/2012/04/09/149273.aspx

Posted 27-Mar-2014 by Marco Garibay

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: