A fancy drop down buttons using SimpleMachine's API. SSI.php provides ways to add live information to your website by linking to your SMF Forum software. This is very useful for attracting further interest to your discussion areas and making your SMF Forum truly a part of your website experience by including recent posts, users online and a whole host of other data that can be displayed to your visitors.

demo

The CSS:
1. Open /Themes/your-theme/css/index.css and the very bottom add:

Code Select Expand

.mainToggle {
  max-width: 375px;
}

.wrapToggle > li {
  cursor:pointer;
  list-style-type: none;
}

.wrapToggle > li > h4 {
  padding:20px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:#fff;
  font-size:13px;
  text-shadow:1px 1px 0px rgba(0,0,0,.1);
}

.blue {
  background: #3a9bdc;
  border:4px solid rgba(0,0,0,.1);
}

.strawb {
  background: #ff6060;
  border:4px solid rgba(0,0,0,.1);
}

.yellow {
  background: #ffc500;
  border:4px solid rgba(0,0,0,.1);
}

.green {
  background: #63b47a;
  border:4px solid rgba(0,0,0,.1);
}

.pink {
  background: #ed327b;
  border:4px solid rgba(0,0,0,.1);
 
}

h4:hover {
  border:4px solid rgba(0,0,0,.2);
}

.content_toggle  {
  display:none;
  padding:15px;
  font-size:15px;
  word-spacing:3px;
  line-height:1.5em;
  background:#fff;
  color:#bbb;
  border-left:5px solid rgba(0,0,0,.1);
  border-right:5px solid rgba(0,0,0,.1);
}

.content_toggle:last-of-type {
  border:4px solid rgba(0,0,0,.1);
}

2. Create a PHP side block add the following:

Make sure the path to your forum in the code below is correct.

Code Select Expand

require("/home/************************/public_html/root-of-forum here if any/SSI.php");

echo '
<div class="mainToggle">
  <ul class="wrapToggle">
    <li>
      <h4 class="head blue">Boards</h4>
      <div class="content_toggle">'; ssi_topBoards(); echo ' </div>
    </li>
    <li>
      <h4 class="head strawb">News</h4>
      <div class="content_toggle">'; ssi_news(); echo ' </div>
    </li>
    <li>
      <h4 class="head yellow">Today\'s Calendar</h4>
      <div class="content_toggle">'; ssi_todaysCalendar(); echo ' </div>
    </li>
    <li>
      <h4 class="head green">Who\'s Online</h4>
      <div class="content_toggle">'; ssi_whosOnline(); echo ' </div>
    </li>
    <li>
      <h4 class="head pink">Latest member</h4>
      <div class="content_toggle">'; ssi_latestMember(); echo ' </div>
    </li>
  </ul>
</div>';

echo '
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $(".head").click(function () {
        $(this).next(".content_toggle").slideToggle();
        $(this).parent().siblings().children().next().slideUp();
        return false;
    });
    $(".head").bind("touchstart", function (e) {
        $(this).trigger("click");
        e.preventDefault();
    });
});
</script>';

Reference:
https://codepen.io/dope/pen/yuzvq
Category:SSI - Online Manual

[1.]

A fancy drop down buttons using SimpleMachine's API. SSI.php provides ways to add live information to your website by linking to your SMF Forum software. This is very useful for attracting further interest to your discussion areas and making your SMF Forum truly a part of your website experience by including recent posts, users online and a whole host of other data that can be displayed to your visitors.

demo

The CSS:
1. Open /Themes/your-theme/css/index.css and the very bottom add:

Code Select Expand

.mainToggle {
  max-width: 375px;
}

.wrapToggle > li {
  cursor:pointer;
  list-style-type: none;
}

.wrapToggle > li > h4 {
  padding:20px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:#fff;
  font-size:13px;
  text-shadow:1px 1px 0px rgba(0,0,0,.1);
}

.blue {
  background: #3a9bdc;
  border:4px solid rgba(0,0,0,.1);
}

.strawb {
  background: #ff6060;
  border:4px solid rgba(0,0,0,.1);
}

.yellow {
  background: #ffc500;
  border:4px solid rgba(0,0,0,.1);
}

.green {
  background: #63b47a;
  border:4px solid rgba(0,0,0,.1);
}

.pink {
  background: #ed327b;
  border:4px solid rgba(0,0,0,.1);
 
}

h4:hover {
  border:4px solid rgba(0,0,0,.2);
}

.content_toggle  {
  display:none;
  padding:15px;
  font-size:15px;
  word-spacing:3px;
  line-height:1.5em;
  background:#fff;
  color:#bbb;
  border-left:5px solid rgba(0,0,0,.1);
  border-right:5px solid rgba(0,0,0,.1);
}

.content_toggle:last-of-type {
  border:4px solid rgba(0,0,0,.1);
}

2. Create a PHP side block add the following:

Make sure the path to your forum in the code below is correct.

Code Select Expand

require("/home/************************/public_html/root-of-forum here if any/SSI.php");

echo '
<div class="mainToggle">
  <ul class="wrapToggle">
    <li>
      <h4 class="head blue">Boards</h4>
      <div class="content_toggle">'; ssi_topBoards(); echo ' </div>
    </li>
    <li>
      <h4 class="head strawb">News</h4>
      <div class="content_toggle">'; ssi_news(); echo ' </div>
    </li>
    <li>
      <h4 class="head yellow">Today\'s Calendar</h4>
      <div class="content_toggle">'; ssi_todaysCalendar(); echo ' </div>
    </li>
    <li>
      <h4 class="head green">Who\'s Online</h4>
      <div class="content_toggle">'; ssi_whosOnline(); echo ' </div>
    </li>
    <li>
      <h4 class="head pink">Latest member</h4>
      <div class="content_toggle">'; ssi_latestMember(); echo ' </div>
    </li>
  </ul>
</div>';

echo '
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $(".head").click(function () {
        $(this).next(".content_toggle").slideToggle();
        $(this).parent().siblings().children().next().slideUp();
        return false;
    });
    $(".head").bind("touchstart", function (e) {
        $(this).trigger("click");
        e.preventDefault();
    });
});
</script>';

Reference:
https://codepen.io/dope/pen/yuzvq
Category:SSI - Online Manual

How to add extra menu buttons to Nav bar

[Tip] Customize ssi_whosOnline();

Sweet CSS3 buttons

SSI News Side PHP Block

Creating Metro style buttons