Magento Tips & Tricks

How To Create Vertical Navigation Menu in Magento Admin

In this article we will describe how to create vertical navigation menu in Magento admin panel. This will be helpful if you want to improve usability of admin panel by taking advantage of modern wide monitors. Or if you want to give a fresh look to custom Magento admin theme.

To turn top horizontal navigation menu into vertical one positioned at the left side we will need to add custom CSS and use some of Javascript magic.

So basically all we will need is only to include one css and some javascript file into admin panel. So will edit core xml file… (got slapped in the face) will create new custom admin theme and add it there.

We will create simple module called Verticalnav that will consist of module and config xml files and observer that will set admin theme to new custom theme called verticalnav.

/app/etc/modules/Nwdthemes_Verticalnav.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Nwdthemes_Verticalnav>
            <active>true</active>
            <codePool>community</codePool>
        </Nwdthemes_Verticalnav>
    </modules>
</config>

/app/code/community/Nwdthemes/Verticalnav/etc/config.xml

<?xml version="1.0"?>
<config>
  <global>
    <models>
      <nwdthemesverticalnavcontroller>
        <class>Nwdthemes_Verticalnav_Controller</class>
      </nwdthemesverticalnavcontroller>
    </models>
    <events>
      <adminhtml_controller_action_predispatch_start>
        <observers>
          <nwdthemes_themeoverride_observer>
            <type>singleton</type>
            <class>Nwdthemes_Verticalnav_Controller_Observer</class>
            <method>overrideTheme</method>
          </nwdthemes_themeoverride_observer>
        </observers>
      </adminhtml_controller_action_predispatch_start>
    </events>
  </global>
</config>

/app/code/community/Nwdthemes/Verticalnav/Controller/Observer.php

<?php

class Nwdthemes_Verticalnav_Controller_Observer {
	public function overrideTheme() {
		Mage::getDesign()
			->setArea('adminhtml')
			->setTheme('verticalnav');
	}
}

After uploading this new files to Magento and logging into admin panel you will have new custom admin theme there. Actually it will not differ from default one. Well we don’t added any design updates there yet. It is time to change it now.

Lets add local.xml file to make some design updates. Here we will add new class to body, it will be used to override styles from menu.css that can be loaded after our css file. Custom css, javascript file and jQuery will be added here too.

/app/design/adminhtml/default/verticalnav/layout/local.xml

<?xml version="1.0"?>
<layout version="1.0.0">
    <default>
	<reference name="root">
    		<action method="addBodyClass"><className>verticalnav</className></action>
    	</reference>
	<reference name="head">
		<action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
		<action method="addItem"><type>skin_js</type><name>js/jquery.noconflict.js</name></action>
		<action method="addItem"><type>skin_js</type><name>js/verticalnav.js</name></action>
		<action method="addItem"><type>skin_css</type><name>css/verticalnav.css</name></action>
	</reference>
    </default>
</layout>

Here goes our css file. In it we overriding css styles of horizontal navigation dropdown menu to turn it into vertical accordion navigation sidebar. It will have fixed width of 300 pixels. Same offset added to middle and footer areas to prepare space for our navigation. Later in this file you can add more styles to make this navigation even more beautiful by adding icons, hover effects etc.

/skin/adminhtml/default/verticalnav/css/verticalnav.css

.verticalnav .nav-bar           { border: 0; padding: 0; width: 300px; overflow: hidden; position: absolute; z-index: 1; }
.verticalnav #nav               { width: 300px; }
.verticalnav #nav a             {
                                    line-height: 49px;
                                    font-size: 1.05em;
                                    padding: 0 20px 0 27px;
									float: none;
                                }
.verticalnav #nav a:hover       { line-height: 49px; }
.verticalnav #nav > li          { background: none; border-bottom: 1px solid; clear: both; width: 300px; }
.verticalnav #nav li.active     { margin: 0; background: none; }
.verticalnav #nav li ul li span
                                { border: 0; }
.verticalnav #nav li.active ul a span
                                { border-bottom: 0;  margin-bottom: 0; }
.verticalnav #nav ul            { top: 51px; width: 300px; border: 0; padding: 0; position: inherit; left: 0; top: 0; }
.verticalnav #nav ul li         { background-image: none; width: 300px; padding: 0; }
.verticalnav #nav ul li a       { font-size: 1.05em; border-top: 1px solid; padding: 16px 22px 16px 27px;  }
.verticalnav #nav ul ul li:first-child > a
                                { border-top-width: 1px;  }
.verticalnav #nav ul span,
.verticalnav #nav ul li.last li span
                                { background: none; line-height: 1.05em; padding: 0; }
.verticalnav #nav ul li.last    { background-image: none; border-bottom: none; padding-bottom: 0; }

.verticalnav #nav ul ul         { top: 0; background-image: none; }
.verticalnav #nav ul ul ul      { top: 0; }
.verticalnav #nav li.over ul    { left:0; }
.verticalnav #nav li.over ul ul { left:0; }
.verticalnav #nav li.over ul li.over ul
                                { left:0; }

.verticalnav #nav ul ul ul      { left:0; }
.verticalnav #nav li.over ul li.over ul ul
                                { left:0;}
.verticalnav #nav li.over ul li.over ul li.over ul
                                { left:0; }
.verticalnav #nav li.parent a	{ position: relative; }
.verticalnav #nav ul li.parent a,
.verticalnav #nav ul li.parent li.parent a
                                { background-image: none; }
.verticalnav #nav li.parent > ul > li > a
								{ padding-left: 47px; font-size: 0.95em; }
.verticalnav #nav li.parent ul li a:before
								{  top: -2px; }
.verticalnav #nav ul li.parent > ul > li > a
								{ padding-left: 67px; }
.verticalnav #nav ul ul li.parent > ul > li > a
								{ padding-left: 87px; }

.verticalnav .footer,
.verticalnav .middle,
.verticalnav .notification-global
                                { margin-left: 300px }

OK now it looks almost like what we wanted to do. But not exactly. It stopped to act like dropdown, but not yet have accordion functionality. This will be achieved in our javascript file. Note that jQuery library is in use there with noconflict feature to avoid conflicts with Prototype.js used in Magento admin panel.

/skin/adminhtml/default/verticalnav/js/verticalnav.js

(function(jQuery) {
jQuery(document).ready(function() {

	jQuery('#nav .parent > a').addClass('collapsed');
	jQuery('#nav ul').hide();
	jQuery('#nav .parent > a').on('click', function(e) {
		var $item = jQuery(this);
		var parentOffset = $item.parent().offset();
		var relX = e.pageX - parentOffset.left;
		var arrowClicked = relX > $item.outerWidth() - 50;

		if ($item.hasClass('collapsed'))
		{
			$item.siblings('ul').slideDown(400);
			$item.parents('li').siblings('li').children('.parent a:not(.collapsed)')
				.addClass('collapsed')
				.siblings('ul').slideUp();
			$item.removeClass('collapsed');
		}
		else
		{
			$item.siblings('ul').slideUp(400);
			$item.addClass('collapsed');
		}

		if (arrowClicked)
		{
			e.preventDefault();
		}
	});
	jQuery('#nav .parent a.active').trigger('click');

});
})($nwd_jQuery);

That’s it, after uploading module files and refreshing your Magento admin panel you will see vertical navigation menu. It will look like this.

Magento Admin Vertical Navigation Menu

Thank you for reading. Hope this article will be helpful to you. Sources of module created in this tutorial are available here. Also you may like to check our Wunderadmin Magento Admin Theme. Vertical navigation menu sidebar was created there in similar way.

2 thoughts on “How To Create Vertical Navigation Menu in Magento Admin

  1. Thank you for the tutorial, if possible please include snapshot of the final outcome. In that way it will be more useful for the readers. I appreciate your efforts. Thank you so much.

Leave a Reply

Your email address will not be published. Required fields are marked *