Tab nesting feature

krileon
ONLINE
Posts: 49069
Thanks: 8388
Karma: 1458

6 years 2 months ago #310340 by krileon

Replied by krileon on topic Tab nesting feature

OK , in this case is it possible to add a description area in the tabs which could appear once the icon/link is clicked ?

If the tab allows fields you could add a Custom HTML field to it. Aside from that, no.

Kind of what happens for profile edit, but something we could use in profile view for that kind of usage ? Would greatly enhance the UI for small screens with using icons only like we do

I don't recommend icon only navigation.

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in or Create an account to join the conversation.

activha
OFFLINE
Posts: 2338
Thanks: 117
Karma: 13

6 years 2 months ago #310353 by activha

Replied by activha on topic Tab nesting feature

I don't recommend icon only navigation.

Can you explain why ?

We have these with icons and css rules and it suits best on web apps

Capturedcran2019-02-0116.59.06_2019-02-01.png

Attachments:

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 49069
Thanks: 8388
Karma: 1458

6 years 2 months ago #310354 by krileon

Replied by krileon on topic Tab nesting feature

They look nice. That's not the argument behind avoiding icon only menus. The issue with them is they have no meaning to anyone other than you. That's why on mobile hamburger menus are popular as they can consume more screen space to provide a full textual menu entry without it looking odd in smaller spaces like where the tabs go for desktop.

Icon based navigation only works if it works off previous experience. Ellipsis vertical and horizontal are already established as dropdowns. Hamburger is already established as navigation. Globe established as notifications/alerts. Envelope established as inbox/messages. There's of course several other established ones like play, pause, etc.. for video/music players and more, but that doesn't really apply well to your tabs. The only established icon UX you have on the menu that I can see is for photos.

I suggest always displaying the full text and if you don't want to use the hamburger menu continue to use the provided CSS so they'll mobile-scroll left/right and maybe make the scrollbar always visible so it's obvious to them it scrolls.

Please Log in or Create an account to join the conversation.

activha
OFFLINE
Posts: 2338
Thanks: 117
Karma: 13

6 years 2 months ago #310364 by activha

Replied by activha on topic Tab nesting feature

Thanks a lot for your very interesting feed back :-)

I have changed it this way if it can help someone

Code:

@media (max-width: 575.98px) {
	.cb_template .cbMenuNavBar .cbMenuNavBarToggle,
	.cb_template .cbTabsMenu .cbTabsMenuNavBarToggle  {
		display: none;
	}
	.cb_template .cbTabsMenuNavBar {
		padding-left:5px;
		padding-right:5px;

	}
	.cb_template .xl-small {
		font-size: 60%;
	}
	.cb_template .cbMenuNavBar .cbMenuNav::-webkit-scrollbar,
	.cb_template .cbTabsMenu .cbTabsNav::-webkit-scrollbar {
    	height: 3px;
		background-color: #F5F5F5; }
}
	.cb_template .cbMenuNavBar .cbMenuNav::-webkit-scrollbar-track,
	.cb_template .cbTabsMenu .cbTabsNav::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
		background-color: #ddd;
		border-radius: 10px; }
	.cb_template .cbMenuNavBar .cbMenuNav::-webkit-scrollbar-thumb,
	.cb_template .cbTabsMenu .cbTabsNav::-webkit-scrollbar-thumb {
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
		background-color:#673ab7; }
	}
	.cb_template .cbMenuNavBar .collapse {
		display: block;
	}

	.cb_template .cbTabsMenu .collapse {
		display: flex;
		width: 100%;
	}

	.cb_template .cbMenuNavBar .cbMenuNav,
	.cb_template .cbTabsMenu .cbTabsNav {
		overflow: auto;
		-ms-flex-direction: row;
			flex-direction: row;
		-ms-flex-wrap: nowrap !important;
			flex-wrap: nowrap !important;
	}

	.cb_template .cbMenuNavBar .cbMenu,
	.cb_template .cbTabsMenu .cbTabNav {
		white-space: nowrap;
	}

	.cb_template .cbMenuNavBar .nav-link,
	.cb_template .cbTabsMenu .cbTabNavLink {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}
	
	.cb_template .cbTabsMenu .cbTabNavMore .cbTabNavMenuMoreBtn {
		display: block !important;
	}
}

With these example overrides :

Code:

'_UE_WEB_GEST' => '<i class="fal fa-inline fa-lg fa-fw fa-cog mr-1 ml-2"></i><span class="d-none d-xl-inline">Configuration</span><span class="d-block d-xl-none font-weight-lighter mr-1 ml-2 x-small">Configuration</span>',
  '_UE_BLOG_WRITE' => '<i class="d-sm-block d-xl-inline fal fa-inline fa-lg fa-fw fa-edit mr-1 ml-2"></i><span class="d-none d-xl-inline">Articles</span><span class="d-block d-xl-none font-weight-lighter mr-1 ml-2 x-small float-left pt-sm-2">Articles</span>',

looking like this on small screens :

Attachments:

The following user(s) said Thank You: krileon

Please Log in or Create an account to join the conversation.

Moderators: beat, nant, krileon