• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Overlay page help

Community Beginner ,
Feb 04, 2024 Feb 04, 2024

Copy link to clipboard

Copied

I'm very new to dreamweaver and started making my website for my course. I'm trying to make and overlay popdown for when hovering over certain text in my navbar. I managed to get it to work with one heading/text in the navbar but when trying to get it to work with the other headings with one displaying at a time it won't work. It only displays text on the page when hovering over the corresponding heading in the navbar but there is no overlay. Any help would be great thanks.

 

Source code:

        <li onmouseover="showOverlay('overlayComputing', 'textComputing')" onmouseout="hideOverlay('overlayComputing')">
      <a class="navtext" href="#"> Computing </a></li>
<li onmouseover="showOverlay('overlayConsoles', 'textConsoles')" onmouseout="hideOverlay('overlayConsoles')">
  <a class="navtext" href="#"> Consoles </a></li>
 

<div id="overlayComputing" onmouseover="showOverlay('overlayComputing', 'textComputing')" onmouseout="hideOverlay('overlayComputing')">
<div id="textComputing" class="text">Computing</div>
</div>

<div id="overlayConsoles" onmouseover="showOverlay('overlayConsoles', 'textConsoles')" onmouseout="hideOverlay('overlayConsoles')">
<div id="textConsoles" class="text">Consoles</div>
</div>


<script>
function showOverlay(overlayId, textId) {
var overlay = document.getElementById(overlayId);
var text = document.getElementById(textId);
overlay.style.display = "block";
text.style.display = "block";
}

function hideOverlay(overlayId, textId) {
var overlay = document.getElementById(overlayId);
var text = document.getElementById(textId);
overlay.style.display = "none";
text.style.display = "none";
}
</script>

 

CSS:

 #overlayComputing {
      position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 80%; /* Full width (cover the whole page) */
  height: 50%; /* Full height (cover the whole page) */
  top: 60px;
  left: 200px;
  opacity: 1;
  background-color: #343A40; /* Black background with opacity */
  z-index: 100; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
    }
 #overlayConsoles {
      position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 80%; /* Full width (cover the whole page) */
  height: 50%; /* Full height (cover the whole page) */
  top: 60px;
  left: 200px;
  opacity: 1;
  background-color: #343A40; /* Black background with opacity */
  z-index: 101; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
    }
 
.text{
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  ms-transform: translate(-50%,-50%);
}
 
 

 

Views

106

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 04, 2024 Feb 04, 2024

Copy link to clipboard

Copied

I think what you want are "tooltips." The link below describes how to do it with ordinary HTML & CSS code.

https://www.w3schools.com/howto/howto_css_tooltip.asp

 

NOTE:  Tooltips are mouse dependant.  Users on touch screen devices won't see anything as they don't have a mouse.

For best usability, use Tap or Click triggers instead of Hover or MouseOver events.  The web needs to work well on ALL devices, not just desktops.

 

See Bootstrap with data-toggle Collapse.  This will work on all devices.

https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_collapsible&stacked=h

 

Post back if you have any questions.

 

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 05, 2024 Feb 05, 2024

Copy link to clipboard

Copied

No sorry I should of elaborated more an example of what I want is like the website currys or samsung where when you hover over the topics/text in the navbar there is the popdown/overlay with the other categories or products that come under that umbrella. Thanks 

Cai35240584y4p7_0-1707155213937.png

Like this

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 05, 2024 Feb 05, 2024

Copy link to clipboard

Copied

LATEST

Obviously, major retailers like Samsung know how to build smart websites that perform well on ALL devices.  See screenshot.

 

image.png

 

How do you foresee making this hidden panel (aka MEGA MENU) accessible to smaller mobile & tablet screens that don't have a mouse?  If you don't solve this problem now, your business can't survive because you're ignoring more than 50% of your potential customers.  🤔

 

Use Bootstrap.  At least your site will be accessible on all devices.

 

 

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 05, 2024 Feb 05, 2024

Copy link to clipboard

Copied

I think I have managed to get to work. Thanks

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 05, 2024 Feb 05, 2024

Copy link to clipboard

Copied

Can you elaborate a bit more on what you are trying to do because at the moment you've posted some code which looks to be taken straight out of the 1970's.

 

What information are you intending to put in the overlays? onmouseover won't work on mobile devices. Is this some kind of information the user will see before they click through to the 'computer' or 'consoles' page as I see you have anchor tags in the mix as well?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 05, 2024 Feb 05, 2024

Copy link to clipboard

Copied

So I intend to make a tech website like currys for example for the course and this would be the overlay/popdown on the categories at the top of the page

Cai35240584y4p7_0-1707155377946.png

like this on samsung

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 05, 2024 Feb 05, 2024

Copy link to clipboard

Copied

Think I got to work thanks 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines