My Customized version of ClarkLab’s Animated Drop Down Menu with jQuery

 

I found this post on Clarklab.net, Animated Drop Down Menu with jQuery.  Looked simple to use and I loved that I didn’t need any plug-in files like other “plug-ins”. I guess this really isn’t a plug-in.  Just nice, basic jquery and css.

They give the step by step and why you nee each line of code.

This is their version and their demo is here.

Row colors

 

 

My Need for it and How I Used

I had an application that had two date pickers.  The goal was to make it easy for the user to be able to set the date on the second date picker based on the date from the first date picker. Adding X days to the date in the first date picker.

I’m using Telerik’s AJAX Calendar control for my date picker so some of the Javascript you’ll see is specific to their Client API.

image

I followed their steps but altered the CSS and UL list of course.

My CSS:

<style type="text/css">

.menu_head{border:0; margin-top:10px}
.menu_body ul, li{margin:0; padding:0; list-style:none;}
.menu_body {display:none; width:100px; margin-left:-40px; font-size:small;}
.menu_body li a:hover{font-weight:bold;}

</style>

Added my UL list..

<img src="/Images/BlueArrowRight.png" alt="Copy Date Over" height="24px" width="24px" class="menu_head" />
<ul class="menu_body">
    <li><a href="javascript:CopyDate(0);">Copy Date</a></li>
    <li><a href="javascript:CopyDate(15);">Add 15 days</a></li>
    <li><a href="javascript:CopyDate(30);">Add 30 days</a></li>
    <li><a href="javascript:CopyDate(45);">Add 45 days</a></li>
    <li><a href="javascript:CopyDate(60);">Add 60 days</a></li>
    <li><a href="javascript:CopyDate(90);">Add 90 days</a></li>
    <li><a href="javascript:CopyDate(120);">Add 120 days</a></li>
</ul>

 

Then added my jQuery.. I’m sure there is a better way to close the menu, but I threw it in my CopyDate() method. Again, note that picker.get_textBox() and get_selectedDate() are Telerik Client API methods on their controls.

<script type="text/javascript">
    $(document).ready(function() {
        $("ul.menu_body li:even").addClass("alt");

        $('img.menu_head').click(function() {
            $('ul.menu_body').slideToggle('medium');
        });

        function CopyDate(TotalDays) {
            AddDueDate(TotalDays);
            $('ul.menu_body').slideToggle('medium');
        }

        function AddDueDate(TotalDays) {
            if (TotalDays >= 0) {
                var picker = $find("<%= calDateOfLetter.ClientID %>");
                var textBox = picker.get_textBox();
                var destination = $find("ctl00_ContentPlaceHolder1_calDueDate_calDatePicker");
                var destTextbox = destination.get_textBox();

                var CurrentDate = picker.get_selectedDate();
                CurrentDate.setDate(CurrentDate.getDate() + parseInt(TotalDays));
                destination.set_selectedDate(CurrentDate);
                picker.hidePopup();
            }
        }
    });
</script>

 

Finished Version (yes the dates are old, the record I’m testing on happens to be old)

image

Clicking on the arrow you get the menu..

image

Click on a date and it gets added and the menu closes..

image

Works great! I love it, client loves it, end-user loves it.  Thanks Clarklabs!