CODEWITHSUNDEEP
jqueryhtmlcsstransition
Moduo
Moduo

Reputation: 623

Let display:none elem slideRight();

I'm trying to make a menu in CSS where only icons are visible as buttons, but when you hover over them, the text next to the icon must be shown. The thing is that I want to animate the effect of showing the text with a slideDown() like effect, only then to the right.

The HTML (which includes fontawesome for the icons):

<body>
<nav>
    <ul>
        <li><a href="#"><i class="fa fa-home"></i><span>Home</span></a>
        </li>
        <li><a href="#"><i class="fa fa-users"></i><span>Team</span></a>
        </li>
        <li><a href="#"><i class="fa fa-comments"></i><span>Management</span></a>
        </li>
        <li><a href="#"><i class="fa fa-cog"></i><span>Settings</span></a>
        </li>
        <li><a href="#"><i class="fa fa-envelope"></i><span>Mail Jobs</span></a>
        </li>
    </ul>
</nav>
</body>

The CSS:

nav {
    position:fixed;
    top:20px;
    background:#701313;
    border-radius:0 30px 30px 0;
    font-family:'Open Sans', sans-serif;
}
nav ul {
    margin:0px;
    padding:0px 20px;
    width:56px;
}
nav ul li {
    font-size:23px;
    display:block;
    width:3000px;
    margin:40px 0;
}
nav ul li a {
    background:#2e2e2e;
    border-radius: 30px;
    padding:15px 17px;
    color:#FFF;
    text-decoration: none;
}
nav ul li a:hover span {
    display:inline;
}
nav ul li i {
    font-size:28px !important;
}
nav ul li span {
    display:none;
    padding:0 20px;
}

I also included a JSFiddle.

The ideal solution would be pure CSS, but I'm not sure if that's possible. So if it's not possible, a solution with jQuery would be a good outcome.

Upvotes: 2

Views: 135

Answers (1)

Qutayba
Qutayba

Reputation: 196

You can do that with CSS3 animation but you have to specify fixed width to the a elements. That will make it less dynamic.

jQuery can be used to update the width value and the CSS3 animation will be triggered by that. I have modified your CSS and added simple JS function to update the width value.

    nav ul li a {
        background:#2e2e2e;
        border-radius: 30px;
        padding:15px 0;
        color:#FFF;
        text-decoration: none;
        overflow:hidden;
        width:60px;
        display:inline-block;
        -webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
        transition: width 0.5s; 
    }
    nav ul li a:hover {
    }

    nav ul li a:hover span {
        opacity: 1;
    }
    nav ul li i {
        margin-left:16px;
        font-size:28px !important;
    }
    nav ul li span {
       position:absolute;
        padding:0 20px;
        opacity: 0;
        -webkit-transition: opacity 0.9s; /* For Safari 3.1 to 6.0 */
        transition: opacity 0.9s;
    }

And the Javascript code:

$(function(){
    $("nav ul li a").hover(function(){
        $(this).css("width", $(this).find("span").innerWidth() + 50);
    }, function(){
        $(this).css("width", 60);
    });
});
  • You need to include the jQuery lib.
  • You can change the animation in your CSS.

Upvotes: 2

Related Questions