[jQuery] Re: ie6/Z superfish navbar li submenu always above ul subsubmenu
Hi, Thank you for your answer. Yes, I also think it has nothing to do with Z-Index but with the position: relative of the li elements and the absoulte position of the submenu ul. But I think my space is big enough my Problem is not the mainmenu but the submenu it opens in a navbar (850px width) and when there are too many items in it there are two rows of items. And when I then hover over an item in the first row the submenu ul alyways apears behind the li item in the second row. So what I need is a Idea to bring the absoulte ul above the relative li element. On 8 Jul., 18:37, Charlie charlie...@gmail.com wrote: if your main menu items don't fit into space allowed and you force them into wrapping to multiple levels, a different design approach migtht be in order? the position :rel has to be there for absolute position to use as reference location problem has nothing to do with z-index in my opinion, you're expecting too much in too little space.Seeing the live situation may help, can you post a link? nico wrote:Hi, I have a problem with the superfish menu in navbar mode and ie6/7. The first submenu items are in a full width row. If there are lots of subitems i get two rows. If an item in the first row has a submenu it opens as dropdown (200px width) right below the item. This works good in all browser except in ie6/7. Here I have the problem that the li submenu navbar item in the second row appears always above the dropdown if it opens from an item in the first row. Thats because the li items in the navbar are positition relative and the ul of the dropdown is absolute, so the li pos.:rel. is always above ul pos. absol. no matter what z-indexes are given. You can see the effect on the official demo sitehttp://users.tpg.com.au/j_birch/plugins/superfish/#examplesJust bring the Browser Window widht to 300px so that the demo menu has two menuitem in the row and two rows, hover over the first mainmenu item and you see just 3 submenuitems instead of 4 (because the first submenu item is hidden behind the second mainmenu row.) Do you know this issue and any workarounds? btw. superfish is awsome!
[jQuery] Re: ie6/Z superfish navbar li submenu always above ul subsubmenu
Following concept would allow the subs of second row to open below that row. This is untested but should be relatively easy to implement Add a class to the wrapped li's forming 2nd row then create a different css position rule for sub ul of that class based on height of the navbar li's. The offset would be double the value currently used for the sub ul . Default is 2.5em, so try 5em or adjust accordingly based on css you've modified Again, posting a test case would be very helpful. Your original suggestion of making browser go to 300px wide was very misleading as to actual situation nico wrote: Hi, Thank you for your answer. Yes, I also think it has nothing to do with Z-Index but with the position: relative of the li elements and the absoulte position of the submenu ul. But I think my space is big enough my Problem is not the mainmenu but the submenu it opens in a navbar (850px width) and when there are too many items in it there are two rows of items. And when I then hover over an item in the first row the submenu ul alyways apears behind the li item in the second row. So what I need is a Idea to bring the absoulte ul above the relative li element. On 8 Jul., 18:37, Charlie charlie...@gmail.com wrote: if your main menu items don't fit into space allowed and you force them into wrapping to multiple levels, a different design approach migtht be in order? the position :rel has to be there for absolute position to use as reference location problem has nothing to do with z-index in my opinion, you're expecting too much in too little space.Seeing the live situation may help, can you post a link? nico wrote:Hi, I have a problem with the superfish menu in navbar mode and ie6/7. The first submenu items are in a full width row. If there are lots of subitems i get two rows. If an item in the first row has a submenu it opens as dropdown (200px width) right below the item. This works good in all browser except in ie6/7. Here I have the problem that the li submenu navbar item in the second row appears always above the dropdown if it opens from an item in the first row. Thats because the li items in the navbar are positition relative and the ul of the dropdown is absolute, so the li pos.:rel. is always above ul pos. absol. no matter what z-indexes are given. You can see the effect on the official demo sitehttp://users.tpg.com.au/j_birch/plugins/superfish/#examplesJust bring the Browser Window widht to 300px so that the demo menu has two menuitem in the row and two rows, hover over the first mainmenu item and you see just 3 submenuitems instead of 4 (because the first submenu item is hidden behind the second mainmenu row.) Do you know this issue and any workarounds? btw. superfish is awsome!
[jQuery] Re: ie6/Z superfish navbar li submenu always above ul subsubmenu
another thought, can also do this programatically using the
onBeforeShow option. Same idea, add a class to the wrapped ul's .
onBeforeShow: function(){
if ($(this).hasClass("secondRowClass")) {
$(this).css("top","5em");
}
Again, untested but I have used this method to do realignments and
animations before. Either of these solutions is workable
Charlie wrote:
Following concept
would allow the subs of second row to open below that
row. This is untested but should be relatively easy to implement
Add a class to the wrapped li's forming 2nd row then create a different
css position rule for sub ul of that class based on height of the
navbar li's. The offset would be double the value currently used for
the sub ul . Default is 2.5em, so try 5em or adjust accordingly based
on css you've modified
Again, posting a test case would be very helpful. Your original
suggestion of making browser go to 300px wide was very misleading as to
actual situation
nico wrote:
Hi,
Thank you for your answer.
Yes, I also think it has nothing to do with Z-Index but with the
position: relative of the li elements and the absoulte position of the
submenu ul.
But I think my space is big enough my Problem is not the mainmenu but
the submenu it opens in a navbar (850px width) and when there are too
many items in it there are two rows of items. And when I then hover
over an item in the first row the submenu ul alyways apears behind the
li item in the second row.
So what I need is a Idea to bring the absoulte ul above the relative
li element.
On 8 Jul., 18:37, Charlie charlie...@gmail.com wrote:
if your main menu items don't fit into space allowed and you force them into wrapping to multiple levels, a different design approach migtht be in order?
the position :rel has to be there for absolute position to use as reference location
problem has nothing to do with z-index in my opinion, you're expecting too much in too little space.Seeing the live situation may help, can you post a link?
nico wrote:Hi, I have a problem with the superfish menu in navbar mode and ie6/7. The first submenu items are in a full width row. If there are lots of subitems i get two rows. If an item in the first row has a submenu it opens as dropdown (200px width) right below the item. This works good in all browser except in ie6/7. Here I have the problem that the li submenu navbar item in the second row appears always above the dropdown if it opens from an item in the first row. Thats because the li items in the navbar are positition relative and the ul of the dropdown is absolute, so the li pos.:rel. is always above ul pos. absol. no matter what z-indexes are given. You can see the effect on the official demo sitehttp://users.tpg.com.au/j_birch/plugins/superfish/#examplesJust bring the Browser Window widht to 300px so that the demo menu has two menuitem in the row and two rows, hover over the first mainmenu item and you see just 3 submenuitems instead of 4 (because the first submenu
item is hidden behind the second mainmenu row.) Do you know this issue and any workarounds? btw. superfish is awsome!
[jQuery] Re: ie6/Z superfish navbar li submenu always above ul subsubmenu
Hi Charlie,
Thanks again for your ideas, if theres no other way I maybe let the
subsubmenu ul obens also in a navbar 850px widht right under the first
navbar.
ok, here is an example of the superfish menu.
http://www.premioweb.eu/jobs/
hover over mainmenu item01 - submenuitem01
you see in ie6/7 this leads to my problem.
On 9 Jul., 13:43, Charlie charlie...@gmail.com wrote:
another thought, can also do this programatically using the onBeforeShow
option. Same idea, add a class to the wrapped ul's .
onBeforeShow: function(){
if ($(this).hasClass(secondRowClass)) {
$(this).css(top,5em);
}
Again, untested but I have used this method to do realignments and animations
before. Either of these solutions is workable
Charlie wrote:Following concept would allow the subs of second row to open
below that row. This is untested but should be relatively easy to implement
Add a class to the wrapped li's forming 2nd row then create a different css
position rule for sub ul of that class based on height of the navbar li's.
The offset would be double the value currently used for the sub ul . Default
is 2.5em, so try 5em or adjust accordingly based on css you've modified
Again, posting a test case would be very helpful. Your original suggestion of
making browser go to 300px wide was very misleading as to actual situation
nico wrote:Hi, Thank you for your answer. Yes, I also think it has nothing to
do with Z-Index but with the position: relative of the li elements and the
absoulte position of the submenu ul. But I think my space is big enough my
Problem is not the mainmenu but the submenu it opens in a navbar (850px
width) and when there are too many items in it there are two rows of items.
And when I then hover over an item in the first row the submenu ul alyways
apears behind the li item in the second row. So what I need is a Idea to
bring the absoulte ul above the relative li element. On 8 Jul., 18:37,
Charliecharlie...@gmail.comwrote:if your main menu items don't fit into
space allowed and you force them into wrapping to multiple levels, a
different design approach migtht be in order? the position :rel has to be
there for absolute position to use as reference location problem has nothing
to do with z-index in my opinion, you're expecting too much in too little
space.Seeing the live situation may help, can you post a link? nico wrote:Hi,
I have a problem with the superfish menu in navbar mode and ie6/7. The first
submenu items are in a full width row. If there are lots of subitems i get
two rows. If an item in the first row has a submenu it opens as dropdown
(200px width) right below the item. This works good in all browser except in
ie6/7. Here I have the problem that the li submenu navbar item in the second
row appears always above the dropdown if it opens from an item in the first
row. Thats because the li items in the navbar are positition relative and the
ul of the dropdown is absolute, so the li pos.:rel. is always above ul pos.
absol. no matter what z-indexes are given. You can see the effect on the
official demo
sitehttp://users.tpg.com.au/j_birch/plugins/superfish/#examplesJust bring the
Browser Window widht to 300px so that the demo menu has two menuitem in the
row and two rows, hover over the first mainmenu item and you see just 3
submenuitems instead of 4 (because the first submenu item is hidden behind
the second mainmenu row.) Do you know this issue and any workarounds? btw.
superfish is awsome!
[jQuery] Re: ie6/Z superfish navbar li submenu always above ul subsubmenu
situation is not unexpected. Subs of navbar have no way to know the
navbar subs are wrapping so the position they take is based on height
of one li , which is really height of a since it is block and
typically fills the whole li
so long as you can find way to add a class to wrapped row li's you
should be able to apply what I suggested.
nico wrote:
Hi Charlie,
Thanks again for your ideas, if theres no other way I maybe let the
subsubmenu ul obens also in a navbar 850px widht right under the first
navbar.
ok, here is an example of the superfish menu.
http://www.premioweb.eu/jobs/
hover over mainmenu item01 - submenuitem01
you see in ie6/7 this leads to my problem.
On 9 Jul., 13:43, Charlie charlie...@gmail.com wrote:
another thought, can also do this programatically using the onBeforeShow option. Same idea, add a class to the wrapped ul's .
onBeforeShow: function(){
if ($(this).hasClass("secondRowClass")) {
$(this).css("top","5em");
}
Again, untested but I have used this method to do realignments and animations before. Either of these solutions is workable
Charlie wrote:Following concept would allow the subs of second row to open below that row. This is untested but should be relatively easy to implement
Add a class to the wrapped li's forming 2nd row then create a different css position rule for sub ul of that class based on height of the navbar li's. The offset would be double the value currently used for the sub ul . Default is 2.5em, so try 5em or adjust accordingly based on css you've modified
Again, posting a test case would be very helpful. Your original suggestion of making browser go to 300px wide was very misleading as to actual situation
nico wrote:Hi, Thank you for your answer. Yes, I also think it has nothing to do with Z-Index but with the position: relative of the li elements and the absoulte position of the submenu ul. But I think my space is big enough my Problem is not the mainmenu but the submenu it opens in a navbar (850px width) and when there are too many items in it there are two rows of items. And when I then hover over an item in the first row the submenu ul alyways apears behind the li item in the second row. So what I need is a Idea to bring the absoulte ul above the relative li element. On 8 Jul., 18:37, Charliecharlie...@gmail.comwrote:if your main menu items don't fit into space allowed and you force them into wrapping to multiple levels, a different design approach migtht be in order? the position :rel has to be there for absolute position to use as reference location problem has nothing to do with z-index in
my opinion, you're expecting too much in too little space.Seeing the live situation may help, can you post a link? nico wrote:Hi, I have a problem with the superfish menu in navbar mode and ie6/7. The first submenu items are in a full width row. If there are lots of subitems i get two rows. If an item in the first row has a submenu it opens as dropdown (200px width) right below the item. This works good in all browser except in ie6/7. Here I have the problem that the li submenu navbar item in the second row appears always above the dropdown if it opens from an item in the first row. Thats because the li items in the navbar are positition relative and the ul of the dropdown is absolute, so the li pos.:rel. is always above ul pos. absol. no matter what z-indexes are given. You can see the effect on the official demo sitehttp://users.tpg.com.au/j_birch/plugins/superfish/#examplesJust bring the Browser Window widht to 300px so that the demo menu has two menuitem in the row and tw
o rows, hover over the first mainmenu item and you see just 3 submenuitems instead of 4 (because the first submenu item is hidden behind the second mainmenu row.) Do you know this issue and any workarounds? btw. superfish is awsome!
[jQuery] Re: ie6/Z superfish navbar li submenu always above ul subsubmenu
looked closer in IE,,,see problem closer now, where 2nd row shows
through subs of 1st row. Yup, you got a problem. Not sure how to
resolve that part, I was only thinking originally of the subs of 2nd row
nico wrote:
Hi Charlie,
Thanks again for your ideas, if theres no other way I maybe let the
subsubmenu ul obens also in a navbar 850px widht right under the first
navbar.
ok, here is an example of the superfish menu.
http://www.premioweb.eu/jobs/
hover over mainmenu item01 - submenuitem01
you see in ie6/7 this leads to my problem.
On 9 Jul., 13:43, Charlie charlie...@gmail.com wrote:
another thought, can also do this programatically using the onBeforeShow option. Same idea, add a class to the wrapped ul's .
onBeforeShow: function(){
if ($(this).hasClass("secondRowClass")) {
$(this).css("top","5em");
}
Again, untested but I have used this method to do realignments and animations before. Either of these solutions is workable
Charlie wrote:Following concept would allow the subs of second row to open below that row. This is untested but should be relatively easy to implement
Add a class to the wrapped li's forming 2nd row then create a different css position rule for sub ul of that class based on height of the navbar li's. The offset would be double the value currently used for the sub ul . Default is 2.5em, so try 5em or adjust accordingly based on css you've modified
Again, posting a test case would be very helpful. Your original suggestion of making browser go to 300px wide was very misleading as to actual situation
nico wrote:Hi, Thank you for your answer. Yes, I also think it has nothing to do with Z-Index but with the position: relative of the li elements and the absoulte position of the submenu ul. But I think my space is big enough my Problem is not the mainmenu but the submenu it opens in a navbar (850px width) and when there are too many items in it there are two rows of items. And when I then hover over an item in the first row the submenu ul alyways apears behind the li item in the second row. So what I need is a Idea to bring the absoulte ul above the relative li element. On 8 Jul., 18:37, Charliecharlie...@gmail.comwrote:if your main menu items don't fit into space allowed and you force them into wrapping to multiple levels, a different design approach migtht be in order? the position :rel has to be there for absolute position to use as reference location problem has nothing to do with z-index in
my opinion, you're expecting too much in too little space.Seeing the live situation may help, can you post a link? nico wrote:Hi, I have a problem with the superfish menu in navbar mode and ie6/7. The first submenu items are in a full width row. If there are lots of subitems i get two rows. If an item in the first row has a submenu it opens as dropdown (200px width) right below the item. This works good in all browser except in ie6/7. Here I have the problem that the li submenu navbar item in the second row appears always above the dropdown if it opens from an item in the first row. Thats because the li items in the navbar are positition relative and the ul of the dropdown is absolute, so the li pos.:rel. is always above ul pos. absol. no matter what z-indexes are given. You can see the effect on the official demo sitehttp://users.tpg.com.au/j_birch/plugins/superfish/#examplesJust bring the Browser Window widht to 300px so that the demo menu has two menuitem in the row and tw
o rows, hover over the first mainmenu item and you see just 3 submenuitems instead of 4 (because the first submenu item is hidden behind the second mainmenu row.) Do you know this issue and any workarounds? btw. superfish is awsome!
