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.
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!
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.
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
Manā¦ all of you guys answers, comments and demonstrations are such a wealth. Thanks you so much.
Weāve not even started yetā¦
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.
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
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 ā¦
If thatās what you want, donāt use css :target, use javascript.
HTML
Use CSS
Then JavaScript