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


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>



idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com 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.

idesignSMF.com | SimpleMachines.org



6 Comments

You mean it's already opened when loading the page and you want to close it?
#2
@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
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.
#6

rocket_launch

Free Forever. Our themes will always be free. Forever. Period.