Category drop down with SP

Started by Mick, Aug 11, 2013

Aug 11, 2013 Last Edit: Aug 14, 2018 by Mick

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>
You mean it's already opened when loading the page and you want to close it?
@cieplutki, here ya go.


<script type="text/javascript">
$("document").ready(function () {
    $("#browse").click(function(){
     $(".categories").toggle();
        });
    $( ".categories" ).show();
    });
</script>
Where do I put the javascript part? ?
Sep 04, 2013 #6 Last Edit: Jul 27, 2018 by Mick
Quote from: Dylert on 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.