Preview on... - Post ID 279246

User 2659348 Photo


Registered User
113 posts

Thanks Eric! I didn't realize that was there.

Twin... The site I'm building is from a blank Foundation framework.
I refered to the Bahia Theme earlier just because it's menu did the trick I ws trying to do.

So I'm in the Symbols area now (of my blank Foundation site) seeing if I can figure it out.
Knowing is half the battle
User 244626 Photo


Registered User
811 posts

Once you have your symbol menu figured out and added to all your pages here is a example for Foundation using Tabs instead because it uses the same state as the navbar and I could not find a navbar in CSS Grid for Foundaton.

The neat thing that is new in CSS Grid builder that RSD does not have is the ability to create custom dynamic classes. One is already created for "is-active" which Foundation 6 uses when switching active states.

Look it over and if you have any questions let me know. It add a new state called "is-active" for your choices along with the usual hover, regular, active, out-of-view, focus, visited. You create is-active (already a choice though) in the New Element State Selector. No jquery needed.....just set the tab-title to the new state and adjust the top border to red....or bottom like your example.
Attachments:
Bootstrap 5 CSS Grid.
User 2659348 Photo


Registered User
113 posts

I was messing with is-active earlier but couldn't get it to do what I wanted.
I've got your example open on another monitor and it looks great. But I can't see any of the css when I'm looking at the DOM tree so I can't see what's doing what on each element. I see where you changed the In State selector to is-active and selected the Red border.... but it doesn't show me you chose Top (maybe that's a default?)

Anyway, can't seem to make my text link nav do the same. I feel like it's one little thing somewhere stopping me.
Knowing is half the battle
User 2659348 Photo


Registered User
113 posts

Here's what I have so far.
I'm going to bed. But if anyone can make it do what I can't then I'll sure appreciate it and I'll check it tomorrow.
I feel like the is-active works differently on pages versus tab-panels that are really just elements on a page. I'm stumped.
Thanks!
Attachments:
Knowing is half the battle
User 244626 Photo


Registered User
811 posts

So its catch 22 since if you make a symbol of a menu then you are unlikely going to be able to add a active link because each page link is unique. Keeping the menu as a symbol is a better way to go so we will have to approach the link styling another way.

Here is a simple jquery fix. It basically compares the url in the browser to any text links on the page and if they match what is on the end of the url (like home or contact etc) it adds a class to it. In this case I chose url-active which I created as a dynamic class. Set the text link to this dynamic class state and adjust however you want the text link to display. All text links will update. (Dont use this state on anything else but the menu links).

I then added the jquery script in the footer on each page. On the last page of your project I actually linked to a resource which I stored the js file in to make it more cleaner way of doing things.
Bootstrap 5 CSS Grid.
User 2659348 Photo


Registered User
113 posts

That's awesome! The more I thought about the Symbol situation and tried to find a way to do this, the more I thought it would have to be a js solution.

I have no idea how to write or edit js. But I want to make sure I don't lose or mess up this thing you have done for me (which I appreciate BIG TIME!). So how can I save that js file you have in Resources (menulinkurl.js) on my computer so that I can use it again if I accidentally delete my site or progress?

Or...wait....
Is what is IN that js file in Resources? --- the script that is in the footer of the other 3 pages?
In other words.... did you do it one way on the first 3 pages (put the script right in the footer of the page), and then on the last page you linked to the script just to show me 2 ways of doing it? (The linking to the resource being the cleaner way)

And if that's the case, then I can copy the script off any of the first 3 pages footer and save it a Notepad file on my computer? Am I actually starting to understand this??? lol
Knowing is half the battle
User 244626 Photo


Registered User
811 posts

Yes, I just pasted the code including the required script tags into the first 3 pages footer. The fourth page I link to the code that I pasted into a text file, saved and was imported in a folder named js I created in resources. I then linked to it which keeps things cleaner. You can replace the code in the first 3 pages and just link to the file like I did on the fourth page.

If you want to save that js file, just export the project and open the js folder and it will be inside.

Or you can just copy the code from page one and paste it into a text file without the script tags and then save it with a .js extension.

Bootstrap 5 CSS Grid.
User 2659348 Photo


Registered User
113 posts

I did it!
I pasted it and saved it in Notepad with a js extension. Opened my version of the site and completely went through it all myself - create the dynamic state, add link to the file in the footer of each page, and it all works!

Thank you SO much! I have things exactly like I want them so far and can now move on to the next steps of building out this site. Loving Grid Builder and loving the help I find in the forum!
Thanks again, Twinstream!
Knowing is half the battle
User 244626 Photo


Registered User
811 posts

Thats great to hear Chris. I think Alter Eagle mentions the same script in one of his tutorials he has for some Foundation Menus he created. It should also work on relative and absolute links.
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.