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 trialGuil Hernandez
Treehouse TeacherFront-End Design Tips & Solutions - HTML5 Local Storage and CSS Dropdown Menus
Hey everyone,
I've been working on a new "Tips & Solutions" series using many of your questions, requests, and suggestions for tips. This week, we’ll continue with part two of last week's tip where we built a real-time CSS editor using the HTML5 contenteditable attribute and local storage. Then, we’ll take a look at how to build a simple CSS dropdown menu.
If you have any tip suggestions, let me know in the comments or on Twitter.
Notes
Related Tips
Taylor Huston
4,245 PointsIs there a playlist or easy way to access all the videos like this?
Nick Calabro
16,335 PointsI second Taylor's question! you mentioned the last tip, how can we see all of them. This seems like a great source for bonus info. Thanks Guil!
Casey Antoine
Courses Plus Student 5,174 PointsNew Designer here. I am learning Frontend design, I've gotten into HTML/CSS and have a little knowledge of jQuery and JavaScript. I am reviewing through HTML/CSS before I start getting into more advance languages.
I was just wondering if there was any benefit to using pure HTML/CSS for drop down menus or is it just simply another way of doing it? Thanks in advance.
Luis Magaña
13,042 Points^ I Second that comment. Navigations are an important element and really appreciate you telling us how to make it with html/css, really want to dive deep with the customization of navigations. I feel as if some nav's are simple yet some are complex and load differently. Thank you for this.
Jose Balaguer
17,473 PointsVery usefull. Good job. What about storing contenteditable changes in my database? Thanks.
John Hill
Front End Web Development Techdegree Graduate 35,236 Points@Casey Antoine : One thought is that using pure CSS for a dropdown would guarantee functionality in case someone has JavaScript disabled or blocked on their computer.
Mitch Fanning
3,253 PointsGreat video Guil.
I used your localStorage example for a simple single page application and - at first - it worked flawlessly.
However, when I came back to it a few days later the keys and values would not persist in Chrome?
Here's the link to the code in CodePen
P.S. I'm a rookie developer and this is really only the "start" of a prototype mock up so I didn't want to spend too much time in .js but thought localStorage would add a nice touch.
Thanks in advance and keep up the great work!
Mitch
11 Answers
Tom Lawrence
8,685 PointsWhere can I find the rest of the tips and solutions videos?
Guil Hernandez
Treehouse TeacherTom Lawrence - For now, I'm including all related tips below each video.
David Johannesson
4,770 PointsGreat tips as usual Guil
qdzfplofsk
22,025 PointsSo happy i just found this thread and related vids/links. Guil is one of my favs.
Guil Hernandez
Treehouse TeacherThanks for watching, Tony Jessup. :)
Patryk Nowak
14,103 PointsAs Taylor Huston said, there should be something like place with links to this great tips and tricks, not only from you Guil Hernandez, but from all staff members. I remember there was a great video how to make jquery plugin, etc., but many people don't see it. Waiting for a clever solution to that :), because content is more than great ! :)
Jamie Barton
14,498 PointsGood work Guil!
Taylor Huston
4,245 PointsI would also be curious if there was a playlist or an easy way to watch all of these.
Guil Hernandez
Treehouse TeacherTaylor Huston - We're working on it. For now, I'm including all related tips below each video. :)
Philippe Parmentier
9,517 Pointsawesome
Juan Perez
Courses Plus Student 8,944 PointsGuil Hernandez you ROCK dude!
Andrew Hickman
11,602 PointsThanks, Guil, I've always wondered how to build drop-down navigation without javascript. This is awesome!!!!!
Marcus Tisäter
4,886 PointsThanks! Great video loved it
Andrew Hickman
11,602 PointsOoh, this is great. But would a CSS-styled drop menu work on a touch device?
James Whiting
39,124 PointsAndrew Hickman
11,602 PointsAwesome, thanks!
Mohamed Rida Hanti
Courses Plus Student 1,563 PointsMohamed Rida Hanti
Courses Plus Student 1,563 Pointshey thanks very much for those tipps . in the last episode , you covered svg icons ,from icomoon.io . I just want to ask if it's possible to change the color of a certain icon on hover ?
thanks again