How to create left nav bar like Treehouse?

Question

I am looking to create a left nav bar like the one on the Treehouse site here: http://teamtreehouse.com/library

The main thing I am trying to replicate is the links tooltip that slides out/fades in beside the icon. Looking at the source, I believe thats done through CSS? correct me if I'm wrong.

Also, I noticed they have svg classes on the links, are they just for site responsiveness and not really related to the function of the links/tooltip?

Thanks for any help on this and please let me know if I can provide any other info.

Turn javascript of in your UA. If the site still works it must be CSS. — Robert Longson, Jan 12 '15 at 20:24

score 2 · Accepted Answer · edited May 23 '17 at 12:31

For the bar itself simply have floated div extended to 100% height and set it's position to fixed.

The tooltips that pop out can either be done with javascript or CSS.

For javascript or jQuery, there are numerous tooltip libraries that will give you the same functionality. In CSS you can add a hover state that shows the div. Either one of these approaches will work.

For the CSS solution see this related question: Using only CSS, show div on hover over <a>

The SVG class on these from what I can tell is actually the icon itself. SVG is a neat format that lets you apply font styling to images. If you look at the bootstrap framework icons you'll see this is how they are displayed. I'm guessing that the same technique is being used here.

Thanks! this info was very helpful. I agree with the SVG too, that makes sense. — StackUnderFlow, Jan 12 '15 at 22:43

How to create left nav bar like Treehouse?

1 Answers1