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 […]
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);
hi
I have a problem when I add an anchor, how can we fix that?
I just followed the minustalent code sample and it works 😀 thanks
Codrops uses cookies for its advertisement solutions and for analytics. We hope you're ok with this, but you can opt-out if you wish. Read our Privacy Policy and Cookie Policy. OK
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
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;
}
hi
I have a problem when I add an anchor, how can we fix that?
I just followed the minustalent code sample and it works 😀 thanks