Excellent Support. By using our themes, you also use our excellent support! Our expert staff is here for you.

Add a sticky side menu to your SMF

Mick in Tutorials
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:
Code: [Select]
	// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

echo '

Add after:
Code: [Select]
	<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:
Code: [Select]
function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '

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

<ul>
<li class="glyph" id="support">
<a href="#" data-icon="📣"></a>
</li>

<li class="glyph" id="help">
<a href="#" data-icon=""></a>
</li>

<li class="glyph" id="settings">
<a href="#" data-icon="⚙"></a>
</li>
</ul>

</div>

<div class="popup">
<div class="arrow"></div>
<ul>
<li><a href="">List Item 1</a></li>
<li><a href="">List Item 2</a></li>
<li><a href="">List Item 3</a></li>
</ul>
</div>
</div>

Find:
Code: [Select]
function template_html_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '

Add after:
Code: [Select]
<script type="text/javascript">

$(document).ready(
function(){
        $("#support").click(function () {
        $(".popup").fadeToggle(150);
        return false;
        });
    });

</script>

In your css/index.css
At the very end add this:
Code: [Select]
ol, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    line-height: 1.6em;
}

.toolbar-wrapp{
position: fixed;
display: block;
top: 30%;
        left: 0%;
}

.sticky-toolbar{
position: relative;
top: 30%;
padding: .1em;
background-color: #2C3E50;
float: left;
-webkit-border-radius: 0 .2em .2em 0;
-moz-border-radius: 0 .2em .2em 0;
border-radius: 0 .2em .2em 0;
}

.sticky-toolbar ul li a{
display: block;
width: .8em;
margin: 0.2em;
line-height: 80%;
font-size: 2.2em;
text-align: center;
color: #fff;
background-color: #16A085;
-webkit-border-radius: .1em;
-moz-border-radius: .1em;
border-radius: .1em;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
-webkit-font-smoothing: antialiased;
}

.sticky-toolbar ul li a:hover{
background-color: #1ABC9C;
}

.popup{
display: none;
float: right;
position: relative;
left: 5%;
background-color: #2C3E50;
-webkit-border-radius: .2em;
-moz-border-radius: .2em;
border-radius: .2em;
}

.popup ul li a{
position: relative;
display: inline-block;
font-size: .85em;
color: #fff;
padding: 0 2em 0 2em;
margin: .4em;
text-align: center;
text-decoration: none;
transition: all 0.1s ease-in-out;
-webkit-border-radius: .2em;
-moz-border-radius: .2em;
border-radius: .2em;

}

.popup ul li a:hover{
background-color: #1ABC9C;
}

.arrow {
position: absolute;
top: 10%;
left: -.4em;
width: 0; height: 0;
border-top: .5em solid transparent;
border-right: .5em solid #2C3E50;
border-bottom: .5em solid transparent; 
}


/***** Font and Icon load ******/

@font-face {
    font-family: 'Entypo';
    src: url('../font/entypo.eot');
    src: local('☺'),
    url('../font/entypo.woff') format('woff'),
    url('../font/entypo.ttf') format('truetype'),
    url('../font/entypo.svg#webfontIyfZbseF') format('svg');
}

[data-icon]:before {
font-family: 'Entypo';
content: attr(data-icon);
}

Tagged with: menu transitions css3 css fixed smf 

Share This Post

Mick

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



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.




go up