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

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;
}

The HTML:

 <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:

<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:


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.


6 Comments

Nice
how to do that was open
1

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

exactly  :grin:
3

@cieplutki, here ya go.


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

Where do I put the javascript part? ?
5

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.

  Receive our monthly newsletter right in your inbox.
Commitment issues? Unsubscribe at any time.


Get 100% complete access to our entire collection and find out why SMF owners prefer our themes





Latest Discussions

Join the conversation