How to have text slide in when I hover over navbar?


Tags: css,css3,animation,navbar,slide

Problem :

So while I hover over each navbar tab, I would like a bar to slide in from the right with a description of the hovered tab. For example, if I hover over "Research," a bar would slide in from the right saying "Read about my current research." How would I do this? Can I use strictly CSS3? Or would I need Javascript? My code is below:

HTML:

       <!DOCTYPE html>
       <html>
         <head>
           <title>Matthew H. Goodman</title>
           <link href="stylesheettabs.css" rel="stylesheet" type="text/css"/>
         </head>
         <body>
           <ul id="nav">
             <li><a href="web2home.html">HOME</a></li>
             <li><a href="web2cv.html">CV</a></li>
             <li><a href="#">RESEARCH</a></li>
             <li><a href="web2con.html">CONTACT</a></li>
           </ul>
         </body>
       </html>

CSS:

      #nav {
        padding:0px;
        margin-top: 200px;
        border-radius: 10px;
        left: 0;
        width: auto;
        position: absolute;
        height: auto;
        background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg"); 
        overflow: hidden;
      }

      #nav li {
        position: relative;
        list-style: none;
        width: auto;
        border-top: 1px solid black;
      }

      #nav li a {
        position: relative;
        display: block;
        text-decoration: none;
        font-size: 15px;
        font-weight: bold;
        color: white;
        text-align: center;
        padding: 15px;
      }

      #nav li:hover {
        background-color: black;
      }

      #nav li a:hover {
        color: #778899;
        display: block;
        padding: 15px;
      }


Solution :

JSBIn

I post a demo on jsbin.Here is key code:

 #nav li span{
   transition: all 0.5s;
   position: absolute;
   top: 0;
   left: -300px;
   display: block;
   width: 300px;
   height: 100%;
   background: #69f;
   z-index: -1;
 }
      #nav li:hover span{
        left: 100px;
      }

    CSS Howto..

    How do I pre-hide something in preparation to expose it in a jQuery animation?

    How can I align text using CSS but perform like printf in C? [closed]

    How to make a CSS element extend beyond all borders of containing div?

    How to provide default font height or content when

    or has no characters?

    How to create desktop widgets [closed]

    How To Make CSS Animations Ease Back To Position When No Longer Hovering?

    Angular: How to alternate CSS classes for a list, with more than 2 classes?

    How to add a banner inside a div at the bottom?

    How does browser layout adjacent div to a floating div

    How to set height?

    How to style drop down list? [duplicate]

    How to put all of the images from folder into CSS box

    How do I get IE to display CSS DIV tables properly?

    How to refer to an anchor pane in css?

    CSS how to center ::after pseudo elem

    How do you disable horizontal scrolling on a webpage?

    CSS hover - How do I get it to change two nested divs

    how can i change the style of scroll bar

    IN IE6, how to position transparent PNG using filter?

    How to not apply a webpage's CSS on the div I am inserting into it via content scripts?

    How can I setup Javascript dynamically to expand divs when clicking another div?

    How to organize user's shares to easily add comments to that particular post?

    How to center a rotated div inside a table element with a specific width?

    How to get rid of space between buttons and content/paragraph? (CSS)

    How do a Add scroll bar with fixed header

    How to do mutiple css class in one line javascript code

    CSS + Bootstrap: How to dynamically stretch subdiv width to fit container (with image)?

    how i center div elements horizontally in css?

    How to use particular CSS styles based on screen size / device

    how to identify if a css class has property in extjs