View Full Version : Tabbed navigation with CSS transitions

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.


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.)


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

Any ideas?

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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Natures Best - Navigation test</title>
<style type="text/css">
margin: 0;
padding: 0;
background-image: url('images/wood-bg.jpg');
height: 5px;
width: 100px;
background-color: blue;
height: 50px;
width: 100px;
color: white;
margin: auto;
#main a
position: relative;
bottom: -20px;
left: 25px;

background-color: blue;

<div id="container">
<div id="main">
<div id="stripe"></div>
</div><!--end MAIN div-->
</div><!--End CONTAINER div-->