Ivy-Walobwa / responsive-pure-css-menu

Create a responsive mobile menu with CSS without JavaScript- repo for LogRocket Article
https://blog.logrocket.com/create-responsive-mobile-menu-with-css-no-javascript/
60 stars 61 forks source link

submenus #4

Open hole102 opened 1 year ago

hole102 commented 1 year ago

I am sorry about issue, but I found the complete code including submenus Very goog code, I love it. Kind regards

dominikherz commented 1 year ago

For subemnu-implementation i fount out, that in the css is missing the definition for class "subnavbtn"

i.e.:

.subnavbtn{ display: block; padding: 30px; color: var(--white); }

that worked for me to display the submenu items correctly:

Olivierbkk commented 6 months ago

Hi, I can't get the submenu to work on iphone, even after I added the class "subnavbtn"

the submenu just won't expand

hedgemybets commented 6 months ago

I had the same issue as @Olivierbkk on iphone. Otherwise, this is a nice solution! Thanks!

EDIT: I came up with a solution that now appears to work on iPhone, Chrome, and Edge. I define a button in the styles.css as follows:

button, input[type="subnavbtn"], input[type="reset"] {
    background-color: transparent;
    display: block;
    padding: 30px;
    color: var(--white);
}

In the HTML, I change the line with the paragraph tag to a button tag. Original: <p class="subnavbtn">System <i class="fa fa-caret-down"></i></p> New: <button class="subnavbtn">System<i class="fa fa-caret-down"></i></button>

With this solution, there is no need for a class definition for .subnavbtn as described above.

Hope this helps!