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 to implement background img

    How i can set the height of black overlay in css that all other things goes hidden?

    How to get smooth Google fonts?

    how to resize background image of body in aspx page

    How to center jqPagination widget?

    How to tell Gulp to skip or ignore some files in gulp.src([…])?

    How to align text vertical CSS

    How to apply a underline style to piece of text

    How can I make my jquery mobile collapsible set larger using css

    How to set auto width for the fixed child div, when parent div change width?

    How to make a line in a table with CSS

    How to make ASP CheckBoxList labels stay on same line as checkbox

    How to center image while also aligning text to the right of image?

    Show Button in Table Cell Hover Over/Mouse Over

    How do I put my index.html in the same folder as my other .html files on github?

    how to get both icon and heading in same line in css

    How do I remove the last border on my nav bar?

    How can I compute a percentage based margin with LESS css?

    How do I position divs inside header?

    How to CSS for today's Internet? [closed]

    How do I add another css to Bootstrap?

    how to create an external javascript and an external css file for date picker and how to use it in eclipse

    How to center absolutely positioned elements in css for a pdf

    How to apply multiple transforms in CSS?

    how to: dynamically switch css page

    Simple slideshow not working properly

    How to get precise borders and sizes in Android KitKat's Webview(Android Chrome) on Nexus 7?

    How to use externel CSS and (static) images in Go, Google App Engine

    How to figure out the CSS bugs?

    How to use only CSS to round my div tag area's corners?