Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Front-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

hey 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

Taylor Huston
Taylor Huston
4,245 Points

Is there a playlist or easy way to access all the videos like this?

Nick Calabro
Nick Calabro
16,335 Points

I 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
Casey Antoine
Courses Plus Student 5,174 Points

New 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
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
Jose Balaguer
17,473 Points

Very usefull. Good job. What about storing contenteditable changes in my database? Thanks.

John Hill
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
John Hill
Front End Web Development Techdegree Graduate 35,220 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
Mitch Fanning
3,253 Points

Great 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

Where can I find the rest of the tips and solutions videos?

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Tom Lawrence - For now, I'm including all related tips below each video.

Great tips as usual Guil

So happy i just found this thread and related vids/links. Guil is one of my favs.

Patryk Nowak
Patryk Nowak
14,096 Points

As 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 ! :)

Taylor Huston
Taylor Huston
4,245 Points

I would also be curious if there was a playlist or an easy way to watch all of these.

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Taylor Huston - We're working on it. For now, I'm including all related tips below each video. :)

Thanks, Guil, I've always wondered how to build drop-down navigation without javascript. This is awesome!!!!!

Marcus Tisäter
Marcus Tisäter
4,886 Points

Thanks! Great video loved it

Ooh, this is great. But would a CSS-styled drop menu work on a touch device?

Awesome, thanks!