Add a sticky side menu to your SMF

Mick in Tutorials on May 01, 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="

Tagged with: menu transitions css3 css fixed smf 


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


0 Comments




Latest Discussions

Join the conversation



  Amazingly Simple and Beautiful. Brand spankin' new free SMF themes every month.