css - appear and disappear effect for div by clicking on it -
i can't understand how make in site: __smashingmagazine.com
if u resize window, search button. so... try click on search icon... new div appear search input. , pay attention behavior of it: no matter u gonna next div won't hide self, if click on 'x' appear instead of search icon... , pure css, right?! how possible... found article: click here
but behavior very, different... , don't @ all.
any idea how make work in site above? may help!
thanks!
the example smashing magazine uses :target
psuedo class change css of elements when anchor clicked. here's simplified breakdown of how they've achieved behaviour.
the anchor configured set fragment identifier in url, in case of smashing magazine #ms
. have anchor this:
<a href="#ms">search</a>
when clicked fragment identifier set #ms
, use make search appear using :target
psuedo class.
#ms { display: none; } #ms:target { display: block; }
when fragment identifier set #ms
, :target styles activated, displaying search.
here's simple example: http://jsfiddle.net/we76l66h/
they using :target
children (#ms:target + div.example
) change styling of children within targeted element. how make button change "close" button when #ms
fragment identifier set.
Comments
Post a Comment