|
[ C ] [jquery] drop down into drop up menu
|
|
Topic Started: Apr 20 2013, 03:18 PM (3,783 Views)
|
|
adasiax
|
Apr 20 2013, 03:18 PM
Post #1
|
- Posts:
- 15
- Group:
- Members
- Member
- #608,373
- Joined:
- April 20, 2013
|
I want to change my drop down menu into drop up and i spent hours in changing this css with no result...;/ Maybe someone have ide how to change it?
- Code: HTML
-
#jMenu { display:table; margin:0; padding:0; bottom:305px ; position:relative; }
/********************/ /** premier niveau **/ /********************/ #jMenu li { display:table-cell; float:left; margin: 0; padding: 0; border: 0; display: block; float: left; /* move all main list items into one row, by floating them */ position: relative; /* position each LI, thus creating potential IE.win overlap problem */ z-index: 5; background:#000; } #jMenu li a { padding:10px; display:block; background-color: transparent; color:#fff; text-transform:uppercase; cursor:pointer; font-size:12px; } /*******************/ /** second niveau **/ /*******************/ #jMenu li ul { display:none; position:absolute; padding:0; margin: -163px 0 0 ;
} #jMenu li ul li { background-color:#322f32; display:block; padding:0; position:relative; } #jMenu li ul li.arrow { background:#322f32 url('../arrow_down.png') no-repeat center center; height:6px; padding:0; border-bottom:none; padding-bottom:10px } #jMenu li ul li a { font-size:11px; text-transform:none; padding:7px; display:block; position:relative; } #jMenu li ul li a.isParent { background:#3A3A3A url('../arrow_right.png') no-repeat right center; } #jMenu li ul li a:hover { background-color:#514c52; border-top:1px solid #322f32; border-bottom:98%; } }
Edited by adasiax, Apr 22 2013, 08:26 AM.
|
|
|
| |
|
Moonface
|
Apr 20 2013, 03:28 PM
Post #2
|
- Posts:
- 8,583
- Group:
- Support Team
- Member
- #133,038
- Joined:
- October 17, 2006
- I'm Browsing With
- Chrome
- My Board URL
- http://universalgaming.net
|
This topic has the answer to your question: http://if.invisionfree.com/topic/5166434/1
|
|
|
| |
|
adasiax
|
Apr 20 2013, 03:38 PM
Post #3
|
- Posts:
- 15
- Group:
- Members
- Member
- #608,373
- Joined:
- April 20, 2013
|
I've seen this topic, but when i put bottom: 98%; value into #jMenu section the result is nothing ;/
|
|
|
| |
|
Cory
|
Apr 20 2013, 10:36 PM
Post #4
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
- Code:
-
top:-305px; You have to use !important to override the inline style:- Code:
-
top:-305px !important;
|
|
|
| |
|
adasiax
|
Apr 21 2013, 03:00 AM
Post #5
|
- Posts:
- 15
- Group:
- Members
- Member
- #608,373
- Joined:
- April 20, 2013
|
Well, when i override this style the only change is that the menu is sliding from the top of the page while the main menu is for example in the middle ^^ ;/
|
|
|
| |
|
Cory
|
Apr 21 2013, 03:16 AM
Post #6
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
So the positioning is correct now, but the sliding is not?
If the absolute positioning is doing odd stuff, you could try a negative margin:- Code:
-
#jMenu li ul { margin: -186px 0 0; } That should be fine for the sub-menu, but not the sub-sub-menu. You would have to change the margin for each sub-menu level.
If you're wanting the sub-menu to drop up instead of down, I would change slide to fade in the script:- Code:
-
effectTypeOpen : 'slide',
|
|
|
| |
|
adasiax
|
Apr 21 2013, 03:37 AM
Post #7
|
- Posts:
- 15
- Group:
- Members
- Member
- #608,373
- Joined:
- April 20, 2013
|
Well the effect is almost correct!! but when i point the mouse on menu it's sliding up but then rapidly closing;/ What could be wrong?
|
|
|
| |
|
Cory
|
Apr 21 2013, 03:40 AM
Post #8
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
Can I see a link to your board or at least the HTML and JavaScript?
|
|
|
| |
|
adasiax
|
Apr 21 2013, 03:43 AM
Post #9
|
- Posts:
- 15
- Group:
- Members
- Member
- #608,373
- Joined:
- April 20, 2013
|
HTML:
- Code: HTML
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Plugin JQuery Menu v1.6</title> <meta http-equiv="description" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="jquery/jMenu.jquery.css" type="text/css" />
</head> <body> <br><br><br><br><br><br><br><br><br><br><br><br> <ul id="jMenu"> <li><a class="fNiv">Category 1</a> <ul> <li class="arrow"></li> <li><a>Category 1.2</a> <ul> <li><a>Category 1.3</a></li> <li><a>Category 1.3</a></li> <li><a>Category 1.3</a></li> <li><a>Category 1.3</a></li> <li><a>Category 1.3</a> <ul> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a> <ul> <li><a>Category 1.5</a></li> <li><a>Category 1.5</a></li> <li><a>Category 1.5</a> <ul> <li><a>Category 1.6</a></li> <li><a>Category 1.6</a></li> <li><a>Category 1.6</a></li> <li><a>Category 1.6</a></li> <li><a>Category 1.6</a></li> </ul> </li> </ul> </li> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a></li> </ul> </li> <li><a>Category 1.3</a></li> </ul> </li> <li><a>Category 1.2</a></li> <li><a>Category 1.2</a> <ul> <li><a>Category 1.3</a></li> <li><a>Category 1.3</a> <ul> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a></li> <li><a>Category 1.4</a></li> </ul> </li> </ul> </li> <li><a>Category 1.2</a></li> </ul> </li> <li><a class="fNiv">Category 2</a> <ul> <li class="arrow"></li> <li><a>Category 2.2</a> <ul> <li><a>Category 2.3</a></li> <li><a>Category 2.3</a></li> </ul> </li> <li><a>Category 2.2</a> <ul> <li><a>Category 2.3</a></li> <li><a>Category 2.3</a></li> <li><a>Category 2.3</a></li> </ul> </li> <li><a>Category 2.2</a> <ul> <li><a>Category 2.3</a></li> <li><a>Category 2.3</a></li> <li><a>Category 2.3</a></li> <li><a>Category 2.3</a></li> <li><a>Category 2.3</a></li> <li><a>Category 2.3</a></li> </ul> </li> <li><a>Category 2.2</a></li> </ul> </li> <li><a class="fNiv">Category 3</a> <ul> <li class="arrow"></li> <li><a>Category 3.2</a> <ul> <li><a>Category 3.3</a></li> <li><a>Category 3.3</a></li> <li><a>Category 3.3</a></li> <li><a>Category 3.3</a></li> <li><a>Category 3.3</a></li> <li><a>Category 3.3</a></li> <li><a>Category 3.3</a></li> </ul> </li> <li><a>Category 3.2</a> <ul> <li><a>Category 3.3</a></li> <li><a>Category 3.3</a></li> </ul> </li> <li><a>Category 3.2</a></li> <li><a>Category 3.2</a></li> </ul> </li> <li><a class="fNiv">Category 4</a> <ul> <li class="arrow"></li> <li><a>Category 4.2</a></li> <li><a>Category 4.2</a></li> <li><a>Category 4.2</a> <ul> <li><a>Category 4.3</a></li> <li><a>Category 4.3</a></li> <li><a>Category 4.3</a></li> <li><a>Category 4.3</a></li> </ul> </li> <li><a>Category 4.2</a></li> </ul> </li> <li><a class="fNiv">Category 5</a> <ul> <li class="arrow"></li> <li><a>Category 5.2</a> <ul> <li><a>Category 5.3</a></li> <li><a>Category 5.3</a></li> <li><a>Category 5.3</a></li> <li><a>Category 5.3</a></li> </ul> </li> <li><a>Category 5.2</a></li> <li><a>Category 5.2</a></li> <li><a>Category 5.2</a></li> </ul> </li> <li><a class="fNiv">Category 6</a></li> <li><a class="fNiv">Category 7</a> <ul> <li class="arrow"></li> <li><a>Category 7.2</a></li> <li><a>Category 7.2</a></li> <li><a>Category 7.2</a></li> <li><a>Category 7.2</a></li> </ul> </li> </ul>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jMenu.jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#jMenu").jMenu(); }) </script>
</body> </html>
JS:
- Code:
-
(function(b,c){b('*').hover(function(){b(this).data(c,1)},function(){b(this).data(c,0)}).data(c,0);b[c]=function(a){return b(a)[c]()};b.fn[c]=function(a){a=0;b(this).each(function(){a+=b(this).data(c)});return a>0}})(jQuery,'isHovered');
/** jMenu Plugin **/ (function($){
$.jMenu = { /**************/ /** OPTIONS **/ /**************/ defaults: { ulWidth : 'auto', absoluteTop : 35, absoluteLeft : 0, effects : { effectSpeedOpen : 300, effectSpeedClose : 300, effectTypeOpen : 'slide', effectTypeClose : 'slide', effectOpen : 'linear', effectClose : 'linear' }, TimeBeforeOpening : 200, TimeBeforeClosing : 200, animatedText : false, paddingLeft: 7 }, /*****************/ /** Init Method **/ /*****************/ init:function(options){ /* vars **/ opts = $.extend({}, $.jMenu.defaults, options); $("#jMenu a:not(.fNiv)").each(function(){ var $thisChild = $(this); /* Add css - arrow right */ if($.jMenu._IsParent($thisChild)) $thisChild.addClass('isParent'); /* Add the animation on hover **/ if(opts.animatedText) $.jMenu._animateText($thisChild); /* Actions on hover */ $thisChild.bind({ mouseover:function(){ $.jMenu._hide($thisChild); $.jMenu._showNextChild($thisChild); } }); }); /* Actions on parents links */ $('#jMenu li a.fNiv').bind({ mouseover:function(){ var $this = $(this); var $child = $this.next(); ULWidth = $.jMenu._returnUlWidth($this); $.jMenu._closeList($("#jMenu ul")); if($child.is(':hidden')) $.jMenu._showFirstChild($this); } }); /* Close all when mouse leaves */ $('#jMenu').bind({ mouseleave : function(){ setTimeout(function(){$.jMenu._closeAll();},opts.TimeBeforeClosing); } }); }, /**************************** ***************************** jMenu Methods Below ***************************** ****************************/ /** Show the First Child Lists **/ _showFirstChild:function(el){ if($.jMenu._IsParent(el)) { var SecondList = el.next(); if(SecondList.is(":hidden")) { var position = el.position(); SecondList .css({ top : position.top + opts.absoluteTop, left : position.left + opts.absoluteLeft, width : ULWidth }) .children().css({ width: ULWidth }); $.jMenu._show(SecondList); } } else return false; }, /** Show all others Child lists except the first list **/ _showNextChild:function(el){ if($.jMenu._IsParent(el)) { var ChildList = el.next(); if(ChildList.is(":hidden")) { var position = el.position(); ChildList .css({ top : position.top, left : position.left + ULWidth, width : ULWidth }) .children().css({ width:ULWidth }); $.jMenu._show(ChildList); } } else return false; }, /**************************************/ /** Short Methods - Generals actions **/ /**************************************/ _hide:function(el){ if($.jMenu._IsParent(el) && !el.next().is(':hidden')) $.jMenu._closeList(el.next()); else if(($.jMenu._IsParent(el) && el.next().is(':hidden')) || !$.jMenu._IsParent(el)) $.jMenu._closeList(el.parent().parent().find('ul')); else return false; }, _show:function(el) { switch(opts.effects.effectTypeOpen) { case 'slide': el.stop(true, true).delay(opts.TimeBeforeOpening).slideDown(opts.effects.effectSpeedOpen, opts.effects.effectOpen); break; case 'fade': el.stop(true, true).delay(opts.TimeBeforeOpening).fadeIn(opts.effects.effectSpeedOpen, opts.effects.effectOpen); break; default : el.stop(true, true).delay(opts.TimeBeforeOpening).show(opts.effects.effectSpeedOpen, opts.effects.effectOpen); } }, _closeList:function(el) { switch(opts.effects.effectTypeClose) { case 'slide': el.slideUp(opts.effects.effectSpeedClose, opts.effects.effectClose); break; case 'fade': el.fadeOut(opts.effects.effectSpeedClose, opts.effects.effectClose); break; default : el.hide(opts.effects.effectSpeedClose, opts.effects.effectClose); } }, _closeAll:function(){ if(!$('#jMenu').isHovered()) { $('#jMenu ul').each(function(){ $.jMenu._closeList($(this)); }); } }, _IsParent:function(el) { if(el.next().is('ul')) return true; else return false; }, _returnUlWidth:function(el) { switch(opts.ulWidth) { case "auto" : ULWidth = parseInt(el.parent().outerWidth()); break; default : ULWidth = parseInt(opts.ulWidth); } return ULWidth; }, _animateText:function(el) { var paddingInit = parseInt(el.css('padding-left')); el.hover(function(){ $(this) .stop(true,true) .animate({ paddingLeft: paddingInit + opts.paddingLeft }, 100); }, function(){ $(this) .stop(true,true) .animate({ paddingLeft:paddingInit }, 100); }); }, _isReadable:function(){ if($("a.fNiv").length > 0) return true; else return false; }, _error:function(){ alert('Please, check you have the \'.fNiv\' class on your first level links.'); } }; jQuery.fn.jMenu = function(options){ if($.jMenu._isReadable()) $.jMenu.init(options); else $.jMenu._error(); }; })(jQuery);
|
|
|
| |
|
Cory
|
Apr 21 2013, 03:50 AM
Post #10
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
Does it have the gap between the main menu and sub-menu?
|
|
|
| |
|
adasiax
|
Apr 21 2013, 07:38 AM
Post #11
|
- Posts:
- 15
- Group:
- Members
- Member
- #608,373
- Joined:
- April 20, 2013
|
Yes, but the main problem is that when the menu scrolled it's automaticly scroling back ^^ ;/
Edited by adasiax, Apr 21 2013, 07:42 AM.
|
|
|
| |
|
Cory
|
Apr 21 2013, 07:45 AM
Post #12
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
Try -163px instead of -186px.
|
|
|
| |
|
adasiax
|
Apr 21 2013, 07:48 AM
Post #13
|
- Posts:
- 15
- Group:
- Members
- Member
- #608,373
- Joined:
- April 20, 2013
|
i think the gap dissapear, but the problem with auto-hiding is still accouring ;/
|
|
|
| |
|
Cory
|
Apr 21 2013, 07:50 AM
Post #14
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
What browser are you using?
|
|
|
| |
|
adasiax
|
Apr 21 2013, 07:51 AM
Post #15
|
- Posts:
- 15
- Group:
- Members
- Member
- #608,373
- Joined:
- April 20, 2013
|
Mozilla, but you don't have this problem? on your browser everything is ok? you can easly chose the submenus? Ha! on Opera it's seems to be good ;oo but te submenus are occuring way to high Hmm, you have idea how to fix this?
Edited by adasiax, Apr 21 2013, 08:55 AM.
|
|
|
| |
| 1 user reading this topic (1 Guest and 0 Anonymous)
|