CSS seems like JavaScript

While looking for sites that have good responsive pages, I noticed something on Apple.com. They have sort of a navigation menu at the bottom page. It has plus signs on the entries, and when clicked it expands. It seemed that this could only be possible with JavaScript. I turned off JavaScript (via Web Developer Toolbar), and the menu still works. How is this done? Is this just only CSS? To be clear it is not the menu at the top of page, it is the one when you scroll to the bottom of page with you device screen size (width) smaller than 768 px. Thanks

Itā€™s quite possible to do this with css only and no javascript. The target pseudo class can be used to show/hide an element on click, or the ā€œcheckbox hackā€ is another css only method.
If you check the code with Inspect Element it may give you some clues as to how they did it.

2 Likes

That.

http://www.apple.com/ac/globalfooter/2.0/en_US/styles/ac-globalfooter.built.css

Has several

.ac-gf-directory-column-section-state:target

selectors

Wow! very informative, I now have a direction to go in, to learn a lot more. Thank you both!

1 Like

CSS can be crazy as Javascript. You can do all kind of stuff

Example of pure CSS drop down menu

People do question on JavaScript vs CSS menuā€¦ Personally, I donā€™t care as both gives exact same output. Some say CSS is better since it will not block JavaScript thread but then again JS can use webworker to get around this. Personally, I prefer to use JS based since they give more options. For example, let say you do some fancy menu animation but want to kick off a callback at the end then CSS canā€™t help you.

1 Like

What if you just set an animation delay to the exact time that the regular fancy animation is? Maybe on a wrapper of the menu or something. Assuming your ā€œcallbackā€ is another animation of sorts or something visual.

You can certainly put animations using delay method but Iā€™m talking about like doing like jquery stuff at the end of the animation. As for why to do that? Donā€™t know but just pointing out JavaScript is bit more flexible.

My weapon of choice for CSS animation is GreenSock https://greensock.com/. According to them, it performs better than CSS but I donā€™t knowā€¦ It works and get my job done :slight_smile:

Manā€¦ all of you guys answers, comments and demonstrations are such a wealth. Thanks you so much.

1 Like

Weā€™ve not even started yetā€¦ :wink:

Iā€™m all for using css where possible over using javascript. But one problem I have found with css only drop-down-hover menus is making them keyboard accessible. Thatā€™s something Iā€™ve not found a fix for. Though I have made css only ā€˜clickā€™ menus that are keyboard accessible using :target to show the sub menus.

In that case JavaScript Menu is the way to go. This way you can have the api like menu.open(ā€˜nav selectorā€™). Truthfully, creating menu using 100% CSS is kind of like a hack since CSS wasnā€™t made for that purpose. Yes, it can do it but does that mean we should do that? JavaScript is made so that DOM can by dynamic and theoretically menu makes more sense in JS than CSS. At the end, there is no ā€˜rightā€™ answer. They all work and more than one way to cut the cake.

The JavaScript ones donā€™t work for the growing number of people who have JavaScript turned off though.

This is where progressive enhancement comes in to its own.

Start off with an HTML list.
Use CSS to make it look better.
Then JavaScript to achieve the desired behaviour.

It all works regardless of whether CSS or JavaScript are available.

3 Likes

Is it possible to make activate a :target so that the rules you specify show, but not have the url show the #something on the end? Thanks

Iā€™m confused.

Hovering over an element that has CSS pseudo styles should have no affect over whether or not a browsers address bar shows a fragment as part of the URL.

In fact, neither CSS nor JavaScript have such control

1 Like

When I use the :target pseudo class and give it CSS rules it shows them when the address is something.html#target. They do not apply when the address is only something.html Thanks

thatā€™s how :target works ā€¦

1 Like

If thatā€™s what you want, donā€™t use css :target, use javascript.

HTML
Use CSS
Then JavaScript