Category drop down with SP

in Tutorials on 11 Aug 2013

When you browse the categories the rest of the page is shifted down to reveal the list. Let's create a top HTML block and add the following. Browse can be made into a button with some CSS love. It's up to you, but for this demo, we used plain text.

The CSS:
#browse {
            cursor: pointer;
.categories {
            display: none;
            padding: 10px;
            float: left;
            width: 100%;
            background: #f7f7f7;
            margin-top: 10px;
.categories ul {
            padding: 0px;
.categories li {
            display: inline;
            width: 130px;
            float: left;
            border-bottom: 1px dotted #dedede;
            margin: 0px 5px 0px 5px;
.categories li a {
            display: block;
            color: #333333;
            padding: 10px;
.categories li a:hover {
            background: #4183c4;
            color: #ffffff;

<div id="browse">Open Menu</div>
    <div class="categories">
        <li><a href="#">API's</a></li>
        <li><a href="#">PHP</a></li>
        <li><a href="#">MySQL</a></li>
        <li><a href="#">OAuth</a></li>
        <li><a href="#">Memcache</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">MooTools</a></li>
        <li><a href="#">Mobile</a></li>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">Web Tools</a></li>
        <li><a href="#">Frameworks</a></li>
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Social Media</a></li>
        <li><a href="#">Widgets</a></li>
        <li><a href="#">Reviews</a></li>
        <li><a href="#">Trends</a></li>
        <li><a href="#">Social</a></li>
        <li><a href="#">Bookmarking</a></li>
        <li><a href="#">Facebook</a></li>
      <div class="clear"></div>

The Javascript:
<script src=""></script>
<script type="text/javascript">
$("document").ready(function () {

PixelfyStudio Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded PixelfyStudio in 2009 to which he is dedicated full time. |


You mean it's already opened when loading the page and you want to close it?
@cieplutki, here ya go.

<script type="text/javascript">
$("document").ready(function () {
    $( ".categories" ).show();
Where do I put the javascript part? ?
Quote from: Dylert on 04 Sep 2013
Where do I put the javascript part? ?
Inside the block at the very bottom of all your code or in indextemplate.php above the closing body tag.

Find the right theme for you. Browse through our gallery of expertly-crafted free SMF themes to find the perfect one for your needs.