Comments on: CSS3 Lavalamp Menu

By: Tgrace

Tgrace — Fri, 20 Apr 2012 01:56:00 +0000

Thanks. I’ll try that out!

By: Alexandre Smirnov

Alexandre Smirnov — Fri, 20 Apr 2012 01:51:00 +0000

Well, the “:target” selector is used to “target” an element that is in the url. For example, if you have a div named “test”, and the url has “#test” appended to it, this code will fire:
#test:target{
background: red;
}

So if you have a link pointing to “#test”, or you append “#test” to the url via javascript, the “:target” event for that “test” element will fire.

The thing is, “:target” doesn’t work with actual pages. It only works with items appended to the current page.

Since you’re using wordpress, you could use this tutorial: http://www.vanseodesign.com/wordpress/hightlight-current-page-wordpress/

And adapt the code to work with the lavalamp menu.

Good luck!

By: Tgrace

Tgrace — Fri, 20 Apr 2012 01:31:00 +0000

I am trying this out in a wordpress site – but am hardcoding the menu. I don’t know about the :target pseudo class… Could you give me an example on how this is done?

By: Alexandre Smirnov

Alexandre Smirnov — Thu, 19 Apr 2012 23:08:00 +0000

Well, that’s one way to do it. The simplest way would probably be to just use inline styles on the div depending on what page is active. If you have a dynamically generated website, then there isn’t really a solution, since unfortunately “:target” doesn’t work with top level pages.

By: Tgrace

Tgrace — Thu, 19 Apr 2012 21:36:00 +0000

Wondering how then to trigger the slider to remain in the correct position for the current page — Does one have to create a separate style sheet then for each page, changing the left position of the slider accordingly?