Member Avatar for dlmagers

Hello. I am trying to find a good tutorial that will allow with the menu bar at the top of the page and when you hover over the 'menu words' the entire page will slide down so you can see the contents of the menu. Any one have any suggestions as to where I can go for a good tutorial? Thank you in advance.

  • 4 Contributors
  • 6 Replies
  • 207 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by dlmagers
sibindinstar commented: Check out tutorials on W3Schools or CSS-Tricks, and for inspiration, visit Dinstar Dubai +0

Dani AI

Generated

— short, practical pattern you can apply that matches your clarification (the whole page drops to reveal a full-width top menu). and pointed toward dropdowns and jQuery; this shows how to make the page itself move while keeping the animation smooth and accessible.

Use a fixed top menu and animate transforms instead of top/margin/height (transforms are GPU-accelerated and avoid layout thrash). Store the menu height in a CSS variable so the page push stays correct on resize.

/* CSS */
:root { --menu-h: 0px; }

.top-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  transition: transform 280ms ease;
  z-index: 1000;
}

.page-wrap {
  transition: transform 280ms ease;
  will-change: transform;
}

.body-open .top-menu { transform: translateY(0); }
.body-open .page-wrap { transform: translateY(var(--menu-h)); }
/* JS (vanilla) */
const menu = document.querySelector('.top-menu');
const toggle = document.querySelector('.menu-toggle');

function updateMenuHeight(){
  document.documentElement.style.setProperty('--menu-h', menu.offsetHeight + 'px');
}
window.addEventListener('resize', updateMenuHeight);
updateMenuHeight();

function open(){ document.body.classList.add('body-open'); toggle.setAttribute('aria-expanded','true'); }
function close(){ document.body.classList.remove('body-open'); toggle.setAttribute('aria-expanded','false'); }

toggle.addEventListener('mouseenter', open);
menu.addEventListener('mouseleave', close);
toggle.addEventListener('click', () => document.body.classList.toggle('body-open')); // touch support
document.addEventListener('keydown', e => { if (e.key === 'Escape') close(); });

Notes and troubleshooting: on mobile use click/tap instead of hover; avoid animating height/top for better fps; add overflow:hidden to body when open if the menu should lock scroll; update aria-expanded/aria-hidden and move focus into the menu for keyboard users; reduce transition time if animation stutters. This pattern is flexible for multi-level content (as suggested) and works without a heavy library.

Recommended Answers

All 6 Replies

Member Avatar for JorgeM

If you are looking to create a multi-level navigational menu, using CSS, I have an example that you are free to use for your purposes. Code and explanation..

Multi-level Navigation Menu with CSS

Member Avatar for ZenSolution

Click Here
Please visit our web syte stated above.

We can help you solve any problems realted to web or to design,Develop and Implementation.

commented: try providing help here rather than just plugging your own business -2
Member Avatar for dlmagers

Actually I was thinking more along the lines of when you have a menu bar at the top of the page. Then when you hover over the menu bar the whole page will drop down and a menu options would take the whole page at the top.

Member Avatar for JorgeM

Have you looked into using jQuery? Check their site for examples and documentation. JQuery.com. If you are looking for a pre-built solution, I haven't seen this exact example but I'm sure that if you do a search with jQuery you'll find something similar.

Member Avatar for dlmagers

Thanks for all your suggestions. Diana

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.