CSS Panel menu (Drawer menu)
Thursday, February 20, 2014
Tired of Javascript conflicts in drawer menu, here it is good news for developer. Drawer menu can be implemented only using CSS and not Javascript.
I came across the CSS panel menu which I have used in one of my kendo UI Mobile project. CSS panel menu is the customized version of JPanel menu (http://jpanelmenu.com/)
Check the link http://css-tricks.com/off-canvas-menu-with-css-target/
Advantages :
It's all CSS! Less code overall. Less resources to load. Works without JavaScript. Transition smoother than JavaScript transition.
Disadvantages :
Limited browser support. :target is IE9+ (the whole thing fails if :target doesn't work). Transitions are IE 10+. Changing classes or hide/showing/animating with JavaScript can overcome any browser limitations. Also you'll have more freedom in how the markup can be arranged instead of being forced into the specific order presented here. Also possibly slightly better semantics, not needing separate links for opening and closing the menu.
I came across the CSS panel menu which I have used in one of my kendo UI Mobile project. CSS panel menu is the customized version of JPanel menu (http://jpanelmenu.com/)
Check the link http://css-tricks.com/off-canvas-menu-with-css-target/
Advantages :
It's all CSS! Less code overall. Less resources to load. Works without JavaScript. Transition smoother than JavaScript transition.
Disadvantages :
Limited browser support. :target is IE9+ (the whole thing fails if :target doesn't work). Transitions are IE 10+. Changing classes or hide/showing/animating with JavaScript can overcome any browser limitations. Also you'll have more freedom in how the markup can be arranged instead of being forced into the specific order presented here. Also possibly slightly better semantics, not needing separate links for opening and closing the menu.
0 comments