Popup layer to appear behind a sticky Nav bar

[Kirst]

Hi Ladies & Gents,

I am currently designing a web page for a client and I'd like some input/ help.

The client requested that I add images to the web page to represent different products and when you mouse over an image it will popup with another image over it showing the products description, which I have done. The only issue I'm having is that the nav bar is sticky at the top of the page and when you mouse over an image the popup layer pops up on top of the nav bar instead of behind. Is there any way I can get the popup layer to appear behind the nav bar?

I have tried putting the product description images in the MouseOver layer as well as made them popup layers but both show in front of the sticky nav bar.

I have attached a link to the demo page below.
https://www.swanplastics.co.za/demo/products.htm

Many Thanks.

[siran]

You could force the nav bar (in fact any stick to top element) to front by adding

<style>.xr_stt{z-index: 40 !important;}</style>

to the head code of the page. But then it would be in front of the logo that scrolls out. You would then have to force the logo to be 'more in front'.
Give it a name 'htmlclass=zi50' (without the quotes) and add some code to the above:

<style>.xr_stt{z-index: 40 !important;}.zi50{z-index: 50 !important;}</style>

[Acorn]

I appreciate siran's code but even I find it hard to fathom out what works with Xara's Sticky & Stick at Top functions.

My approach is still CSS but it bypasses the complexity by just fading the top image to reveal an under block.
In doing to, I removed the image that was part of your under presentation as the fade on the top image still shows some detail.
You can tune what is revealed by changing the percentages of the CSS in Website > HTML Code (head).

The image on the right probably will not work but I have included it anyhow as it is a no-code approach.
It uses a link, javascript:;, to avoid a jump to top when clicked.
This allows the top image to be shown again until you release the click or move off the image area.

CSS - SuperSwan.xar

Acorn

[Initiostar]

I followed Siran's code with a small twist; the telephone number (group) has a higher z-index than "xr_stt" and scrolls out of view to reveal the logo (which is stick-at-top) Stick V-top.xar

Seems to work OK - assumed all the images were popups in the example.

Gary

[Egg Bramhill]

Hi Kirst & welcome to TalkGraphics.

An alternative to doing as Siran, Acorn & Gary suggest is to place your images and pop-up layers below the MouseOff layer.

See the attached xar file.

[Acorn]

Hi Kirst & welcome to TalkGraphics.
An alternative to doing as Siran, Acorn & Gary suggest is to place your images and pop-up layers below the MouseOff layer.
See the attached xar file.

Egg, if you create MouseOverX & MouseOffX under your MouseOff and add links 'javascript:;' to each pair of images then you do not need a separate layer for each pop-up image:


Ignore the Show pop-up layer entry; it is not needed.

No code needed. Pure Xara.
I have include the MouseOver effect of Fade/Normal as Instant I consider to be too jarring.
I still use mine as I halve the image overhead and retain full control over effects.

Acorn

[Initiostar]

Not sure I get this answer. The OP has a stick-at-top Navbar, not a Sticky Navbar: https://www.swanplastics.co.za/demo/products.htm. The issue is that as an image slides under the Navbar, if you hover over that image, the underlying image, whether on a MouseOver or popup layer comes in front of the Navbar.



When I make the Navbar stick-at-top Kirst_Rework.xar I get the same error that the OP sees - in the OP example the underlying logo reveals itself and the telephone number scrolls out of view.

When I make the Navbar sticky (and place it on the top of the page); there is no issue, but the only way I can find with stick-at-top and match the OPs design is here: Stick V-top.xar

Gary

[Acorn]

Not sure I get this answer. The OP has a stick-at-top Navbar, not a Sticky Navbar: https://www.swanplastics.co.za/demo/products.htm. The issue is that as an image slides under the Navbar, if you hover over that image, the underlying image, whether on a MouseOver or popup layer comes in front of the Navbar.



When I make the Navbar stick-at-top Kirst_Rework.xar I get the same error that the OP sees - in the OP example the underlying logo reveals itself and the telephone number scrolls out of view.
When I make the Navbar sticky (and place it on the top of the page); there is no issue, but the only way I can find with stick-at-top and match the OPs design is here: Stick V-top.xar
Gary

Gary, good call. I failed to check Egg's offering and didn't spot the lack of SaT.

However, my CSS can handle text rolling over as well; it was not a case I had considered.
Simply use: <style> .under { z-index: -100; } </style>
You use Name htmlclass="under" such objects for anything that might touch the menubar.

For my original, removing surplus images and adding fuller image manipulation, my CSS becomes:

<style>
.reveal { transition: all 660ms ease-in-out; }
.reveal:hover { filter: opacity(20%) contrast(50%) saturate(50%) blur(3px); }
.reveal:active { filter: opacity(90%) contrast(130%) saturate(120%) sepia(100%); }

.under { z-index: -100; }
</style>

Images with reveal (unders) only need htmlcass="reveal".
All other objects touching the menubar need htmlclass="under".
If you click on a reveal under, you get a re-presentation of the top image (with my adjustments).

I am wary of adopting siran's code as it is dependent on Xara's whim.
With mine, you are in full control over what to label and how to play.
The approach addresses Sticky and SaT options or any variation including Stretch.

Acorn

[Initiostar]

Acorn,

I used a subset of your reveal class here: https://initiostar.co.uk/demo/CSS-Reveal/ and all works as expected. Provided the Navbar elements are at the front (and in the correct order and top in the Page & Layer Gallery), I think everything slides under the stick-at-top elements without any additional code.

For completeness I ran Siran's code in my example here:https://initiostar.co.uk/demo/CSS-StickTop/

I think the only time the OPs issue would occur is where you have a link (MouseOver or Popup); not sure then that there is an alternative to using SaT z-index

The reveal approach was a great idea and thanks for sharing.

Gary

[Acorn]

Acorn,
I used a subset of your reveal class here: https://initiostar.co.uk/demo/CSS-Reveal/ and all works as expected. Provided the Navbar elements are at the front (and in the correct order and top in the Page & Layer Gallery), I think everything slides under the stick-at-top elements without any additional code.
For completeness I ran Siran's code in my example here:https://initiostar.co.uk/demo/CSS-StickTop/
I think the only time the OPs issue would occur is where you have a link (MouseOver or Popup); not sure then that there is an alternative to using SaT z-index
The reveal approach was a great idea and thanks for sharing.
Gary

Gary, thank you.
You hit CR in siran's code in the first demo page & I don't think you labelled any part with ClassName, frontobject.

Acorn