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.

view demo

The CSS:

Code Select Expand


#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 Expand


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


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


Nice
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.

Code Select Expand


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


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.