User blog:Ultimate Dark Carnage/Carnage's Guide to Templates: Navboxes

Greetings fellow users, I am going to show you a tutorial on how to create a navigation box. There are many styles and methods of creating navigation boxes, but I am going to show you a few methods. If you need help creating the navigation box(es), follow the instructions below.

Method 1 - Basic
This method is the basic method of creating a navigation box. The navigation boxes do not have sub-groups.

Vertical Group Heading
This part of the tutorial shows you how to create the navigation box with vertical group headings. Here are the steps to create the navigation boxes with a vertical group heading:

Normal
This is a basic navigation box. It is one of the easiest methods in this tutorial. Here is the example of the navigation box: Note: You must not set the width of the group header to more than 30%, and the title header must have a  of 2.

Here is the result of the code:

Collapsible
This is the collapsible navigation box. It is also one of the easiest steps in the tutorial. This navigation box can collapse. Here is the example of the collapsible navigation box: Note: You must have the  in order for the table to be collapsible.

Here is the result of the code:

Horizontal Group Heading
This part of the tutorial shows you how to create a navigation bow with horizontal group headings. Here are the steps of creating a navigation box with a horizontal group heading:

Normal
This is a basic navigation box. Here is the example of the navigation box: Note: You must add a group header under the title header, and add the content cell under the group header.

Here is the result of this code:

Collapsible
This is a collapsible navigation box. Here is the example of this collapsible navigation box: Here is the result of the code:

Method 2 - Intermediate
This method is the intermediate method of creating a navigation box. The navigation boxes have sub-groups.

Vertical Groups and Sub-Groups
This part of the tutorial shows you how to create a navigation box with vertical group and sub-group headings. Here are the steps of creating the navigation box:

Normal
This is a basic navigation box with sub-groups. Here is the example of the navigation box: Note: The  attribute is recommended for use in this navigation box.

Here is the result of the code:

Collapsible
This is a collapsible navigation box with sub-groups. Here is the example of the navigation box: Here is the result of the code:

Horizontal Groups and Sub-Groups
This part of the tutorial shows you how to create a navigation box with horizontal group and sub-group headings. Here are the steps of creating the navigation box:

Normal
This is a basic navigation box with sub-groups. Here is the example of the navigation box: Note: You must use  for the sub-groups and the content cells.

Here is the result of the code:

Collapsible
This is a collapsible navigation box with sub-groups. Here is the example of the navigation box: Here is the result of the code:

Method 3 - Advanced
This is the advanced method of creating a navigation box. This navigation box has some groups without sub-groups and groups with sub-groups.

Vertical
This is the navigation box with vertical groups with or without sub-groups. Here are the steps of creating the navigation box:

Normal
This is the basic navigation box. Here is the example of the navigation box: Here is the result of the code:

Collapsible
This is the collapsible navigation box. Here is the example of the navigation box: Here is the result:

Method 4 - Expert
This part of the tutorial is the expert level method of creating a navigation box. Here are the steps of creating this navigation box:

Collapsible Sections
Here is the result of the code: {| class="mw-collapsible mw-collapsed" style="width: 100%; border: 1px solid slategray; color: teal; border-spacing: 0; border-collapse: collapse;" ! style="background: #454545; border: 1px solid #434343" | Title




 * }

Parser Functions
Here is the example of the navigation box done with parser functions: Here is the result of the code:

CSS
For people who wants to style the navigation box with CSS, this is the right section. You must have  on your table for the CSS to work. Here the CSS for the navigation box: You must insert the code to your wiki's MediaWiki:Wikia.css, and/or your MediaWiki:Common.css.

Conclusion
Some of the navigation boxes are easy, and some of them are hard. This blog is beneficial to the users who need assistance with navigation box. If you have any questions, ideas, and/or feedback, feel free to comment on this blog.

This blog is created by Ultimate Dark Carnage