Friday, 30 May 2008

Pastel color menu with dynamic submenu using CSS

Do you want to add dynamic features to your menu?

This tutorial illustrates how to design a nice pastel color menu with a dynamic submenu which appears when you select a link in the main menu, using CSS and some lines of javascript code. The result is like this:


Download the source code to reuse it in your pojects (images included).

Download source code Live Preview


Step 1: HTML Code
HTML code is very simple: you can use the flexibility of elements ul, li to design the menu / Submenu structure. I added also a green header above the menu, which you can use to add for example your site logo:

<!-- HEADER -->
<div id="top-navigation">
<!-- Something in the header here -->
</div>

<!-- Main Menu -->
<div id="navigation">
<ul id="mymenu">
<li><a href="#" onmouseover="javascript:showsubmenu(1)">Home</a></li>
<li><a href="#" onmouseover="javascript:showsubmenu(2)">Movies</a></li>
<li><a href="#" onmouseover="javascript:showsubmenu(3)">Music</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

<!-- SUB MENU -->
<div id="sublinks">
<ul id="s1">
<li><a href="#">General</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">News</a></li>
</ul>

<ul id="s2">
<li><a href="#">Drama</a></li>
<li><a href="#">Thriller</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Horror</a></li>
<li><a href="#">Colossal</a></li>
</ul>

<ul id="s3">
<li><a href="#">Rock</a></li>
<li><a href="#">Pop</a></li>
<li><a href="#">Classical</a></li>
</ul>
</div>

How you can see each link in the main menu calls a javascript function showsubmenu() which takes in input the ID of the submenu you want to display.
Each <ul> element into the layer #sublinks is a submenu related to a link in the main menu. You can identify each submenu with a progressive id, for example in this case with: S1, S2, S3...


Step 2: CSS Code
Copy and paste this code in the <head> tag of your page:

ul, li{border:0; padding:0; margin:0; list-style:none;}

/* ----------- Navigation ----------- */
#top-navigation{
background:url(img/topnav-bg.gif) repeat-x;
width:auto;
height:48px;
margin:0 auto;
}
#navigation{
background:url(img/nav-bg.gif) repeat-x;
height:32px;
margin:0 auto;
width:auto;
}
#navigation ul{
height:32px;
line-height:32px;
}
#navigation ul li{
display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
background:url(img/line-a.gif) right no-repeat;
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#4261df;
font-weight:bold;
text-shadow:#ffffff 2px 2px 2px;
}
#navigation ul li a:hover{
color:#1532a5;
}

/* ----------- Sub Menu ----------- */
#sublinks{
width:auto;
margin:0 auto;
background:#888888 url(img/sublink.gif);
height:30px;
font-size:11px;
}
#sublinks ul{
height:32px;
line-height:31px;
}
#sublinks ul li{
display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#sublinks ul li a:hover{
text-decoration:underline;
}

/* ----------- Hide Sub menu ----------- */
#s2, #s3{display:none;}

When the page is loaded for the first time I want to display by default the submenu with ID #S1. So, I have to set CSS display property for #S2 and #S3 to "none";


Step 3: Javascript Code
Now add this simple javascript function showsubmenu() to shows/hides the submenu related to the link on the main menu. This function takes in input a parameter which is the ID of the submenu you want to display (take a look at the step 1):



Copy this code in the <head> tag of your page:

<script type="text/javascript">
function showsubmenu(id){
submenu = document.getElementById('s'+id);
for(i=1;i<=3;i++){
if(i==id){
submenu.style.display="block";
} else {
document.getElementById('s'+i).style.display="none";
}
}
}
</script>

This line of code execute a for cycle from 1 to 3, where 3 is the total number of submenu you have in your HTML code (in this example #S1, #S2, #S3):

for(i=1;i<=3;i++)...


If you want to add a new link in the main menu with a new submenu related at this link, increase the condition (3) of one unit (4):

for(i=1;i<=4;i++)...


...and in the HTML code (step 1), remember to add a new ul element with ID="s4" in this way:

<ul id="s4">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>


It's all!

Download source code


Related Content
Simple CSS vertical menu Digg-like
Two CSS vertical menu with show/hide effects

Read More
Posted by at No comments:
Labels: , ,

Tuesday, 27 May 2008

Google Spreadsheets Tips: Invert word position using formulas

Are you a Google Spreadsheets users? Take a look at this tips to invert words into a string.

Ok guys, finally I have a litte bit of time to add a new post on my blog. Today I want to return to talk about Google Spreadsheets, illustrating simple tips very useful to invert automatically (using some basic formula) the order of words in a cell.


You can also use all formulas in this example in Excel.

Take a look at the spreadsheet here

Download Excel file


Step 1 - Input data
For example, image you have a column with several names (name + surname):

Jack Bauer
Christian Troy
Gregory House
Micheal Scofield
Lincoln Burrows
...

...and for some reason you need to invert the order in surname + name. You can do it manually... but in case of more then ten names could spend a lot of time to do it. A good solution is using some formulas


Step 2 - Find a criteria to separate words
What is it the criteria you can use to split single words? In this example is the space (" ") between name and surname. You have only to find the "position" of the space (" ") to have a reference to split the content in the cell. You can do it using find() formula in this way:

=find(" ";B5;1)

This forumlas return the index (position) of the space (" "), contained into the text in the cell B5, starting to the position "1".



...for the cell B5 (Jack Bauer) the space is at position 5 (index = 5).

Step 3 - Extract words
Now, in a new column you can extract the surname and in another column the name. To extract the surname you can use right() formula combined with len() formula:

=right(B5;len(B5)-C5)

...where len() formula return the lenght (number of chars) of the text contained in the cell B5.

To extract the name you can use left() forumla:

=left(B5;C5)


Step 4 - Concatenate extracted words in a new order
Finally, you can concatenate words you extracted in the order "surname and name", using concatenate() forumla:

=concatenate(D5," ",E5)

...concatenate surname (D5), a space (" ") and name (E5).

It's all!

Take a mind, you can also use the same formulas in Excel but remember only to separate formula parameters using ";" instead of ",".


Related Content
See also:

Read More
Posted by at No comments:
Labels: ,

Friday, 23 May 2008

"Woork" in progress...

Dear friends, long time is passed since my last post on this site. For all those who wrote me asking some info about my news I want to assure them: it's all ok. I am very busy with my work and it's very hard for me to mantain updated my blog.
In the past month I received a lot of e-mails from a lot of people and I couldn't reply to everyone. I'm sorry. I want to say thanks to everyone for your interest and your support.
I hope to add new post on my site as soon possible.

Best regards

Antonio


Read More
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)