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 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 […]
By in Playground on

From our sponsor: Prepare for advanced communication roles and earn your Northwestern master’s degree online.

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.

    Tagged with:

    cody

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

    http://tympanus.net/codrops/author/cody/

    SVGThumbHover

    Thumbnail Hover Effect with SVG Filters

    3DLettersHoverMenu

    Rotated 3D Letters and Image Hover Effect

    3DGridContentPreview

    Magnetic 3D Grid Interaction with Content Preview

    Stay up to date with the latest web design and development news and relevant updates from Codrops.

    CSS Reference

    Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

    It doesn't matter if you are a beginner or intermediate, start learning CSS now.

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