Skip to main content
J
jamedlock83
Inspiring
June 15, 2023
Question

How To make the body slide down

  • June 15, 2023
  • 2 replies
  • 1665 views

https://www.arklahomawx.info

 

So, how would I make everything "slide down" when someone hovers over the menu?  That way, the menu doesn't cover anything.  It works perfectly in mobile view, but not on PC view.

    This topic has been closed for replies.

    2 replies

    O
    osgood_
    Legend
    June 16, 2023

    It looks ok on desktop, live with it, that's the way drop-down menus are supposed to work. People hopefully arent stupid enough to keep hovering over a dropdown item IF they want to read the weather conditions. (Although the main event which evokes the sub menu should really be onclick rather than hover).

     

    Lets suppose you did move the main section down to avoid the weather widget from being obscured, that would create nasty looking space either side of the sub-menu. Does it look ok in mobile, not really as it takes up too much real-estate being stacked vertically by default. You should consider deploying a proper mobile menu which uses a hamburger to hide/show the main menu items.

     

    Yes it looks a bit fancy with the animation stuff on desktop but it leaves something to be desired in terms of practicability, sometimes less is more.

     

    Personally I dont think its worth the effort needed to make the main section of the page move down on desktop as you would need to dynamically calculate the height of each sub menu container when the top-link is clicked to be able to move the main section to the correct position.

      J
      jamedlock83Author
      Inspiring
      June 16, 2023

      I would love to have a hamburger mobile menu, but I have no idea what to do and how to do that when the codes that I already have.

      O
      osgood_
      Legend
      June 16, 2023
      quote

      I would love to have a hamburger mobile menu, but I have no idea what to do and how to do that when the codes that I already have.


      By @jamedlock83

       

       

      Yes a hamburger can easily be added for mobile devices:

       

      Step 1:
      Add the below code directly after the opening <body> tag: (I assume you know your way around the code to some extent?).

       

       

      <div class="hamburger">
<div class="icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- end hamburger -->

       

       

      Step 2:

      Add the css styling below. Place it beneath the css styling for the 'menu' which you currently have as a huge block of embedded css at the top of your page. Presumably when you get the functionality of the navigation menu to your liking you will move all of the menu css into an externally linked stylesheet.........I hope so.

       

       

      <style>
/* Hide the numbering beside the menu items */
ol {
list-style-type: none;
}
/* Add the hamburger default style */
.hamburger {
display: none;
text-align: right;
cursor: pointer;
background-color: #69555d;
}
.icon {
display: flex;
flex-wrap: wrap;
width: 30px;
height: 30px;
}
.icon span {
display: block;
width: 100%;
height: 2px;
background-color: #fff;
margin: 3px 0;

}
.menu.showMenu {
display: block;
}

/* MEDIA QUERY MAX-WIDTH 45rem */
@media (max-width: 45rem) {
/* Show hamburger */
.hamburger {
display: flex;
justify-content: right;
padding: 10px 25px;
}
/* Hide menu */
.menu {
display: none;
border-radius: 0;
}
/* Remove margin */
.menu > ol {
margin: 0;
}
}
</style>

       

       

      Step 3:

      Add the javascript code below, directly before the closing </body> tag of your page. Again, once you have the functionality to your liking this script should be moved to an externally linked <script> tag.

       

      <script>

      const hamburger = document.querySelector('.hamburger');

      const menu = document.querySelector('.menu');

       

      hamburger.onclick = function() {

      menu.classList.toggle('showMenu');

      }

      </script>

       

       

      That should get you nearer to something which is more adequate, given I suspect you want to keep the complex css animation for desktop devices.

       

      Looking at the layout again and if you are still concerned about the sub-menus overlapping the weather widget I would suggest maybe moving the logo to the start of the page as it makes no sense where it is. The menu/navigation could follow the logo, then the hero image could be placed below that. This allows for the sub-menus to drop down over the hero image, which is just eye candy anyway, then place the weather widget below the hero image.........just a suggestion.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      June 15, 2023

      Optionally you could move the Weather Widget to another region of your page so it doesn't obstruct expanded navigation bar. 

       

      Another option is to give navigation bar a fixed position and z-index of 100 (topmost).

      <nav class="menu" style="position:fixed; top:0; width:100%; z-index:100">

       

      Keep in mind that many users have touch screen hybrid devices that have no mouse. How will such users access "hover" menu items?  For usability reasons, you may need to rethink this approach.  Switching from "hover" to onClick/tap behaviors reaches a wider base of device users.

       

      Hope that helps.

       

       

       

       

       

       

      Nancy O'Shea— Product User & Community Expert
      J
      jamedlock83Author
      Inspiring
      June 15, 2023

      Is there a code that I can put in to make it clickable?  My website is mainly for people who have Weather Radar Software on their computer and such, but I do agree with you. I'd rather have a clickable menu.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      June 15, 2023

      I use Bootstrap drop-down menus.

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

       

      Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices