Pretty neat menu that when hovering the icons, it reveals the text and pushes over. It can be used on a top or bottom HTML/PHP block and add your custom links etc. Also it can replace the default menu from your custom theme with basic PHP that it is also easy to achieve.
Open /Themes/your-theme/index.template.php and find:
<head>';
// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo 'Add after:
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">Replace colors to suit your needs.
The CSS:
.short-menu {
float: right;
}
.bar {
background: #e74c3c;
height: 64px;
}
.short-menu li {
list-style: none;
background-color: #e74c3c;
display: block;
float: left;
border-right: 1px solid #b81c11;
}
.short-menu li a {
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
height: 64px;
color: #ff776b;
line-height: 64px;
padding: 0 20px 0 0;
vertical-align: top;
width: 80px;
overflow: hidden;
display: block;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.short-menu li a:before {
font-size: 32px;
font-weight: normal;
width: 80px;
height: 64px;
line-height: 64px;
text-align: center;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.short-menu li a:hover {
width: 200px;
color: #fcfffa;
}
.short-menu li a:hover:before {
width: 64px;
}
The Markup:
<div class="bar">
<div class="short-menu">
<li><a href="#" class="icon-home">Home</a></li>
<li><a href="#" class="icon-group">Forums</a></li>
<li><a href="#" class="icon-question">Help</a></li>
<li><a href="#" class="icon-search">Search</a></li>
<li><a href="#" class="icon-calendar">Calendar</a></li>
<li><a href="#" class="icon-camera">Photos</a></li>
<li><a href="#" class="icon-search">Search</a></li>
</div>
</div>Reference:
Short menu