IKEA Swedish Meatballs
Master
492 posts
1,027
Seen 5th October 2020
Stags
12th August 2020, 10:31 AM
The icon additions to the navbar are a really nice touch! I just wanted to put a couple ideas here to maybe improve it even further. ?
The main idea I have is to make the flyout text on hover a clickable part of the nav link. That greatly increases the usability because the user has a larger area to click as opposed to just the small icon area.
EDIT: Turns out you can click the text to navigate to the link, but the cursor is the normal cursor, giving no indication that the text is clickable. Style just needs a `cursor: pointer;`. And maybe the blue underline to keep it consistant with the icon. ?
It would also be great if 'hitbox' for the icons was larger with some padding, again to improve useability.
So far I've come up with the following CSS: https://pastebin.com/mfz8qSYc
I moved the underscore highlight to the `div` container. The right way of course is to add the `bl` class to `.navItemContainer` and not the `a`. I removed the `vertical-align` style because it caused the elements to perform weird resizing on hover; removing it doesn't seem to have effected anything.
With this CSS, it looks like this, and the activation area is slightly larger:
The main idea I have is to make the flyout text on hover a clickable part of the nav link. That greatly increases the usability because the user has a larger area to click as opposed to just the small icon area.
EDIT: Turns out you can click the text to navigate to the link, but the cursor is the normal cursor, giving no indication that the text is clickable. Style just needs a `cursor: pointer;`. And maybe the blue underline to keep it consistant with the icon. ?
It would also be great if 'hitbox' for the icons was larger with some padding, again to improve useability.
So far I've come up with the following CSS: https://pastebin.com/mfz8qSYc
I moved the underscore highlight to the `div` container. The right way of course is to add the `bl` class to `.navItemContainer` and not the `a`. I removed the `vertical-align` style because it caused the elements to perform weird resizing on hover; removing it doesn't seem to have effected anything.
With this CSS, it looks like this, and the activation area is slightly larger:
Kacket 
Daymen
Administrator
5,165 posts
37,117
Seen 16th December 2024
Drake
12th August 2020, 03:33 PM
Nice Ebon. I did make the cursor change to the hand thing but i noticed it doesn't work in Firefox! I'll fix it. Also, I didn't like how it looked when the whole thing was underlined but the way it looks in that pic is nice tbh. It was one of those spur of the moment updates before I went out on a killer bike ride.
IKEA Swedish Meatballs
Master
492 posts
1,027
Seen 5th October 2020
12th August 2020, 03:36 PM
Damen wrote on 12th August 2020, 03:33 PM:
Nice Ebon. I did make the cursor change to the hand thing but i noticed it doesn't work in Firefox! I'll fix it. Also, I didn't like how it looked when the whole thing was underlined but the way it looks in that pic is nice tbh. It was one of those spur of the moment updates before I went out on a killer bike ride.
Please feel free to adapt this to however you want to implement it, if you do want to!