Archive for Mei 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:
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:
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:
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):
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):
...and in the HTML code (step 1), remember to add a new ul element with ID="s4" in this way:
It's all!
Download source code
Related Content
Simple CSS vertical menu Digg-like
Two CSS vertical menu with show/hide effects
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 PreviewStep 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">
</div>
<!-- SUB MENU -->
<div id="sublinks">
<ul id="s3">
</div>
<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><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>
</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><li><a href="#">Information</a></li>
<li><a href="#">News</a></li>
<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><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 id="s3">
<li><a href="#">Rock</a></li>
<li><a href="#">Pop</a></li>
<li><a href="#">Classical</a></li>
</ul><li><a href="#">Pop</a></li>
<li><a href="#">Classical</a></li>
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;}
/* ----------- 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>
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><li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
It's all!
Download source codeRelated Content
Simple CSS vertical menu Digg-like
Two CSS vertical menu with show/hide effects
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
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 fileStep 1 - Input data
For example, image you have a column with several names (name + surname):
...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:
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:
...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:
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 surname (D5), a space (" ") and name (E5).
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 ",".
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:
- Google Spreadsheets: formulas tutorial
- Gantt Chart with EditGrid online spreadsheets
- Implement a Project Plan and manage activities with Google Spreadsheets
- Project Management: a project plan with Excel (template)
- Gantt Chart using Google Spreadsheets and conditional formatting
- Project Management: Excel Gantt Chart Template
Tag :
google,
spreadsheets
"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
Tag :
news
