#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    Toronto
    Posts
    166
    Rep Power
    11

    Menu \w Sliding hover


    I need some help finishing up this sliding menu...

    jsfille link
    I cant get the text vertically aligned to the middle.
    In the last element, the text seems to be sticking out...
    + overall its a bit glitchy

    thanks
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    14
    Rep Power
    0
    I added a div, so it's easier for me to write the css. Also, the image's been edited to match the hover width to this:

    The javascript was pretty much useless. I think it didn't do anything.

    http://jsfiddle.net/leev18/vM4wa/
    (it does not work on IE9 and below).

    HTML:
    Code:
    <div id="nav">
    	<ul>
    		<li><a href="#">Home page</a></li>
    		<li><a href="#">URL 2</a></li>
    		<li><a href="#">Page 3</a></li>
    		<li><a href="#">Page 4</a></li>
    		<li><a href="#">Page 5</a></li>
    	</ul>
    </div>
    CSS:
    Code:
    ul {
        margin: 0;
    	padding: 0;
    	list-style: none;
    }
    #nav {
    	margin-left: 10px;
    }
    #nav li {
    	border-bottom: solid 1px transparent;
    }
    #nav a {
        display:block;
        color: #fff;
    	height: 50px;
    	line-height: 50px;
        width: 50px;
    	overflow: hidden;
    	text-align: center;
    	text-decoration: none; /* this removes that underline */
        -moz-transition: width 1s; /* Firefox 4 */
        -webkit-transition: width 1s; /* Safari and Chrome */
        -o-transition: width 1s; /* Opera */
    }
    #nav a {
    	background-image: url("http://i282.photobucket.com/albums/kk246/leeV18/publicweb/nav-bg_zpsa8541305.png");
    	background-repeat: none;
    	display: block;
    }
    #nav a:hover{
        width:300px; 
    }

IMN logo majestic logo threadwatch logo seochat tools logo