Add a sticky side menu to your SMF

by Mick in Tutorials on 01 May 2013


We?re going to implement a sticky menu with CSS, toggling its visibility with jQuery. It?s the perfect way to give visitors social links, additional places within a network of sites, or even personalize settings of your forum.

Demo: Sticky Side Menu

First lets download the small ZIP below and upload the "Font" folder to your current theme.

In your theme's index.template.php find:
// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

echo '


Add after:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>


Find:
function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '


Add after:
[code]<div class="toolbar-wrapp">
   <div class="sticky-toolbar">

      <ul>
         <li class="glyph" id="support">
            <a href="#" data-icon="
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.
    
0 Comments

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.