in my blog http://www.anandu.info/ i use a nav menu(left) which expands on clicking and closes on clicking again,but that uses jquery is there a way to replicate it using only css
If you were to use the :target pseudo, then you could make the button go to #menu, ID the part that is hidden as id="menu", and then style from there.
There's no way you can do it with CSS only.
Related
Looking at this example:
https://www.w3schools.com/howto/howto_css_subnav.asp
I would like to make the submenu disappear on click without using Javascript. Is this possible?
It can be made to appear on hover without JS. The idea would be to hide the submenu once a submenu item is clicked. For example:
If you click "Package" the entire submenu and red background should not be shown.
EDIT 1:
I should add that I experimented using :has and :target in various combinations to set change it to display: none. That did not work.
I think that technically the answer to your question is yes, it is possible, but actually no - at least not in a way your page will continue functioning normally afterwards. Let me explain:
If you were to use anchor elements for our subnav links/buttons you could use a combination of the the :visited and :has pseudo classes to set the submenu's display to none (display: none;) and the main menu's color to the original color. However, I believe this will mean you won't be able to make the submenu appear again unless you were to somehow cancel the "visited" status of the anchor element that was clicked which if possible, will most certainly include the use of JS anyway...
I wonder is there any good example of pure css only collapsible menu
This is an example of it
http://cssdeck.com/labs/pure-css-tree-menu
The example uses input:checked as the trigger to change children from display:none to display:block
This is example use li:hover to do that
Make pure css collapsible menu triggered by down arrow for mobile browsers
But I want to use li:click as the trigger, is this possible?
Thank you very much for your advice, and very appreciate that I can have a example.
Yes we can!
You can use the :focus pseudo which is activaded on click: http://jsfiddle.net/w5zev/2/ deactivation is more tricky for this technique.
Taken from a google search which led me here: http://quhno.internetstrahlen.de/myopera/csstests/collapsible-paragraph.html#url
You can't do this purely with CSS, :click isn't even a valid css selector attribute(someone please correct me if I'm wrong here). You can only use: active, hover & visited. You CAN however use javascript or jQuery
eg. $('li').click(function(){//Do Something});
I know there probably is, but here's the situation:
I have a mega menu with links in the tab. I'd like for the tab to show on focus when a link on the inside of the tab has the focus.
Most mega menus only work on hover. I've got the <li> to work on focus (because it's right before the that shows), using li:focus. But once you tab to the inside right after the <li> and the link inside of that, the <div> disappears.
I'm sure there's a way it can be done through jQuery, but I'm trying to avoid that.
Thanks!
You can't use css to select parent element, the only way is to use jQuery parent() method.
There is currently no way to select the parent of an element in CSS. This will probably be available in CSS4.
I am trying to simulate an accordion menu in CSS.
I cannot use javascript for a variety of reason, so its CSS only.
Is there some simple code to show/hide a div on the click of a button
If you're looking for a pure CSS accordion this article and demo may help...
https://catalin.red/dist/uploads/2011/05/css3-accordion.html
https://catalin.red/css3-accordion/
I believe it can be done with CSS3, but not all browsers support animations. Here's the best I could find that explicitly states no Javascript.
http://featofdesign.com/stephen/2011/06/16/css3-simple-slideout-accordion-menu/
I don't think you can make it behave like an actual accordion without javascript.
About the best thing you could do is to make every menu option collapsed and on hover make it expand, but as soon as you hover out, the menu option will collapse again.
My company is starting to move toward adding the iPad as a browser i have to test my work on. This got me thinking...
Since touch-based clients don't have a :hover state are pure CSS dropdowns going to go away?
Then i thought even if you add some javascript to make the menus popup on click... What happens when the menu item (that expands to another menu) is also a link. How do you tell the difference between a click to see the menu or a click to go to that link?
What's going to happen with dropdown menus when touch based clients become more ubiquitous? Are there any workarounds out there yet?
Pure CSS dropdowns are possible on touch devices thanks to the :target pseudo-class. Basically, the pseudo-class is active for objects that have an id matching the current URL fragment. This means that the URI fragment can be used to store and share state with CSS. For example, let's say we're on http://example.com/, which has the following HTML and CSS:
<style>
#menu {
display: none;
}
#menu:target {
display: block;
}
</style>
Show the Menu!
<div id="menu"> ... </div>
The menu is hidden by default. Clicking or tapping the link will change the URL fragment to "menu" (full URI: http://example.com/#menu). Because now there is an element with an id equal to the URI fragment ("menu"), the :target pseudo-class applies, and the display property is changed.
Further reading:
Usage and Example at Mozilla Developers Network
Implementation of a touch-friendly pure CSS dropdown
This is kind of a design issue forced by a technical issue. I'd probably redesign/reorganize my content into one of three ways:
1- Click-activated mega-menus (example). The downfall here is that you might have real estate issues.
2- Top-Level Category links that lead to Navigation Pages. The downfall here is that it requires an extra page load to get to the content.
3- Make each Menu Item consist of two buttons, one to navigate to the page (the text) and one to expand the child menu (an arrow.) You'd still need, though, to provide the child navigation, if present, on the page the user goes to when they click a menu item.
my nav bar has this functionality (collins.class401.com/nav) for the crap you need
its a modified version of TJK_DropDownMenu http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp
their version (and mine) uses visibility for :hover
their version also only supports having <a>'s as menu items, while mine also supports <span>s (though using spans breaks their keyboard navigation) if you want something like a form, or a button in your menu, like i have
their version usually works for :hover on ipod touch, as long as you click in the 'white space'
my version is much more friendly to touch devices, and has the clickable arrows to toggle the display using prototype.js,
or, if they can't hover, and javascript is off, setting a php session and reloading the page, then inserting a style to the style tag at the end of the page which will overwrite the visibility and display according to whether the clicked to show or hide