PDA

View Full Version : Current page navigation link



Williebee
Apr 22nd, 2010, 11:48 AM
Hi

With a bit of practice, I managed to get the current tab to be diffrent for the relevant page, see code


<style type="text/css">

li{
list-style-type:none;
display:inline;
width:140px;
height:80px;
float:left;
margin-right:15px;
border:1px solid black;
}

a{
color:black;
width:140px;
height:80px;
line-height:80px;
display:block;
text-decoration:none;
text-align:center;
font-size:20px;
background-color:orange;
}

a:hover{
color:black;
width:140px;
height:80px;
line-height:80px;
display:block;
text-align:center;
text-decoration:none;
font-size:20px;
background-color:olive;
}


body.home ul li.home a,
body.products ul li.products a,
body.contact ul li.contact a,
body.help ul li.help a
{
color:black;
background-color:yellow;
cursor:crosshair;
}


</style>
</head>
<body class="contact">

<ul>
<li class="home"><a href="#">Home</a></li>
<li class="products"><a href="#">products</a></li>
<li class="contact"><a href="#">Contact</a></li>
<li class="help"><a href="#">help</a></li>

</ul>
</body>


But ! I'm not sure how to develop this technique for a fly-out menu, as per the following code.

Any help would be appreciated !




<style type="text/css">

body{
margin:0px;
padding:0px;
background-color:navy;
}

#navmenu {
width:206px;
height:250px;
border:1px solid red;
background-color:teal;

}

#navmenu ul{
list-style-type:none;
padding:0px;
}

#navmenu ul li{
width:160px;
height:25px;
border-top:3px solid black;
border-left:3px solid black;
border-right:3px solid black;
margin-top:0px;
margin-left:20px;
}
.last{
border-bottom:3px solid black;}

.lastfly{
border-bottom:3px solid black;}

#navmenu ul li a{
display:block;
width:160px;
height:25px;
background-color:lime;

}

#navmenu ul li a:hover{
display:block;
width:160px;
height:25px;
background-color:green;

}

#navmenu ul li ul{
position:relative;
width:160px; /* fix here attempted */
margin-left:185px;

/* next three values were -22 -39 none */

top:-28px;
left:-40px;
display:none;
}

#navmenu ul li ul li{

height:25px;
border-top:3px solid black;
border-left:none;
border-right:3px solid black;
margin-top:0px;
}

#navmenu ul li:hover ul{ /* ??? */
display:block;
}

#navmenu ul li ul li a{
display:block;
width:160px;
height:25px;
background-color:lime;
}

#navmenu ul li ul li a:hover{
display:block;
width:160px;
height:25px;
background-color:black;

}


</style>
</head>

<body>

<div id="navmenu">
<ul>
<li><a href="#">Home </a>

<ul>
<li><a href="#">Home 1</a></li>
<li class="lastfly"><a href="#">Home 2</a></li>
</ul>

</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Store</a>
<ul>
<li><a href="#">Store 1</a></li>
<li class="lastfly"><a href="#">Store 2</a></li>
</ul>

</li>
<li class="last"><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>


Just imagine that the individual pages which will link to this menu are called .. Home 1, Home 2, Blog etc etc

Many many thanks in anticipation