Avatar of Russ Cummings
Russ Cummings
Flag for United States of America asked on

How do I make 2 columns of 6, with the submenus visible during hover?

I need a drop down hover-able menu with sub menus in two initial columns, instead of just one. 

 I have a functioning webpage already: flagsforfallenvets.com .

However our volunteers don't scroll down to see other cemeteries listed.

To see click on National Cemeteries - Instructions, there are 11 cemeteries, but if you don't scroll down only 6 are visible.

How do I make 2 columns of 6, with the submenus visible during hover?

Thank you,

Russ

HTMLCSS

Avatar of undefined
Last Comment
Scott Fell

8/22/2022 - Mon
arnold

Look at using a floating meny bar or have a better placement
Many of  the screens are narrow and that lends your type of layout for the user to scroll as you noted to see the options.
The other option is to have the sub-menu scaled to the screen versus fixed.
This way the user is made aware that there are more items in the submenu which they can scroll as opposed to having to scroll the main browser view and then access the submenu again

http://dhtml-menu.com/menu/dhtml-floating-menu-sample.html
Russ Cummings

ASKER
I don’t like the floating menu. Would you please post a scaled menu that you mentioned above?
Thank you,
Russ
arnold

You are setting a fixed sizes.
height 600px or 100%

use percentages .

http://dhtml-menu.com/menu/rq-have-scroll-menu-bar-nothing-scroll-support.html

Instead of having the menu open below open the window up with the div position by -150 to have it open above.

http://deluxe-menu.com/data-samples/rq-css-dhtml-menu-submenu-above-support.html

i.e. in your positioning you want it to scale up, unless your menu position in the browse is at the top at which point, you want the menu to drop down.
I think your current handling is that it is not dynamic.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
arnold

what IDE are you using to create these pages?
Russ Cummings

ASKER
I have cpanel, using the standard editor.
I honestly don’t know what it is to position <div> to -150. I’ll do research and play with it.
Thank you,
Russ
arnold

Unfamiliar with a cpanel editor through which you are creating these? sure it is not based on a template in a content management system like wordpress, joomla, drupal, etc. etc., etc.

The point deals with your current selection the menu is a drop down feature, you need to look whether there is a way that builds the menu item when clicked to pop-up.

Your menu listing is a fixed height that accommodates all the items listed, the other deals with a dynamic menu generating javascript that makes its dimension  match the remainder of the available space ...

it looks as though you are adding a list that is then rendered in one of the CSS files/javascript...


See whether when you are editing.working on the template, does it have an option to change how the menu functions, either pops up, are is full length...

I think it is part of a template that is then displayed to the user, your choice to place this type of menu at the bottom of your page, rather at the top. is what requires the adjustment to either have the menu popip versus drop-down


You could try in the css/styles.css seems to be where you have the menu setup. you have one

The template editor should provide you an option to test whether you would add overflow-y:: scroll
...
or the item where this specific menu is needs to have it added.
Was the menu initially floating?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Russ Cummings

ASKER
No template, each line from scratch in html & php.
arnold

I see, look at the cascading style sheet file that define how the menu is formed, see if you add the overflow-y: scroll.
To the menu il ul I think is how you gave it.

The other item, deals with whether the menu when clicked drips down as it currently does for you, to popup meaning the starting point is above, see if you try align bottom, to...
Scott Fell

I think what you are looking for is a mega menu https://www.w3schools.com/howto/howto_css_mega_menu.asp you can see in that code, it is already

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

Open in new window


Here is another https://codepen.io/arjunamgain/pen/YXBeLJ 

If you search for "html mega menu" you will get more options.

With that said, I think you are getter off to not have a drop down menu. Instead, just the one link for Cemeteries. Then on the Cemeteries page, you can list each cemetery in 2,3 or 4 columns.   A good reason for this method is you probably have at least half your users on some type of mobile device and dropdown menus are not always easy. 
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Russ Cummings

ASKER
This should do it, I'll try it & hopefully be done with this.
Thank you,
Russ
Russ Cummings

ASKER
Ok, I've played with the various code ideas and others not suggested and none are really what I'd like.

So, I'd like to change my question to something that if possible would be a solution:

When hover over only a particular main menu item have the page scroll down a % and return to previous value (position) when off that item (scroll up).
Russ
ASKER CERTIFIED SOLUTION
Scott Fell

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Scott Fell

Thank you for the Testimonial Russ!
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.