jQuery Sliding Menu Plugin

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

2. 2

   hi
   I have a problem when I add an anchor, how can we fix that?
3. 3

   I just followed the minustalent code sample and it works :D thanks

Comments are closed.