Developer News: Tutorial - Build a CSS 3 Main Menu

Posted by: kaotikon 2010/8/13 19:30:00 8981 reads Learn how to create a cool main menu using css 3 features.

History
I'm a big fan of industrial design from the 50/60's and this tutorial was inspired on a poster I saw from that time.


Step 1 Creating the background
Open your favorite image program a create a png file similar to image 2. It's size should be 310px x 175px. Size is important because we will be using coordinates to place our menu items.
Resized Image image 2



Step 2 blank html
Create a folder in your web server, name your background image "back_mm_opt.png" and place it inside this folder. Now create a blank html file called "mainmenu.html" (in same folder) and place the folowing code in it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
style type="text/css">
#artdecoMM{
width:310px;
height:175px;
}
</
style>
</
head>

<
body>

<
div id="artdecoMM" style="background-image:url(back_mm_opt.png)">
test
</div>

</
body>
</
html>


This is the base for our project. We will create 7 menu items. This means you will be able to install up to 7 modules and they will appear correctly. You can later adapt this for as many items as you like.


Step 3 Menu items
Open mainmenu.html and replace all code with this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
style type="text/css">
#artdecoMM{
font-family:arial;
width:310px;
height:175px;
}
#artdecoMM a {text-decoration:none;}
#artdecoMM a:hover{ color:#FF0000;}

    
.mm1 {position:relativetop:23pxleft:89px;font-weight:boldfont-size:18px;}
    .
mm1 acolor:#000000}
    
.mm2{position:relativetop:25pxleft:65px;font-size:20px;}
    .
mm2 a {color:#FFFFFF;}
    
.mm3{position:relativetop:-12pxleft:-39pxwidth:180px;font-size:20px;
    -
webkit-transformrotate(-90deg);
    -
moz-transformrotate(-90deg);
    }
    .
mm3 a {color:#EBEBEB;}
    
    
.mm4{position:relativetop:5pxleft:100pxfont-weight:bold;font-size:14px;}
    .
mm4 a {color:#333333;}
    
    
.mm5{position:relativetop:135pxleft:-75px;font-size:19px;
    -
webkit-transformrotate(90deg);
    -
moz-transformrotate(90deg);}
    .
mm5 a {color:#666666;}
    
    
.mm6{position:relativetop:-40pxleft:-25pxwidth:105pxfont-weight:bold;font-size:15px;
    -
webkit-transformrotate(-90deg);
    -
moz-transformrotate(-90deg);}
    .
mm6 a {color:#333333;}
    
.mm7{position:relativetop:-125pxleft:70px;font-size:15px;}
    .
mm7 a {color:#666666;}
    
    #submenu{position:relative; float:right; font-size:10px; color:#006600; right:140px; top:100px;}
    #submenu a{ color:#006600;}
</style>
</
head>

<
body>
<
div id="artdecoMM" style="background-image:url(back_mm_opt.png)">

<
div id="submenu">
<
ul>
  <
li><a href="#">submenu 1</a></li>
  <
li><a href="#">submenu 1</a></li>
  <
li><a href="#">submenu 1</a></li>
  <
li><a href="#">submenu 1</a></li>
</
ul>
</
div>


<
div class="mm1"><a href="#">Item 1</a></div>
<
div class="mm2"><a href="#">Item 2</a></div>
<
div class="mm3"><a href="#">Item 3</a></div>
<
div class="mm4"><a href="#">Item 4</a></div>
<
div class="mm5"><a href="#">Item 5</a></div>
<
div class="mm6"><a href="#">Item 6</a></div>
<
div class="mm7"><a href="#">Item 7</a></div>
</
div>

</
body>
</
html>


Run mainmenu.html, it should look like image2. What we have done is place all our menu items and correctly position them.
Resized Image
They are all relativly placed inside the div.
Now let's transform this into a xoops theme.

Creating a xoops theme
Make a copy of xoops default theme and name it "kdesign". I've provided a zipped version here. Go to preferences and set kdesign as the default theme.

Now open /kdesign/theme.html and replace everything with this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<
head>
    <!-- 
Assign Theme name -->
    <{
assign var=theme_name value=$xoTheme->folderName}>
<
style type="text/css">
#artdecoMM{
font-family:arial;
width:310px;
height:175px;
}
#artdecoMM a {text-decoration:none;}
#artdecoMM a:hover{ color:#FF0000;}

    
.mm1 {position:relativetop:23pxleft:89px;font-weight:boldfont-size:18px;}
    .
mm1 acolor:#000000}
    
.mm2{position:relativetop:25pxleft:65px;font-size:20px;}
    .
mm2 a {color:#FFFFFF;}
    
.mm3{position:relativetop:-12pxleft:-39pxwidth:180px;font-size:20px;
    -
webkit-transformrotate(-90deg);
    -
moz-transformrotate(-90deg);
    }
    .
mm3 a {color:#EBEBEB;}
    
    
.mm4{position:relativetop:5pxleft:100pxfont-weight:bold;font-size:14px;}
    .
mm4 a {color:#333333;}
    
    
.mm5{position:relativetop:135pxleft:-75px;font-size:19px;
    -
webkit-transformrotate(90deg);
    -
moz-transformrotate(90deg);}
    .
mm5 a {color:#666666;}
    
    
.mm6{position:relativetop:-40pxleft:-25pxwidth:105pxfont-weight:bold;font-size:15px;
    -
webkit-transformrotate(-90deg);
    -
moz-transformrotate(-90deg);}
    .
mm6 a {color:#333333;}
    
.mm7{position:relativetop:-125pxleft:70px;font-size:15px;}
    .
mm7 a {color:#666666;}
    
    #submenu{position:relative; float:right; font-size:10px; color:#006600; right:140px; top:100px;}
    #submenu a{ color:#006600;}
</style>
</
head>
<
body id="<{$xoops_dirname}>" class="<{$xoops_langcode}>">
<
div id="artdecoMM" style="background-image:url(<{xoImgUrl back_mm_opt.png}>)">
<
div class="mm1"><a href="#">Item 1</a></div>
<
div class="mm2"><a href="#">Item 2</a></div>
<
div class="mm3"><a href="#">Item 3</a></div>
<
div class="mm4"><a href="#">Item 4</a></div>
<
div class="mm5"><a href="#">Item 5</a></div>
<
div class="mm6"><a href="#">Item 6</a></div>
<
div class="mm7"><a href="#">Item 7</a></div>

<
div id="submenu">
<
ul>
  <
li><a href="#">submenu 1</a></li>
  <
li><a href="#">submenu 2</a></li>
  <
li><a href="#">submenu 3</a></li>
  <
li><a href="#">submenu 4</a></li>
</
ul>
</
div>
</
div>


<
div id="content"><{$xoops_contents}></div>
<!--{
xo-logger-output}-->
</
body>
</
html>


I'm using this theme only to test my main menu code, as such I've stripped everything else out of this theme. Now reload the theme. You should have something similar to image 3.
Resized Image

Step 4 Using Module Names
The next step is to use actual xoops modules. Open kdesign/theme.html and replace all code with this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<
head>
    <!-- 
Assign Theme name -->
    <{
assign var=theme_name value=$xoTheme->folderName}>
<
style type="text/css">
#artdecoMM{
font-family:arial;
width:310px;
height:175px;
}
#artdecoMM a {text-decoration:none;}
#artdecoMM a:hover{ color:#FF0000;}

    
.mm1 {position:relativetop:23pxleft:89px;font-weight:boldfont-size:18px;}
    .
mm1 acolor:#000000}
    
.mm2{position:relativetop:25pxleft:65px;font-size:20px;}
    .
mm2 a {color:#FFFFFF;}
    
.mm3{position:relativetop:-12pxleft:-39pxwidth:180px;font-size:20px;
    -
webkit-transformrotate(-90deg);
    -
moz-transformrotate(-90deg);
    }
    .
mm3 a {color:#EBEBEB;}
    
    
.mm4{position:relativetop:5pxleft:100pxfont-weight:bold;font-size:14px;}
    .
mm4 a {color:#333333;}
    
    
.mm5{position:relativetop:135pxleft:-75px;font-size:19px;
    -
webkit-transformrotate(90deg);
    -
moz-transformrotate(90deg);}
    .
mm5 a {color:#666666;}
    
    
.mm6{position:relativetop:-40pxleft:-25pxwidth:105pxfont-weight:bold;font-size:15px;
    -
webkit-transformrotate(-90deg);
    -
moz-transformrotate(-90deg);}
    .
mm6 a {color:#333333;}
    
.mm7{position:relativetop:-125pxleft:70px;font-size:15px;}
    .
mm7 a {color:#666666;}
    
    #submenu{position:relative; float:right; font-size:10px; color:#006600; right:140px; top:100px;}
    #submenu a{ color:#006600;}
</style>
</
head>
<
body id="<{$xoops_dirname}>" class="<{$xoops_langcode}>">

<
div id="artdecoMM" style="background-image:url(<{xoImgUrl back_mm_opt.png}>)">
<
div id="submenu">
<
ul>
  <
li><a href="#">submenu 1</a></li>
  <
li><a href="#">submenu 2</a></li>
  <
li><a href="#">submenu 3</a></li>
  <
li><a href="#">submenu 4</a></li>
</
ul>
</
div>


<
div class="mm<{counter start=1}>"><a href="<{$xoops_url}>">Home</a></div>
<{foreach 
item=module from=$block.modules}>
<
div class="mm<{counter}>"><a href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}></a></div>
<{/foreach}>
</
div>


<
div id="content"><{$xoops_contents}></div>
<!--{
xo-logger-output}-->
</
body>
</
html>


You might have to tweak positions to better fit the design. Language and capital letters are all factores in the placement of each item.

Step 5 - Submenu
Now let's populate the submenu. Open kdesign/theme.html and replace all code with this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<
head>
    <!-- 
Assign Theme name -->
    <{
assign var=theme_name value=$xoTheme->folderName}>
<
style type="text/css">
#artdecoMM{
font-family:arial;
width:310px;
height:175px;
}
#artdecoMM a {text-decoration:none;}
#artdecoMM a:hover{ color:#FF0000;}

    
.mm1 {position:relativetop:23pxleft:89px;font-weight:boldfont-size:18px;}
    .
mm1 acolor:#000000}
    
.mm2{position:relativetop:25pxleft:65px;font-size:20px;}
    .
mm2 a {color:#FFFFFF;}
    
.mm3{position:relativetop:-12pxleft:-39pxwidth:180px;font-size:20px;
    -
webkit-transformrotate(-90deg);
    -
moz-transformrotate(-90deg);
    }
    .
mm3 a {color:#EBEBEB;}    
    
.mm4{position:relativetop:5pxleft:100pxfont-weight:bold;font-size:14px;}
    .
mm4 a {color:#333333;}
    
.mm5{position:relativetop:135pxleft:-75px;font-size:19px;
    -
webkit-transformrotate(90deg);
    -
moz-transformrotate(90deg);}
    .
mm5 a {color:#666666;}
    
.mm6{position:relativetop:-40pxleft:-25pxwidth:105pxfont-weight:bold;font-size:15px;
    -
webkit-transformrotate(-90deg);
    -
moz-transformrotate(-90deg);}
    .
mm6 a {color:#333333;}
    
.mm7{position:relativetop:-125pxleft:70px;font-size:15px;}
    .
mm7 a {color:#666666;}
    #submenu{position:relative; float:right; font-size:10px; color:#006600; right:140px; top:100px;}
    #submenu a{ color:#006600;}
</style>

</
head>
<
body id="<{$xoops_dirname}>" class="<{$xoops_langcode}>">


<
div id="artdecoMM" style="background-image:url(<{xoImgUrl back_mm_opt.png}>)">
<
div id="submenu">
<
ul>
<{foreach 
item=submenu from=$module.sublinks}>
<
li><a href="<{$submenu.url}>"><{$submenu.name}></a></li>
<{/foreach}>
</
ul>
</
div>


<
div class="mm<{counter start=1}>"><a href="<{$xoops_url}>">Home</a></div>
<{foreach 
item=module from=$block.modules}>
<
div class="mm<{counter}>"><a href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}></a></div>
<{/foreach}>
</
div>

<
div id="content"><{$xoops_contents}></div>
<!--{
xo-logger-output}-->
</
body>
</
html>


As you may notice I'm only using existing smarty variables to do all this. If you set your debug mode to smarty, you will see a lot information is provided to help you with your modules and templates. If you want to go back to your admin, just type the url: www.yoursite.com/admin.php or to login: www.yoursite.com/user.php Your end result should be similar to image 4.
Resized Image