WordPress Sidebar Menu : Collapsable With Icons (No Plugin)

Lesser Plugin is used, WordPress database will suffer from lesser issues. With Plain CSS and HTML We Can Create WordPress Sidebar Menu Collapsible, Colored and Change on Mouse Over. WordPress Administration itself Uses Such Menu. We can use Icon Font and Twitter BootStrap CSS to give that appearance in very easy way. There is a WordPress Plugin named MenuMaker Lite, that will give some effect out of the box.

 

WordPress Sidebar Menu Collapsable With Twitter Bootstrap

 

I can not show example live on this webpage, view on CodePen live beloved WordPress Sidebar Menu Collapsable. As you can see, I loaded two CSS :

Plus one extra CSS, in short looks like this :

Here is another with BootStrap, you can expand the list easily.

 

WordPress Sidebar Menu, Collapsable With Only CSS3 and Jquery

 

Here is another example of HTML WordPress Sidebar Menu with Collapsable, icons has not been loaded as path are written as url(../images/sprite.png); , it is designed Orman Clark and demonstrated in TutPlus :

You can download the PSD, separate the icons and make CSS Sprite or use Base64 URI Encoding using our tool. Here is the final result :

 

Conclusion

 

As shown in the example with jQuery and CSS3, it has the least overhead. But, for that quality of CSS coding, knowledge needed is huge. You can use that one. In such case, you have to manually insert the numbers. Automatic fetching of number of posts from one WordPress category in turn will need a PHP snippet, that will increase load on server.

Furthermore, it is tad hard to echo each value in such way. A plugin is actually better for such usage. The needed PHP for WordPress to fetch number of published posts in one category is a Plugin :

There is another plugin to make PHP get executed in WordPress Widget :

Where we wrote :

that will become :