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

Category drop down with SP

Mick in Tutorials
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:
Code: [Select]
#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;
}

The HTML:
Code: [Select]
 <div id="browse">Open Menu</div>
    <div class="categories">
      <ul>
        <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>
      </ul>
    </div>

The Javascript:
Code: [Select]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(function () {
    $("#browse").click(function(){
     $(".categories").toggle();
        });
    });
</script>

Tagged with:

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.

    


6 Comments

cieplutki
Aug 24, 2013
Nice
how to do that was open
1

Mick
Aug 24, 2013
You mean it's already opened when loading the page and you want to close it?
2

cieplutki
Aug 25, 2013
exactly  :grin:
3

Mick
Aug 25, 2013
@cieplutki, here ya go.

Code: [Select]
<script type="text/javascript">
$("document").ready(function () {
    $("#browse").click(function(){
     $(".categories").toggle();
        });
    $( ".categories" ).show();
    });
</script>
4

Dylert
Sep 04, 2013
Where do I put the javascript part? ?
5

Mick
Sep 04, 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.
6



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