There are lot of tutorial for menu design in web but all are so complex. After searching for the appropriate tutorial of Css Menu design
for beginners I started myself to write Css Menu design for beginners.
On a web page, the navigation can be taken as a table of content.
In HTML, table of content can be represent by the <ol> element. ol stands for ordered list.
The code to making a simple ordered list:
<ol >
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ol>
The above code will result:
1. Chapter 1
2. Chapter 2
3. Chapter 3
If we want to link an item the Table of content will look like below:
<ol id="menu">
<li class="current"><a href="chapter1.html">Chapter 1</li>
<li><a href="chapter2.html">Chapter 2</li>
<li><a href="chapter3.html">Chapter 3</li>
</ol>
The HTML above shows that we want an ordered list of chapters that contain links to other sections of a site.
We can see that a couple of the elements above have some attributes set. The attributes the class and id.
The class attribute should be considered as metadata for the element it is applied to. For example, one of the list chapter has the class=" current".
This means us that one chapter is currently selected. The id attribute uniquely identifies a particular element.
The content
Content is generally made up of one or more headers, some paragraphs with text and every now and then some other stuff such as images, lists, quotes etc.
We'll want to encapsulate the content so that we can put other things outside it without having trouble identifying it later on.
A <div> (division, section) element is good for this, because it's sole purpose is to hold a collection of elements.
We'll give it an identifying class, because there might be other <div> elements on the page:
<div class="content">
<h2>Page 1</h2>
<p>Text...</p>
</div>
Now we put together the Table of content and content :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
For the file to validate, it needs a document type. The document type specifies what rules the document must follow for it to be valid. I usually go with XHTML 1.0 Strict,
but there are other document types that are more... forgiving. I won't be covering them in this tutorial.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Homepage</title>
<link href="tabs.css" rel="stylesheet" type="text/css" />
</head>
The <meta> tag holds metadata about the document. In this particular case, it holds the character encoding of the page, so that the browser doesn't have to guess.
The <link> element is used for linking to external resources, in this case a stylesheet. We'll be making the stylesheet.
<body>
<h1>My Frist Menu Design</h1>
<ol id="menu">
<li class="current"><a href="chapter1.html">Chapter 1</li>
<li><a href="chapter2.html">Chapter 2</li>
<li><a href="chapter3.html">Chapter 3</li>
</ol>
<div class="content">
<h2>Page 1</h2>
<p>Text...</p>
</div>
</body>
</html>
That's right, we'll only be dealing with one image. It doesn't matter if we have five different states for the tab, it can all be done with one image. I'll start by answering the obvious question: Why?
Splitting the image into pieces left, middle and right requires six separate images for two states. If we were to add another state, for example a hover effect, the number of images required would increase to nine. Other than extra file management and more work when editing the images, what does this mean?
Each image has a header section. The filesize of six small images would be about twice as big as the filesize of one big image.
Each image requires its own HTTP request. This wastes both bandwidth and server processing time.
Due to the images being requested separately this also means that the page will take longer to load, especially if the user's browser downloads the files one by one.
There is no way to apply the method I'm going to describe using three images for one tab, since each tab consists of only two elements (<li> and <a>) and only one background image can be applied to an element.
Hopefully I've convinced you that putting everything into one image is much better than using several images. Moving on...
Each state will take up one row of the image and will be 500 pixels wide. The idea is that the left side of the tab will be drawn in one element, then the rest will be drawn on top of it in a child element. I will explain how in the next step. Each row is 60 pixels high. This will allow the tab to be up to 60 pixels high, but it can be smaller.
Now, you might be worried. Worried about the "500 pixel" bit of my previous paragraph. Don't be, though. We will be saving this rather big image as a GIF image, which in my case took it down to just a couple of kilobytes. If you know that you will never have tabs even close to 500 pixels wide, you can of course shrink it. Even 200 pixels might be enough. But thanks to compression, the difference probably won't be more than a few bytes.
<img alt="" src="http://blixt.org/media/a/1/tabs-hover/tabs.gif" />
Save this image where you saved chapter<code>1.html</code>, or make your own image. Name it <code>tabs.gif</code>.
<br />
<h4>
The tabs</h4>
The first thing we'll do is to style the ordered list that represents our Table Of Content (<code><ol id="menu"></code>):
<br />
<pre>ol#menu {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}</pre>
<pre></pre>
<pre>Stle of Default State of each Chapter:</pre>
<pre>ol#menu li {
background: #bdf url(tabs.gif);
float: left;
margin: 0 1px 0 0;
padding-left: 10px;
}</pre>
<pre>Style for the link:</pre>
<pre>ol#menu a {
background: url(tabs.gif) 100% 0;
color: #008;
float: left;
line-height: 2em;
padding-right: 10px;
text-decoration: none;
}</pre>
<pre> Style for the current :</pre>
<pre>ol#menu li.current {
background-color: #48f;
background-position: 0 -60px;
}</pre>
<pre>Style for the current menu link</pre>
<pre>ol#menu li.current a {
background-position: 100% -60px;
color: #fff;
font-weight: bold;</pre>
<pre>}</pre>
<pre>Style for The content :</pre>
<pre>div.content {
border: #48f solid 3px;
clear: left;
padding: 1em;
}</pre>
<pre></pre>
<pre>All are together will look like this:</pre>
<pre>ol#menu {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ol#menu li {
background: #bdf url(tabs.gif);
float: left;
margin: 0 1px 0 0;
padding-left: 10px;
}
ol#menu a {
background: url(tabs.gif) 100% 0;
color: #008;
display: block;
float: left;
height: 2em;
line-height: 2em;
padding-right: 10px;
text-decoration: none;
}
ol#menu li.current {
background-color: #48f;
background-position: 0 -60px;
}
ol#menu li.current a {
background-position: 100% -60px;
color: #fff;
font-weight: bold;
}
div.content {
border: #48f solid 3px;
clear: left;
padding: 1em;
}</pre>
<pre>And hence the end of the tutorial.</pre>
<pre></pre>
<pre>If you want to test the above created menu then follow the steps:</pre>
<pre><strong>Step 1:</strong></pre>
<pre>Make a folder named menu:</pre>
<pre><strong>Step 2:</strong></pre>
<pre>make three blank html files in it:</pre>
<pre>Chapter1.html</pre>
<pre>Chapter2.html</pre>
<pre>Chapter3.html</pre>
<pre>Style.css</pre>
<pre>To make html file open text editor :</pre>
<pre>file ->save->save as type->choose all file ->file name->type filename.html->ok</pre>
<pre>in case of Style.css file type style.css in file name instade of html</pre>
<pre>step 3:</pre>
<pre>Right click on Chapter1.html ->open with->notepad</pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Homepage</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>My Homepage</h1>
<ol id="menu">
<li class="current"><a href="Chapter1.html"><span>Page 1</span></a></li>
<li ><a href="Chapter2.html"><span>Page 2</span></a></li>
<li><a href="Chapter3.html"><span>Page 3</span></a></li>
</ol>
<div class="content">
<h2>Page 2</h2>
<p>Text...</p>
</div>
</body>
</html>
Do this for Chapter2.html
<br />
<pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Homepage</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>My Homepage</h1>
<ol id="menu">
<li><a href="Chapter1.html"><span>Page 1</span></a></li>
<li class="current" ><a href="Chapter2.html"><span>Page 2</span></a></li>
<li><a href="Chapter3.html"><span>Page 3</span></a></li>
</ol>
<div>
<h2>Page 2</h2>
<p>Text...</p>
</div>
</body>
</html></pre>
<pre>Do this for Chapter3.html</pre>
<pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Homepage</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>My Homepage</h1>
<ol id="menu">
<li><a href="Chapter1.html"><span>Page 1</span></a></li>
<li ><a href="Chapter2.html"><span>Page 2</span></a></li>
<li class="current" ><a href="Chapter3.html"><span>Page 3</span></a></li></pre>
<pre></ol>
<div>
<h2>Page 2</h2>
<p>Text...</p>
</div>
</body>
</html></pre>
<pre>For Style.css</pre>
<pre></pre>
<pre></pre>
<pre>ol#menu {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ol#menu li {
background: #bdf url(tabs.gif);
float: left;
margin: 0 1px 0 0;
padding-left: 10px;
}
ol#menu a {
background: url(tabs.gif) 100% 0;
color: #008;
display: block;
float: left;
height: 2em;
line-height: 2em;
padding-right: 10px;
text-decoration: none;
}
ol#menu li.current {
background-color: #48f;
background-position: 0 -60px;
}
ol#menu li.current a {
background-position: 100% -60px;
color: #fff;
font-weight: bold;
}
div.content {
border: #48f solid 3px;
clear: left;
padding: 1em;
}</pre>
<pre>Save the above images as tabs.gif</pre>
</div>
No comments:
Post a Comment