Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Michael McKenna
3,451 PointsHow can I dynamically change the navigation items on my website?
When the user is on the splash page, they can choose to go to two different parts of the site (which have two different types of navigation). How would I change the navigation items to reflect the user's choice on the splash page?
For example, if the user clicked the left button, you'll have LeftHome - Red - Blue
then if the user clicked the right button, you'll have RightHome - Green - Yellow
4 Answers
frontend
15,619 PointsDid you specify the 'li's' have an 'a href' in your document? You can give them classes to denote how each list item is going to look or use pseudo selectors(:nth-child). There are a few ways you can go about this.
Shawn Denham
Python Development Techdegree Student 17,802 PointsYou can either create new navigation for each page which means that you will have to maintain the navigation on every page that has navigation. (that was a mouth full)
or
Just create 2 different navs and insert them based on the page the user is on with something like PHP. This way would be preferred since you only have to maintain 2 navigations since you can change it in one place and the change will automatically be there on any page that uses that nav.
frontend
15,619 PointsHiding list items is something that is done with behavior and that is where Javascript comes into play. I'm not entirely sure what your goal is, but you can certainly create classes on your list items to denote how they are going to 'look', not the actual 'behavior'.
You can use jquery to do something like this...
$("ul.mybuttons li:nth-child(4)").hide();
Shawn Denham
Python Development Techdegree Student 17,802 Pointslots of ways to skin that cat!
JS would work too if you wanted to hide and show navigation on specific pages like brianborin suggested. The only problem I have with that solution is that creates weight on your pages.
If you want to use JS I would add/remove code rather than hide/show. but that's semantics :)
Michael McKenna
3,451 PointsThanks for your help guys
Michael McKenna
3,451 PointsMichael McKenna
3,451 PointsOkay, so just changing the text of the item and and its link accordingly. How would I "hide" and item? Let's say the left page only has 3 items while the right has four, is it possible to delete the fourth element or hide it? Or is this bad coding