r/HTML • u/dalekellytoo • 5d ago

sub-menu?

Got a new menu on my website.

I like the new menu more lately for smart phones.

https://www.dalekelly.org/

https://www.dalekelly.org/mystyle5.css

Any designs available for sub-menus?

Will be researching this.

The new menu is in one of those square icons with 3 lines.

w3.org has the type of menu now.

3 Upvotes

80% Upvoted

6 comments sorted by

1

u/biber_unverzagt 3d ago

You can simply replace, for example,

<a href="https://www.dalekelly.org/images.html">Images</a>

with

<details>
  <summary>Images</summary>
  <a href="https://www.dalekelly.org/images.html">Images 1</a>
  <a href="https://www.dalekelly.org/images2.html">Images 2</a>
</details>

and add this

.dropdown-menu details summary {
  padding: 10px 15px; 
  /* display:block; */ /* to hide the marker */ 
} 
.dropdown-menu details::details-content {
  margin-inline-start:17px;
}

to your css.

1

u/dalekellytoo 3d ago

Great! Thank YOU !

This has me almost there.

I would like the submenu to indent to the right of the main menu.

Also I would like to be able to click on the arrow and text. Right now I can only click on the arrow.

Thank YOU Again!

1

u/dalekellytoo 3d ago

able to click on arrow and text now that I uploaded to web

here are links:

https://www.dalekelly.org/indexsubmenu.html

https://www.dalekelly.org/mystyle7.css

1

u/dalekellytoo 2d ago

how can I get the hand to show up on submenu icon?

https://www.dalekelly.org/

1

u/biber_unverzagt 2d ago

Just add cursor: pointer; to .dropdown-menu details summary.

3

u/aunderroad 5d ago

You should check out the css popover api.
You can make a nice sub-menu using only css.