We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
  • Pages:
  • 1
  • 3
[ C ] [jquery] drop down into drop up menu
Topic Started: Apr 20 2013, 03:18 PM (3,785 Views)
adasiax
Member
[ * ]
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.
Offline Profile Goto Top
 
Moonface
Member Avatar


This topic has the answer to your question: http://if.invisionfree.com/topic/5166434/1
Offline Profile Goto Top
 
adasiax
Member
[ * ]
I've seen this topic, but when i put bottom: 98%; value into #jMenu section the result is nothing ;/
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
top:-305px;
You have to use !important to override the inline style:
Code:
 
top:-305px !important;
Offline Profile Goto Top
 
adasiax
Member
[ * ]
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 ^^ ;/
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
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',
Offline Profile Goto Top
 
adasiax
Member
[ * ]
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?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Can I see a link to your board or at least the HTML and JavaScript?
Offline Profile Goto Top
 
adasiax
Member
[ * ]
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);
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Does it have the gap between the main menu and sub-menu?

Posted Image
Offline Profile Goto Top
 
adasiax
Member
[ * ]
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.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try -163px instead of -186px.
Offline Profile Goto Top
 
adasiax
Member
[ * ]
i think the gap dissapear, but the problem with auto-hiding is still accouring ;/
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
What browser are you using?
Offline Profile Goto Top
 
adasiax
Member
[ * ]
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.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
ZetaBoards - Free Forum Hosting
Create your own social network with a free forum.
Go to Next Page
« Previous Topic · Closed Requests · Next Topic »
Locked Topic
  • Pages:
  • 1
  • 3