Tabbed navigation with CSS transitions [Archive]

plaedien

01-15-2013, 03:21 AM

Hello again CSS peeps,

I'm developing a new website for work, and I have wanted to use CSS transitions on the navigation.

http://www.petsdomain.com.au/natures_test/Natures-NAV-TEST_transitions.html

Ideally I want it so that the coloured blocks are divs coloured with css, and the text be real text.

I couldnt seem to get the blocks to slide down over the text, the rollover wouldn't trigger at all.

Here is an example using a sprite of what I'm trying to achieve (ignore the fact that the text obviously scrolls down due to the sprite.)

http://www.petsdomain.com.au/natures_test/NB-Test_nav.html

What I want to do is have the coloured block slide down and COVER the text below it.

Any ideas?

sunfighter

01-15-2013, 03:27 PM

I was going to say the words "slide" and "css" and "hover" don't go together. That you were going to need javascript to do this, but I played around with an idea. See if this helps:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
<title>Natures Best - Navigation test</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
background-image: url('images/wood-bg.jpg');
}
#stripe
{
height: 5px;
width: 100px;
background-color: blue;
}
#main
{
height: 50px;
width: 100px;
color: white;
margin: auto;
}
#main a
{
position: relative;
bottom: -20px;
left: 25px;

}
#main:hover
{
background-color: blue;
}
</style>
</head>

<body>
<div id="container">
<div id="main">
<div id="stripe"></div>
<a>HOME</a>
</div>
</div>
</body>
</html>