. I am trying to create a vetical
menu and an horizontal menu as in ur site, well the code i got was
from tanfa.css as shown below but this doesnot allow me to have href
to the h2 headings and also doesnot allow me to have an active heading
i.e. when the user is on that particular page the link is not
supressed, or changing the color, any ideas how would i do this ??
Also when i print the page all the listed items are printed instead of just that page anyone has any ideas on what should be done for that ??
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
<title>Vertical CSS Menu Tutorial ~ Example Page 7</title>
<meta name="description" content="Example 7 - CSS Vertical Popout Menu
Tutorial"></meta>
<link rel="shortcut icon" href="../../../favicon.ico" />
<link href="tanfa.css" rel="stylesheet" type="text/css">
<style type="text/css" media="screen">
/**************** menu coding *****************/
#menu {
width: 12em;
background: #eee;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {
position: relative;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<body id="www-tanfa-co-uk">
<div id="pagetop">
<a href="../../../index.html" title="tanfa :: Home Page" id="toplink"></a>
<h1>CSS Pop Out Menu Tutorial Code</h1>
<h2>Stage 7 - Fully Working Example</h2>
<h3>« <a href="tutorial-v.html#vs7">return to tutorial</a> :: Stages
[<a href="vs1.html" title="Vertical Example 1">1</a>]
[<a href="vs2.html" title="Vertical Example 2">2</a>]
[<a href="vs3.html" title="Vertical Example 3">3</a>]
[<a href="vs4.html" title="Vertical Example 4">4</a>]
[<a href="vs5.html" title="Vertical Example 5">5</a>]
[<a href="vs6.html" title="Vertical Example 6">6</a>]
<span>[7]</span>
</h3>
</div>
<!-- start Menu HTML -->
<div id="menu">
<ul>
<li><h2>CSS Drop Down Menus</h2>
<ul>
<li><a href="http://www.seoconsultants.com/tips/css/#cssmenus"
title="SEO Consultants Directory">CSS Hover Navigation</a>
<ul>
<li><a href="../css-dropdown-menus.html" title="tanfa
Introduction">Intro for CSS Enthusiasts</a></li>
<li><a href="index.html" title="Plain HTML
Code">Demonstration HTML</a></li>
<li><a href="http://www.xs4all.nl/~peterned/csshover.html"
title="whatever:hover file">csshover.htc file</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><h2>Vertical CSS Pop-Out Menu</h2>
<ul>
<li><a href="http://www.seoconsultants.com/css/menus/vertical/"
title="SEO Consultants Vertical Example">SEO Consultants
Sample</a></li>
<li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>
<ul>
<li><a href="tutorial-v.html" title="Vertical Menu
Tutorial">tanfa Tutorial</a>
<ul>
<li><a href="vs1.html" title="Vertical Menu - Page
1">Stage 1</a></li>
<li><a href="vs2.html" title="Vertical Menu - Page
2">Stage 2</a></li>
<li><a href="vs3.html" title="Vertical Menu - Page
3">Stage 3</a></li>
<li><a href="vs4.html" title="Vertical Menu - Page
4">Stage 4</a></li>
<li><a href="vs5.html" title="Vertical Menu - Page
5">Stage 5</a></li>
<li><a href="vs6.html" title="Vertical Menu - Page
6">Stage 6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><h2>Horizontal Drop & Pop Menu</h2>
<ul>
<li><a href="http://www.seoconsultants.com/css/menus/horizontal/"
title="SEO Consultants Directory Example">SEO Consultants
Sample</a></li>
<li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->
<ul>
<li><a href="tutorial-h.html" title="Horizontal Menu
Tutorial">tanfa Tutorial</a>
<ul>
<li><a href="hs1.html" title="Horizontal Menu - Page
1">Stage 1</a></li>
<li><a href="hs2.html" title="Horizontal Menu - Page
2">Stage 2</a></li>
<li><a href="hs3.html" title="Horizontal Menu - Page
3">Stage 3</a></li>
<li><a href="hs4.html" title="Horizontal Menu - Page
4">Stage 4</a></li>
<li><a href="hs5.html" title="Horizontal Menu - Page
5">Stage 5</a></li>
<li><a href="hs6.html" title="Horizontal Menu - Page
6">Stage 6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>