Using Transitions on SMF Menus

in Tutorials on 12 Apr 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.

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

The HTML Markup:
Code Select
<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:
Code Select
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



Previous topic
Next topic

idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com 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.

idesignSMF.com | SimpleMachines.org



0 Comments

Pages1

rocket_launch

Brand spankin' new free SMF themes every month.