Professional & Impressive. We provide top quality free SMF themes with excellent support.

Category drop down with SP

Mick in Tutorials on Aug 11, 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 () {

Tagged with:


Mick G


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.


how to do that was open

You mean it's already opened when loading the page and you want to close it?

exactly  :grin:

@cieplutki, here ya go.

<script type="text/javascript">
$("document").ready(function () {
    $( ".categories" ).show();

Where do I put the javascript part? ?

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.

Latest Discussions

Join the conversation

Our Most Popular Features