Create a Custom Menu for SMF

Mick in Tutorials on Jul 22, 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:

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

Grab your icons at: Font Awesome

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






Tagged with:


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 Pizza.

  Connect with us:

     

  Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.
Commitment issues? Unsubscribe at any time.

Get 100% complete access to our entire collection and find out why 11,210 SMF owners prefer our themes



0 Comments








  Free Forever. Our themes will always be free. Forever. Period.