Using Transitions on SMF Menus

Mick in Tutorials on Apr 12, 2013

Using the following code we can set up a basic menu. It is styled so that the menu items change their color and background color when rolled over smoothly.


    -o-transition: all 500ms;
    -moz-transition: all 500ms;
    -webkit-transition: all 500ms;
    transition: all 500ms;

The HTML Markup:

<ul class="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Help</a></li>
 <li><a href="#">Search</a></li>
 <li><a href="#">Profile</a></li>
 <li><a href="#">My Messages</a></li>
 <li><a href="#">Calendar</a></li>
 <li><a href="#">Members</a></li>
 <li><a href="#">Login</a></li>
</ul>

The CSS:

ul { 
     padding: 0; margin: 20px;
}

li {
    display: inline;
    padding: 5px 0;
}

.nav a {
    padding: 5px;
    color:#ffffff;
    background:#4887d4;
    text-decoration: none;
    -o-transition: all 500ms;
    -moz-transition: all 500ms;
    -webkit-transition: all 500ms;
    transition: all 500ms;
}
 
.nav a:hover {
    color:#f1f1f1;
    background:#75b6ff;
}

Demo below




Tagged with: menu transitions css3 css 


Mick

Mick G

idesignsmf.com

    

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Tacos and Pizza.


0 Comments




Latest Discussions

Join the conversation



  Find the right theme for you. Browse through our gallery of expertly-crafted free SMF themes to find the perfect one for your needs.