Changed Site's Menu To Give More Flexibility With Titles

I have been changing some things around on this site to make it work better for me. One thing I had noticed is that on my phone, while the site menu was usable, it took up most of the screen on the browser due to wrapping. Being visually impaired, I have the text size set to the largest it can go on there.

I noticed that when I was looking for something to show my sister that I had written about years ago. Since then I had been thinking about how I might change that.

Yesterday my project was figuring out how to do a hamburger menu. Originally when I did it, I used hover to activate it like I had for the years and months dropdown on my weather pages. When I tested it on my phone and tablet, it didn’t work as expected. Duh! There is no hover on the touchscreen. Just clicks!

I settled on using the <details> element to make it expandable. I got it styled the way I wanted it to look, and all seems good. On my edge case large text browser on my phone, it still is not perfect, but that is only when it is expanded.

I converted the years and months dropdowns to use the same method, so hopefully that makes them work better on mobile devices. That’s why testing changes out should always be done. I thought I had done so, but I guess I forgot to check that out.

This collapsible menu gives me the flexibility to give the links better titles that are more descriptive. With the old one always showing the menu, I had to keep the titles to one word to make them fit. It allows me to add as many links as I want to be there. Ironically I have removed some.

I may put them back, but at least now if it is something I want to put there, I can. In the past I had to keep in the back of my mind how much space it would take up on the menu bar and all that stuff.