Developer News: Tutorial - Build a CSS 3 Main Menu

Posted by: kaotikOn 2010/8/13 19:30:00 10104 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:relative; top:23px; left:89px;font-weight:bold; font-size:18px;}
    .mm1 a{ color:#000000}
    .mm2{position:relative; top:25px; left:65px;font-size:20px;}
    .mm2 a {color:#FFFFFF;}
    .mm3{position:relative; top:-12px; left:-39px; width:180px;font-size:20px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    }
    .mm3 a {color:#EBEBEB;}
    
    .mm4{position:relative; top:5px; left:100px; font-weight:bold;font-size:14px;}
    .mm4 a {color:#333333;}
    
    .mm5{position:relative; top:135px; left:-75px;font-size:19px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);}
    .mm5 a {color:#666666;}
    
    .mm6{position:relative; top:-40px; left:-25px; width:105px; font-weight:bold;font-size:15px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);}
    .mm6 a {color:#333333;}
    .mm7{position:relative; top:-125px; left: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 1a>li>
  <li><a href="#">submenu 1a>li>
  <li><a href="#">submenu 1a>li>
  <li><a href="#">submenu 1a>li>
ul>
div>


<div class="mm1"><a href="#">Item 1a>div>
<div class="mm2"><a href="#">Item 2a>div>
<div class="mm3"><a href="#">Item 3a>div>
<div class="mm4"><a href="#">Item 4a>div>
<div class="mm5"><a href="#">Item 5a>div>
<div class="mm6"><a href="#">Item 6a>div>
<div class="mm7"><a href="#">Item 7a>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 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:relative; top:23px; left:89px;font-weight:bold; font-size:18px;}
    .mm1 a{ color:#000000}
    .mm2{position:relative; top:25px; left:65px;font-size:20px;}
    .mm2 a {color:#FFFFFF;}
    .mm3{position:relative; top:-12px; left:-39px; width:180px;font-size:20px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    }
    .mm3 a {color:#EBEBEB;}
    
    .mm4{position:relative; top:5px; left:100px; font-weight:bold;font-size:14px;}
    .mm4 a {color:#333333;}
    
    .mm5{position:relative; top:135px; left:-75px;font-size:19px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);}
    .mm5 a {color:#666666;}
    
    .mm6{position:relative; top:-40px; left:-25px; width:105px; font-weight:bold;font-size:15px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);}
    .mm6 a {color:#333333;}
    .mm7{position:relative; top:-125px; left: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 1a>div>
<div class="mm2"><a href="#">Item 2a>div>
<div class="mm3"><a href="#">Item 3a>div>
<div class="mm4"><a href="#">Item 4a>div>
<div class="mm5"><a href="#">Item 5a>div>
<div class="mm6"><a href="#">Item 6a>div>
<div class="mm7"><a href="#">Item 7a>div>

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


<div id="content"><{$xoops_contents}>div>

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 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:relative; top:23px; left:89px;font-weight:bold; font-size:18px;}
    .mm1 a{ color:#000000}
    .mm2{position:relative; top:25px; left:65px;font-size:20px;}
    .mm2 a {color:#FFFFFF;}
    .mm3{position:relative; top:-12px; left:-39px; width:180px;font-size:20px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    }
    .mm3 a {color:#EBEBEB;}
    
    .mm4{position:relative; top:5px; left:100px; font-weight:bold;font-size:14px;}
    .mm4 a {color:#333333;}
    
    .mm5{position:relative; top:135px; left:-75px;font-size:19px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);}
    .mm5 a {color:#666666;}
    
    .mm6{position:relative; top:-40px; left:-25px; width:105px; font-weight:bold;font-size:15px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);}
    .mm6 a {color:#333333;}
    .mm7{position:relative; top:-125px; left: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 1a>li>
  <li><a href="#">submenu 2a>li>
  <li><a href="#">submenu 3a>li>
  <li><a href="#">submenu 4a>li>
ul>
div>


<div class="mm<{counter start=1}>"><a href="<{$xoops_url}>">Homea>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>

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 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:relative; top:23px; left:89px;font-weight:bold; font-size:18px;}
    .mm1 a{ color:#000000}
    .mm2{position:relative; top:25px; left:65px;font-size:20px;}
    .mm2 a {color:#FFFFFF;}
    .mm3{position:relative; top:-12px; left:-39px; width:180px;font-size:20px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    }
    .mm3 a {color:#EBEBEB;}    
    .mm4{position:relative; top:5px; left:100px; font-weight:bold;font-size:14px;}
    .mm4 a {color:#333333;}
    .mm5{position:relative; top:135px; left:-75px;font-size:19px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);}
    .mm5 a {color:#666666;}
    .mm6{position:relative; top:-40px; left:-25px; width:105px; font-weight:bold;font-size:15px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);}
    .mm6 a {color:#333333;}
    .mm7{position:relative; top:-125px; left: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}>">Homea>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>

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: http://www.yoursite.com/admin.php or to login: http://www.yoursite.com/user.php Your end result should be similar to image 4.
Resized Image