A vertical collapsible, expandable menu is a great way to organize a large site and create a much more user friendly experience. A navigation menu is probably one of the most critical pieces in web design. So making your navigation subcats easy to find and all in one location can be a great way to help your user’s find things on your website.

In this article I show by example a vertical collapsible, expandable menu which is extremely easy to implement and can be great for organizing large navigation systems.

Start by organizing your menu subcats into categories and subcategories.

Menu Example

Click on the links below to expand and collapse the categories.

• Category 1
  • subcat 1a
  • subcat 1b
  • subcat 1c
  • subcat 1d
• Category 2
  • subcat 2a
  • subcat 2b
  • subcat 2c
  • subcat 2d
• Category 3
  • subcat 3a
  • subcat 3b
  • subcat 3c
  • subcat 3d
• Category 4
  • subcat 4a
  • subcat 4b
  • subcat 4c
  • subcat 4d
• Category 5
  • subcat 5a
  • subcat 5b
  • subcat 5c
  • subcat 5d

The first thing you’ll need is the Javascript code which collapses and expands the menu.

var myvar;
function menuinit() {
document.getElementById(‘m1′).style.display = ‘none’;
document.getElementById(‘m2′).style.display = ‘none’;
document.getElementById(‘m3′).style.display = ‘none’;
document.getElementById(‘m4′).style.display = ‘none’;
document.getElementById(‘m5′).style.display = ‘none’;

}
function menuexpand (i) {
menuinit();
if (myvar == i) {
document.getElementById(i).style.display = ‘none’;
myvar = ”;
}
else {
document.getElementById(i).style.display = ‘block’;
myvar = i;
}
}

if ( typeof window.addEventListener != “undefined” )
window.addEventListener( “load”, menuinit, false );
else if ( typeof window.attachEvent != “undefined” ) {
window.attachEvent( “onload”, menuinit );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
menuinit();
};
}
else
window.onload = init;
}

To add additional categories to this you’ll need to add to the Javascript as well. For example to add a sixth category to this menu, simply add the following line of code to the end of the menuinit() function.

document.getElementById(‘m5′).style.display = ‘none’;

You can add as many extra categories as you need this way.

The HTML code

<ul id=”nav”>
<li> <a id=”pm1″ onclick=”menuexpand(‘m1′);return false;” href=”#”>Category 1</a>
<ul id=”m1″>
<li><a href=”#”>subcat 1a</a></li>
<li><a href=”#”>subcat 1b</a></li>
<li><a href=”#”>subcat 1c</a></li>
<li><a href=”#”>subcat 1d</a></li>
</ul>
</li>
<li> <a id=”pm2″ onclick=”menuexpand(‘m2′);return false;” href=”#”>Category 2</a>
<ul id=”m2″>
<li><a href=”#”>subcat 2a</a></li>
<li><a href=”#”>subcat 2b</a></li>
<li><a href=”#”>subcat 2c</a></li>
<li><a href=”#”>subcat 2d</a></li>
</ul>
</li>
<li> <a id=”pm3″ onclick=”menuexpand(‘m3′);return false;” href=”#”>Category 3</a>
<ul id=”m3″>
<li><a href=”#”>subcat 3a</a></li>
<li><a href=”#”>subcat 3b</a></li>
<li><a href=”#”>subcat 3c</a></li>
<li><a href=”#”>subcat 3d</a></li>
</ul>
</li>
<li> <a id=”pm4″ onclick=”menuexpand(‘m4′);return false;” href=”#”>Category 4</a>
<ul id=”m4″>
<li><a href=”#”>subcat 4a</a></li>
<li><a href=”#”>subcat 4b</a></li>
<li><a href=”#”>subcat 4c</a></li>
<li><a href=”#”>subcat 4d</a></li>
</ul>
</li>
<li> <a id=”pm5″ onclick=”menuexpand(‘m5′);return false;” href=”#”>Category 5</a>
<ul id=”m5″>
<li><a href=”#”>subcat 5a</a></li>
<li><a href=”#”>subcat 5b</a></li>
<li><a href=”#”>subcat 5c</a></li>
<li><a href=”#”>subcat 5d</a></li>
</ul>
</li>
</ul>

Download the files

The CSS File
The Javascript File

The Robots Meta Tag is used mainly when you don’t want search engine spiders to index a webpage or to follow the links on a webpage. Another way to control this is through a robots.txt file. But here I’ll just discuss the Robots Meta Tag.

When a webpage is indexed in search engines it means that the page is in the Search Engines database. So when someone searches for keywords related to your indexed page, your page will show up in the Search Engine Results page. The follow directive tells the Search Engine to follow the links on that page as well.

The default behavior if this tag is not specified is for the search engines to index the webpage and to follow the links as well. So it’s not necessary and not recommended to add the below code to a page if you want it indexed and followed.

<meta name=”robots” content=”index,follow”>

If you want a webpage indexed but don’t want the links on that page to be followed then you’d use the directive below. Generally if you have an outgoing link but don’t trust the link, then it’s wise to use the nofollow. To specify the nofollow for an entire page, use the Robots Meta Tag below. This would apply to all links on the page.

<meta name=”robots” content=”index,nofollow”>

If you want specific links not to be followed, not all links on the page, then you wouldn’t use the above directive. Instead You can specify nofollow per link using the below link link tag example.

<a href=”contact-us.html” rel=”nofollow”>Contact Us</a>

Most websites contain pages that we want the search engines to index so that internet surfers may find them when looking for information on our website. But there are times when you don’t want a page indexed.

For example you may create a website just to share family photos not with everyone on the internet but just with family and friends. Another example is when you create websites for your customers that you share only with customers and not with the public. In these cases it’s a good idea to add the Meta Robots Tags directive for noindex and nofollow like the example below.

<meta name=”robots” content=”noindex,nofollow”>

Then there are cases where you don’t want a page to be indexed but you want the links to be followed. Good pages to do this on are utilities pages, like contact us, privacy policy, and terms of use pages. Use the below directive in these cases.

<meta name=”robots” content=”noindex,follow”>

Here are some examples of sticky note like CSS boxes you can add to your website. You can use them for quotes, for special ads, for sign up forms, free giveaways, etc. They can be used for anything you feel like needs to be highlighted in some way. They look pretty cool and grab some attention.

Each CSS floating box includes the CSS code and HTML code you can use. Just copy and paste it to your documents.

This is a cool looking sticky note css box and I can use this to place a special ad etc with some light weight code and no images. This has no borders or shadows and is just a plain jane box.

The CSS Code

.plane-sticky { padding: 10px; background: #FDFB8C; width: 200px; height: 200px; }

The HTML code

<div id=”plain-sticky”>The text inside the box goes here</div>

This CSS floating box has the text formatted a little like handwriting. It looks more like a sticky note in this case. You can add any text in this area.

The CSS Code

.sticky-handwriting {
padding: 10px;
background: #E57895;
position: relative;
bottom: 5px;
right: 5px;
width: 200px;
height: 200px;
font-family:’Brush Script MT’,Phyllis,’Lucida Handwriting’,cursive;
font-size: 26px;
color: blue;
line-height: 1em;
}

The HTML Code

<div id=”sticky-handwriting”>The text inside the box goes here</div>

This CSS box is similar to the above but has a border arount it.

The CSS Code

.bordered-sticky {
border: 2px solid #363636;
padding: 10px;
background: #2f9be4;
position: relative;
bottom: 5px;
right: 5px;
width: 200px;
height: 200px;
font-family:’Brush Script MT’,Phyllis,’Lucida Handwriting’,cursive;
font-size: 26px;
color: #363636;
line-height: 1.1em;
margin-left: 10px;
}

The HTML Code:

<div id=”bordered-sticky”>The text inside the box goes here</div>

This CSS box has a little more detail. it has a border around it and a shadow behind it.

The CSS Code

.sticky-shadow {
width: 220px;
height: 220px;
background-color: #3f3b3b;
color: inherit;
margin-left:10px;
margin-top: 5px;
}

.bordered-sticky {
border: 1px solid #3A7197;
padding: 10px;
background: #fdfb8c none repeat scroll 0% 0%;
position: relative;
bottom: 5px;
right: 15px;
width: 200px;
height: 200px;
font-family:’Brush Script MT’,Phyllis,’Lucida Handwriting’;
font-size: 26px;
color: #3A7197;
line-height: 1.1em;
margin-left: 10px;
text-align: center;
}

The HTML Code:

<div id=”shadow”><div id=”bordered-sticky”>The text inside the box goes here</div>
</div>

Do you want to know how to increase website traffic? If you are a website owner then chances are this is always a priority and something you can almost always improve on.

You can never have too much traffic. After all, what good is it to have a website if nobody ever sees it? There are several proven ways to get more people to look at your pages.

Some traffic building methods are totally free, other than the time involved, and some require a little cash investment and some quite a bit. Regardless of anything else, the most important factor in attracting more visitors will be to give them something of value to look at.

You must have interesting, quality content on your site. Having great content gives people a reason to return again and to refer the site to others. Information should be offered that is helpful and useful. People only visit any particular place on the web because they want to find news, solve a problem or to be entertained.

Creating good content should always be the first priority. It should also be updated as frequently as possible to keep it fresh in order to develop a following of return visitors.

If you are not comfortable with writing your own ad copy, consider outsourcing the work. Find a friend or colleague with writing talent who might want to contribute articles. There are many dependable Internet sources that will write original content for a nominal fee.

Never copy material from another website for your own use and always be original. The major search engines are very sophisticated these days and will spot duplicate content immediately, sending you to the bottom of the engine listings. No matter what other forms of promotion you may use, you will still want to get in on the action that comes from search engines. This is where most people will look first for information.

Improve your search engine ranking through the use of keywords in your content. This is what is known as SEO, or search engine optimization. For example, if you sell dog food, be sure that those words appear in your page titles, first paragraphs and throughout all your articles, without over doing it.

Use words that people commonly think of when they want your product. Saying, “Gourmet canine cuisine” may be clever, but it will not be the first thing people will search for.

Another very important strategy to increase your traffic is the use of back links. These are links on other websites that link to yours. Using the previous example, if you are able to get a link on a site that sells dog collars or other related accessories, people will find you there.

Just as important, search engines rate sites on popularity and this will get you noticed and can bring you closer to the top of the list. Naturally, the best way to get others to link to your site is to offer to link to theirs.

Another way to get traffic and valuable back linking is through article marketing. This is where you place relevant articles on the various directories about what it is that you do.

When these are read, the reader will have the option to click on your main page for more details. This not only creates instant traffic, but also helps boost your engine rankings.

Finally, if you have a budget, consider buying advertising. The first listings you see when you do a search are not always there because they are the best. They paid for that position. The most popular programs are known as pay per click.

Companies like Yahoo, Google and others will give you better placement, for a fee. When you have someone click on your listing, you are charged a certain amount. This absolutely demands having good content, since you pay every time someone looks.

Just when you begin to feel comfortable with HTML and really get to grips with website design along comes CSS. But don’t fear, if you could learn HTML, then CSS will be easier.

One of the main problems web developers face, is the number of different browsers that are likely to be used to read their website. Just when you get the site to work fine with Firefox, IE or some version of IE has a problem with it.

All browsers tend to render or interpret the HTML code slightly differently. So they all read the words correctly but the story doesn’t always come out the same.

This is where CSS or Cascading Style Sheets come into the picture. CSS is a programming language that specifically addresses the interpretation of the base HTML code. So, in essence, the HTML coding tells the browser what the web page consists of and where to find it and the CSS code tells the browser how to display it on the viewers monitor.

Occasionally your browser may read the HTML before it reads the CSS and then you have the cases where you get a momentary flash of un-configured text before the page loads correctly.

I’m sure most people who surf the net regularly have experienced this and it is one of the best examples of CSS at work. Another good example of this is when you open sites that are garbled with overlapping text and graphics that are clearly not what the author wanted as an end result. This happens when the CSS block is missing or corrupted.

This also happens when you open sites with a browser that does not support CSS such as those sometimes found on mobile phones. For this reason web developers need to think pro-actively when they design so that, in the event of the site being opened by a non-CSS enabled application, the content will at least make sense.

CSS is also particularly powerful when it comes to configuring content for different output protocols such as on screen, print or even speech and Braille browsers for impaired users. The code also tends to make for slicker, less complex site structures with minimal code repetition.

CSS coding syntax is also pretty simple by comparison and consists of 3 basic parts that are generally laid out in this way
selector { property: value}

Let’s break that down a bit more. The selector indicates the actual HTML item you wish to address for example the header of your page. The property part of the code indicates the exact property of the element that you wish to specify e.g. The font. The last part or value indicator tells the browser which property will be applied for example Arial.

The completed code would look something like this
h1 {font-family:arial)

The browser would read this as header one needs to have its font set to Arial. Nice and simple. You can also combine multiple properties and values.

h1 {font-family:arial;background:#eeeeee}
So the above would mean header one is Arial font as in the previous example but the second property, separated by a semi-colon, means that the background colour is grey.

This may all seem a little complex at first but how to use CSS is very simple once you get used to it and the language is a critical tool for ensuring the cross browser compatibility that allows us to view sites accurately and as their authors intended.

And it makes for much cleaner and organized HTML code, with all the styling code out of the way and in one place. This separation of style and content is more maintainable and also much more flexible.

If you’re creating a website, you may want to Know how to learn HTML, you might be surprised at just how easy it is to achieve this. Not only are there many different resources available online, there are also plenty of how-to books, tutorials, as well as online or on-sight classes that you can attend if you want to have a more structured and detailed setting.

In short, HTML stands for Hyper Text Markup Language. It’s a language designed to create webpages. However, in regards to webpages, HTML allows for the creation of document-type structure by denoting structural semantics for text. This allows for things such as headings, paragraphs, lists, links, quotes, as well as other items.

HTML enables you to embed things such as images and other objects like videos or third party interactive tools etc. HTML elements in the general form in which the language is written. This language consists of what are called tags, surrounded by angled brackets, within a webpage’s contents. It is this format that helps write scripts, which in turn runs the page itself, factoring in appearance, layout and more when in regards to overall design and performance.

However it is more common now a days and much more practical to use CSS to separate the style or layout of the page from the content, so HTML styling elements are no longer considered good practice.

You can learn HTML online through how to articles and sample code etc. One of the best resources is w3.org. Practice creating a simple HTML document and learn only as you need to do specific things for your website for example. In time you’ll find that you will start to feel like you have a pretty good grasp.

No matter what learning path you choose in how to learn HTML, it is generally a good rule of thumb to focus one step at a time and start with the basics and take it from there. Many tend to rush, winding up more confused than is necessary, although there are plenty of resources available where you can practice coding.