Create a Custom Menu for SMF

in Tutorials on 22 Jul 2018


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:
Code Select
<head>';

    // The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
    echo '

Add after:
Code Select
<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:
Code Select

.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;
}


Grab your icons at: Font Awesome

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


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

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