Horizontal CSS 3D Menu For Websites – 3D WordPress Categories Menu

3D Navigation Menu usually uses images to get the 3d effect. But more the number of images in your page more time it will take to load. Today we will discuss how to create a 3D menu using just CSS. The Menu items can be anything. You can use this CSS for creating 3D menus for your website or blog. In this article we will see how to display 3D menu items using simple HTML.  Also we will see How do we create a horizontal menu based on your wordpress blog categories.

Horizontal3D Menu CSS for your Website or blog

Creating a 3d menu using just CSS styles for your website or blog is easy. The menu will appear as below.
Follow the steps given below.

Create a CSS file

Create a CSS file and copy and paste the below code in it. You can give any name to the file but the extension should be .css. (for example 3dmenu.css).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#3dmenu
{
background: #3300CC;
border-bottom: 1px solid #17a;
width: 850px;
font-family: Helvetica Neue,Arial,Helvetica,sans-serif;
font-size:	12px;
font-weight:	700;
line-height:	30px;
padding: 0px 3px 0px 8px;
}
#3dmenu li
{
list-style: none;
display: inline;
list-style-type: none;
padding: 0px 3px 0px 3px;
}
#3dmenu a
{
text-decoration: none;
margin-bottom: 1px;
margin-top: 1px;
color: white;
background: #5577AA;
border-width: 1px;
border-style: solid;
border-color:  #55BBDD #003355 #006688 #4A98D7;
border-left: 3px solid #5bd;
padding: 1px 3px 3px 2px;
}
 
#3dmenu a:hover
{
background: #28b;
font-weight:	700;
border-color: #069 #6cf #5bd #4A98ff;
padding: 1px 3px 3px 2px;
}

Now include the CSS  file in your web page. For example if you want the 3d menu to appear on home page, add the following to the home page between section.
Replace “path_to_your_css_file” with the CSS location.
You you can add the links to your page where you want the menu to appear. See example below

1
2
3
4
5
6
7
8
9
10

<div>
<ul id="3dmenu">
	<li><a href="http://www.globinch.com">Home</a></li>
	<li><a href="BrowserTips.html">Browser Tips</a></li>
	<li><a href="Blogging.html">Blogging</a></li>
	<li><a href="SEOGuide.html">SEO Guide</a></li>
	<li><a href="WebsiteOptimization.html">Website Optimization</a></li>
	<li><a href="WordpressTips.html">Wordpress Tips</a></li>
</ul>
</div>

Horizontal 3D Menu for WordPress Blog Categories

If you maintain a wordpress blog, then you can ad the 3d menu to your header template easily. You can create a horizontal CSS menu based on your pages or categories. Your blog categories will appear as a 3D horizontal menu. To achieve this you can use the same CSS given above. You can either add the CSS style classes to your themes CSS file or you can create a new css file and include that file in header.php. Now follow the below steps.
1. Identify where you want to display the horizontal 3d CSS menu.
2. add the following lines of code in the file. usually in header.php.

1
2
3

<ul id="3dmenu"> 
wp_list_categories('number=10&amp;orderby=name&amp;hide_empty=1&amp;title_li=');
</ul>

In the above code “number=10″ is to display only the first 10 categories order by name. The empty categories will not be displayed. Also note that we have applied our 3D style to the <ul> element.
For example the above will display the categories of Globinch.com as below.