jQuery Sliding Menu Plugin

This is a sliding menu plugin for jQuery which fires on mouseover and mouseout events. The plugin options passed are: tagPaddingTop how much is the element moving down bgColor the […]

By in Playground on

This is a sliding menu plugin for jQuery which fires on mouseover and mouseout events.

click to see a demo
click to see a demo

The plugin options passed are:

  • tagPaddingTop how much is the element moving down
  • bgColor the background color of an item by default
  • bgMoverColor the background color of an item for the onmouseover
  • textColor the text color for the onmouseover

    • So as an example you can call it like this:

    $(document).ready(function() {
                $('.menu').tagdrop({tagPaddingTop: '60px',bgColor: '#B1CCED',bgMoverColor: '#7FB0F0',textColor: '#e0e0e0'});
            });

    See the demo.
    Download the source code here.

    Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

    cody

    Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

    Menu to Grid Layout Animation

    Hover Motion Intro Animation

    Grid Zoom Layout

    Stay in the loop: Get your dose of frontend twice a week

    Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

    Feedback 3

    Comments are closed.

    1. Well, actually it doesn´t work if you´re going to use some anchors inside the -elements (which is probably the purpose of this code snippet).

      What you have to do is use the anchors as the trigger for expanding the menu item and not the .

      The correct code should be for the javascript-part:
      (function($){ $.fn.extend({ tagdrop: function(options) { var defaults = { tagPaddingTop: '90px', tagDefaultPaddingTop: '30px', bgColor: '#B1CCED', bgMoverColor: '#7FB0F0', textColor: '#e0e0e0', textDefaultColor: '#fff' }; var options = $.extend(defaults, options); return this.each(function() { var obj = $(this); var li_items = $("a", obj); $("a", obj).css('background-color', options.bgColor); li_items.mouseover(function(){ $(this).animate({paddingTop: options.tagPaddingTop}, 300); $(this).css('background-color', options.bgMoverColor); $(this).css('color', options.textColor); }).mouseout(function() { $(this).animate({paddingTop: options.tagDefaultPaddingTop}, 500); $("a",$(this).parent()).css('background-color', options.bgColor); $("a",$(this).parent()).css('color', options.textDefaultColor); }); }); } }); })(jQuery);

      And the css:
      .menu li {float: left;} .menu li a { display: block; margin:0 auto; cursor:pointer; height:30px; padding:30px 5px 5px 5px; margin:0px 3px 0px 3px; -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius:0px 0px 10px 10px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); color: #FFF; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); font-family: "Lucida Grande",Lucida,Verdana,sans-serif; font-size:13px; font-weight:bold; text-transform:uppercase; }