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
  • 2
[ C ] [jquery] drop down into drop up menu
Topic Started: Apr 20 2013, 03:18 PM (3,786 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
 
Replies:
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
I'm creating a new one for you.
Offline Profile Goto Top
 
adasiax
Member
[ * ]
:))))
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
HTML:
Code:
 
<ul id="menu">
<li><a href="">Link</a>
<ul>
<li><a href="">Sub-Link</a>
<ul>
<li><a href="">Sub-Sub-Link</a></li>
<li><a href="">Sub-Sub-Link</a></li>
<li><a href="">Sub-Sub-Link</a></li>
</ul>
</li>
<li><a href="">Sub-Link</a></li>
<li><a href="">Sub-Link</a>
<ul>
<li><a href="">Sub-Sub-Link</a></li>
<li><a href="">Sub-Sub-Link</a></li>
<li><a href="">Sub-Sub-Link</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Link</a>
<ul>
<li><a href="">Sub-Link</a></li>
<li><a href="">Sub-Link</a>
<ul>
<li><a href="">Sub-Sub-Link</a></li>
<li><a href="">Sub-Sub-Link</a></li>
<li><a href="">Sub-Sub-Link</a></li>
</ul>
</li>
<li><a href="">Sub-Link</a></li>
</ul>
</li>
<li><a href="">Link</a>
<ul>
<li><a href="">Sub-Link</a></li>
<li><a href="">Sub-Link</a>
<ul>
<li><a href="">Sub-Sub-Link</a></li>
<li><a href="">Sub-Sub-Link</a></li>
<li><a href="">Sub-Sub-Link</a></li>
</ul>
</li>
<li><a href="">Sub-Link</a></li>
</ul>
</li>
<li><a href="">Link</a>
<ul>
<li><a href="">Sub-Link</a></li>
<li><a href="">Sub-Link</a></li>
<li><a href="">Sub-Link</a>
<ul>
<li><a href="">Sub-Sub-Link</a></li>
<li><a href="">Sub-Sub-Link</a></li>
<li><a href="">Sub-Sub-Link</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Link</a>
<ul>
<li><a href="">Sub-Link</a></li>
<li><a href="">Sub-Link</a></li>
<li><a href="">Sub-Link</a></li>
</ul>
</li>
<li><a href="">Link</a></li>
<li><a href="">Link</a>
<ul>
<li><a href="">Sub-Link</a></li>
<li><a href="">Sub-Link</a></li>
<li><a href="">Sub-Link</a></li>
</ul>
</li>
</ul>
CSS:
Code:
 
#menu {
padding: 0;
margin: 10px;
font-size: 0;
}

#menu li {
display: inline-block;
padding: 0;
margin: 0;
font-size: 14px;
}

#menu li a {
color: #FFF;
display: inline-block;
background: #000;
width: 100px;
height: 25px;
line-height: 25px;
text-align: center;
}

#menu li a:hover {
background: #53585E;
}

#menu li.sub > a {
background: #3A3C3F;
}

#menu ul {
display: none;
position: absolute;
left: 1px;
margin-top: 25px;
}

#menu li:hover > ul {
display: inline;
}

#menu ul li, #menu ul a {
display: block;
}

#menu ul > li > ul {
margin-left: 99px;
}

#menu li > ul > li > a {
position: relative;
z-index: 1;
}
JavaScript:
Code:
 
<script type="text/javascript">
//<![CDATA[
$('#menu ul ul').parent('li').addClass('sub');

$('#menu > li').hover(function () {
var index = $(this).index();
var position = index * 100 + 1;
$(this).find('> ul').css('left', position + 'px');
});

$('#menu > li > ul').each(function () {
var len = $(this).find('> li').length;
var margin = len * 25;
$(this).css('margin-top', '-' + margin + 'px');
});

$('#menu ul > li > ul').each(function () {
var len = $(this).find('> li').length;
var margin = len * 25;
$(this).css('margin-top', '-' + margin + 'px');
});
//]]>
</script>
Offline Profile Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
I believe jQuery is no longer going to work with the direct child filter at the start of a selector string , so where you have put `find('> li')` shuold be replaced with `children('li')`
Edited by Quozzo, Apr 21 2013, 10:08 AM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Thanks for the tip, I'll remember that.
Offline Profile Goto Top
 
adasiax
Member
[ * ]
Oh God ;p actually i need drop up menu with sliding option >.< and that is my goal ;p
sorry but drop down menu is useful for me ;p;/
Cory previous one was almost it! Only the submenus where displaying in wrong place ;/
Edited by adasiax, Apr 21 2013, 01:03 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Can I see a screenshot of what you're seeing?
Offline Profile Goto Top
 
adasiax
Member
[ * ]
ok , when i come back home i will sent immediately
Posted Image


As you can see the first menu is displaying correctly, but sub-menus don't :( Luckily all menus have a slide option, but i think something is still wrong in css which caused that sub-menus are displaying in wrong place ;/
Edited by adasiax, Apr 22 2013, 07:27 AM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Cory
Apr 21 2013, 03:16 AM
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.
For example:
Code:
 
#jMenu li ul ul {
margin: -100px 0 0;
}
Offline Profile Goto Top
 
adasiax
Member
[ * ]
Well i've been trying but with no effect ;/ it's working on your browser? The main question is what #jMenu... is answering to sub-submenus? ^^
Edited by adasiax, Apr 22 2013, 08:14 AM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Can you edit this post and this post with the updated codes you're using?
Offline Profile Goto Top
 
adasiax
Member
[ * ]
I've been editing only css so i've already updated it :)
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
I give up on jMenu. Every time I fix one error it causes another. Way too much JavaScript involved for my liking. I did get the one I created to slide up, but it had a slight error.
Offline Profile Goto Top
 
adasiax
Member
[ * ]
Well i think i know what is causing the problem, when the submenus aren't have the same number of labels, then they are spreading in different places, but put for example into category 2 -->


Code: HTML
 
<li width="400"><a class="fNiv" width="400">Category 2</a>
<ul>

<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>
<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>
<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>
then look the result
Edited by adasiax, Apr 22 2013, 09:50 AM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
I was having a different issue in the latest version of Firefox. When I hovered over a menu item the menu scrolled up, but then it disappeared instantly.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Closed Requests · Next Topic »
Locked Topic
  • Pages:
  • 1
  • 2