/ orclapex

Peeking at Collapsed Navigation Menu Entries

Universal Theme's navigation sidebar has two states: expanded or collapsed. When collapsed, you only see the icons. Sometimes, icons are not enough.

I wanted to peek at the text behind the icon without having to reach for the hamburger menu at the top.

peek-collapse

See demo. Please first collapse the sidebar manually.

Here's how to achieve that using CSS only.

.js-navCollapsed .t-TreeNav .a-TreeView-node--topLevel>.a-TreeView-content.is-hover .a-TreeView-label {
	visibility: visible;
	left: 48px;
	padding: 0 16px;
	width: auto; 
	background-color: #0459a1; /* This would be your primary color */
}

.apex-side-nav.js-navCollapsed .t-Body-nav
, .apex-side-nav.js-navCollapsed .t-Body-nav .t-TreeNav {
    z-index: 999; /* Make it appear on top of the page content */
}

Okay, it's not perfect on mobile, but it's still a nice trick for desktop...

And please adjust according to your design guidelines.


Enjoy these APEX CSS tricks? Let me know and I'll post more.

Head here to see them all.

Peeking at Collapsed Navigation Menu Entries
Share this

Subscribe to Vincent Morneau Blog