Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Tabbed navigation with CSS transitions

    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...ansitions.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_nav.html


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

    Any ideas?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    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:
    Code:
    <!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><!--end MAIN div-->
    </div><!--End CONTAINER div-->
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •