CMS Development

Mboyer
Mitglied

Tab Menu

lösung

Does anyone know if these tab objects can be done in Hubspot

 

Tab ObjectTab Object

0 Upvotes
1 Akzeptierte Lösung
AJLaPorte_diagr
Lösung
Autorität

Tab Menu

lösung

These types of tabbed interfaces can be created in HubSot. While there is not a native module for tabbed content, you can create a custom module to accomplish this. If you're using the new design manager (currently in beta) you can create a more efficient custom module with this using repeater fields. 

 

You can create tabs like this using either a JS plugin already out there or with CSS only (https://css-tricks.com/functional-css-tabs-revisited/).

Lösung in ursprünglichem Beitrag anzeigen

0 Upvotes
4 Antworten
AJLaPorte_diagr
Lösung
Autorität

Tab Menu

lösung

These types of tabbed interfaces can be created in HubSot. While there is not a native module for tabbed content, you can create a custom module to accomplish this. If you're using the new design manager (currently in beta) you can create a more efficient custom module with this using repeater fields. 

 

You can create tabs like this using either a JS plugin already out there or with CSS only (https://css-tricks.com/functional-css-tabs-revisited/).

0 Upvotes
Mboyer
Mitglied

Tab Menu

lösung

Thanks AJ.  Lets pretend I am not a web designer.  so to use the script on the reference page, I would add say a flex column and paste the text into the CSS Declarations??

 

give me a bit more and i think I can do this

0 Upvotes
AJLaPorte_diagr
Autorität

Tab Menu

lösung

Ideally, yes. You should be able to copy the HTML from the HTML Structure portion (https://css-tricks.com/functional-css-tabs-revisited/#article-header-id-1) and paste that into an HTML Module (or into the view source view of the Rich Text editor. This is found by clicking the </> button on the menubar). Then you should be able to copy the CSS from the CSS Layout potrion (https://css-tricks.com/functional-css-tabs-revisited/#article-header-id-2) and then you should see similar to what they have in their demo here: https://css-tricks.com/examples/CSSTabs/radio.php

 

You may need to tweak your CSS a bit as the CSS they use for this:

[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

is targeting all radio buttons so it could conflict with existing forms that have radio buttons. 

 

Likewise, if you are using classes on elements with the same name as those in their CSS this could also cause conflicting issues. 

 

I hope this helps to clarify this a bit for you. 

 

-AJ

Mboyer
Mitglied

Tab Menu

lösung

 

Ok AJ, youre going to think I am air headed but see Below.  is this the right location to put the scripts or am I missing something??

Flexible Column.PNGCSS in Flexible Column.PNG

0 Upvotes