Sharepoint navigation flyouts
Why sharepoint, why.
Ok so it turns out that the navigation inside of sharepoint, which uses ASP:Menu to generate it's code, makes a ton of tables and is generally a mess to deal with. But it is nice to try to keep things as much out of the box as possible so i left it alone and used the menu.
Untill i tried to add divs to the page.
The sharepoint menu, for the life of me, i could not force to go above my divs on my webpages. I encased it in a div, set it to 5, 9999, 255, 13 nothing! Changed the css code so it was all over 10, still nothing.
Then google chrome came to the rescue, it told me that the div that holds the flyout menu's z-index was set to 1, inline.
Inline?! i check the code, nope, i do not see that it is set, there isn't even any style="" tag at all. Then i realized, it was the javascript.
I never did bother to fully trace it but in sharepoint's javascript, it changes the div's z-index to be 1. No matter what you do, it will be changed to 1, and only 1.
Simple fix, set everything on your page, and i mean everything, to 0. Vola, the page now shows.
Lession learned: If you want to stick with the built in sharepoint menu, keep all of your div's z-index below 1. If you dont care about sticking to OOB, check out radmenu or cssadapters, your life will be much much better if you do.
Ok so it turns out that the navigation inside of sharepoint, which uses ASP:Menu to generate it's code, makes a ton of tables and is generally a mess to deal with. But it is nice to try to keep things as much out of the box as possible so i left it alone and used the menu.
Untill i tried to add divs to the page.
The sharepoint menu, for the life of me, i could not force to go above my divs on my webpages. I encased it in a div, set it to 5, 9999, 255, 13 nothing! Changed the css code so it was all over 10, still nothing.
Then google chrome came to the rescue, it told me that the div that holds the flyout menu's z-index was set to 1, inline.
Inline?! i check the code, nope, i do not see that it is set, there isn't even any style="" tag at all. Then i realized, it was the javascript.
I never did bother to fully trace it but in sharepoint's javascript, it changes the div's z-index to be 1. No matter what you do, it will be changed to 1, and only 1.
Simple fix, set everything on your page, and i mean everything, to 0. Vola, the page now shows.
Lession learned: If you want to stick with the built in sharepoint menu, keep all of your div's z-index below 1. If you dont care about sticking to OOB, check out radmenu or cssadapters, your life will be much much better if you do.
Comments