▼
Streaming live at 10am (PST)

Segmented Controller Nav

#1

Hey All,

I'm looking for a native way to implement the code I created on codepen. I was looking for tutorials on segmented controllers like this one but I cant seem to find anything that works like this. Feedback is greatly appreciated.

Here is my public share link: LINK
(how to access public share link)

#2

Yo Moofasaw,

so far Webflow doesn't support the use of pseudo-classes to affect other elements directly.
One thing you can try is to rebuild the whole navbar exactly in webflow and then insert the Pseudo-element actions as custom code. You will only see the result on the live-site not in the preview-mode, but it should work.

You might need to use simple link:activated classes instead of the radio checkbox though. Not sure.

The other possibility is to use Webflows simple click or hover interactions instead of the pseudo-classes to achieve the same effect.
The only disadvantage is that for every click or hover interaction you will have to minimize the label elements of all the other navbar links. Not very elegant but with only three navbar elements this is, however, fairly doable.

Let me know if this helps.
Peace Chris

#3

Hey Chris,

Any ideas how to swap the code so that clicking the tab would take you to a separate page? Ideally I would want the controller to only load the body below the navbar so that the entire page doesn't refresh and the user doesn't feel like they have left and came back again like a normal link. I am guessing all I need to do in that case is re-position the body so that the top is at the bottom of the nav bar?

And I think you're saying I need to apply anchors using this format:

Any help restructuring my code would be appreciated!

Thanks again,

#4

Hey Kyle,

you could use the webflow tab-widget instead of the navbar if you don't want the entire page to reload.

However, if you need an url change on click, you'll need to add some extra java-script.
https://forum.webflow.com/t/solved-unique-url-modal-tab/30351 This apparently works, but I haven't tried it out myself yet.

Not exactly sure what you are on about with the anchor links though.

You'll want to use the :active class to trigger the css animation of the .label. Meaning what you have to put into the custom code section of your site would probably looks something like this: 

.segmented-control a:active + label { color: #929DAF;}

^^ this basically says: if the link inside the .segmented-control div( which could be a tab) is active then the color of the first sibling .label element after active is [or changes to] color: #929DAF.
Pretty cool stuff.

Now you got to do the same with all the other changes you want to happen to the sibling label of your active tab- or nav-link. :smiley:

Let me know how it goes.

#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.