Club Drupal

Quick info:

The menu hierarchy is not simpler and easier to understand

(removing the unnecessary transparency and only highlighting the correct menus).

 It also adds shortcut links that can be edited from the core shortcut module. 

 The shortcut links fit nicely and have a small icon that separates them from

 the normal admin menu links.

Requirements:

Requires the administration menu module (http://drupal.org/project/admin_menu) 

Installation:

1) Download and install like any other drupal module

2) Enable the “Administration menu Adminimal Theme” from the module manager. 

3) Refresh your administration page and you must be good to go!

  margin-top: 0px !important;

  border-bottom: 1px solid #111111;

  background: #0074BD;

  background: #0074BD;

  border-top: 3px solid #0074BD;

  background: #0074BD;

  color: #999999;

body.adminimal-menu.admin-menu.menu-render-newline {

  margin-top: 56px !important;

  color: #EEEEEE !important;

  background: url("images/shortcut.png") no-repeat scroll 7px 7px #222222;

  color: #EEEEEE;

  color: #999999;

; Information added by Drupal.org packaging script on 2015-12-03

version = "7.x-1.7"

datestamp = "1449182323"

  // Include the update file.

  include 'updates/update_7100.php';

	$load_slicknav = variable_get('adminimal_admin_menu_slicknav', TRUE );

	$load_jQuery = variable_get('adminimal_admin_menu_jquery', TRUE );

	// Support for the Environment Indicator module.

  if (module_exists('environment_indicator')) {

  $environment_info = environment_indicator_get_active();

	  drupal_add_css('

      div.slicknav_menu a.slicknav_btn:after {

      	content: "' . $environment_info['name']. '";

      	margin-left: 1em;

      	color: ' . $environment_info['text_color'] . ';

      	font-size: 12px;

      	background-color: ' . $environment_info['color'] . ';

				padding: 2px 5px;

			}

			#admin-menu-wrapper {background: #222 !important;}

			',

      array(

        'group' => CSS_DEFAULT,

        'type' => 'inline',

        'preprocess' => FALSE,

        'weight' => '100',

      ));

	}

	// Check if both slicknav and custom jQuery must be loaded.

	if ($load_slicknav and $load_jQuery) {

	  drupal_add_js($path . '/js/jquery.min.js', array( 'type' => 'file', 'scope' => 'header', 'weight' => 888 ));

		drupal_add_js($path . '/js/slicknav/jquery-no-conflict.slicknav.js', array( 'type' => 'file', 'scope' => 'header', 'weight' => 888 ));

		drupal_add_css($path . '/js/slicknav/slicknav.css');

	}

	elseif ($load_slicknav and !$load_jQuery) {

		drupal_add_js($path . '/js/slicknav/jquery.slicknav.js', array( 'type' => 'file', 'scope' => 'header', 'weight' => 888 ));

		drupal_add_css($path . '/js/slicknav/slicknav.css');

	}

	drupal_add_js($path . '/js/adminimal_admin_menu.js', array( 'type' => 'file', 'scope' => 'header', 'weight' => 888 ));

	// Create the responsive menu.

	if (variable_get('adminimal_admin_menu_slicknav', 'TRUE')) {

	  // Prepare the responsive menu and Join the Icon menu with the administration menu.

	  $responsivemenu = array_merge($content['icon'], $content['menu']);

	  // Give it ID to target it later with js and css.

	  $responsivemenu['#wrapper_attributes']['id'] = 'admin-menu-menu-responsive';

	  // Move the icon menu to the top.

	  $responsivemenu['icon']['#weight'] = '-100';

	  // Change the link title to Administration.

	  $responsivemenu['admin/index']['#title'] = t('Administration');

	  // Bind the responsive menu the the content varable so it can be rendered.

	  $content['responsive-menu'] = $responsivemenu;

	  // Create the responsive shortucts.

	  $content['responsive']['shortcuts'] = array(

	    '#prefix' => '<div id="admin-menu-shortcuts-responsive">',

	    '#suffix' => '</div>',

	    '#pre_render' => array('shortcut_toolbar_pre_render'),

	  );

	}

  // Fix the viewport, correcting the mobile device zoom.

  /** @todo - Mybre remove this and let the theme manage the view pont.

   *  But i was suprised that only few "responsive" drupal themes were fixing

   *  the viewport.

   '#tag' => 'meta',

   '#attributes' => array(

     'name' => 'viewport',

     'content' => 'width=device-width, initial-scale=1, maximum-scale=1',

   ),

 * @return  boolean Result of access checks.

    '#title' => t('Shortcuts options'),

    '#description' => t('Select how the shortcuts will be rendered. There are currently 6 options: <ol> <li>Hidden -> The shortcuts will not be rendered inside the admin menu</li> <li>Inline -> The shortcuts will be rendered on the same line with the root menu links</li> <li>Collapsed -> The sorctus links will be collapsed like a normal menu. <strong>(Default option)</strong></li> <li>Newline -> The shortcuts will be rendered on a new line. Below the root menu links.</li> <li>Dropdown -> The shortcuts will be rendered inside a dropdown using the select html tag.</li> <li>Exclusive -> Only the shortcuts will be rendered, and the normal menu will be hidden.</li></ol>'),

  // Create the shortcut category.

	$form['advanced_settings']['adminimal_admin_menu_slicknav'] = array(

	  '#type' => 'checkbox',

	  '#default_value' => variable_get('adminimal_admin_menu_slicknav', 'TRUE'),

	  '#title' => t('Enable Responsive Menu.'),

	  '#description' => t('<strong>Default value => Checked</strong>. 

	  While disabling this option could save you few kilobytes (around 3KB), i will completely disable the responsive menu functionality.'),

	);

	$form['advanced_settings']['adminimal_admin_menu_jquery'] = array(

	  '#type' => 'checkbox',

	  '#default_value' => variable_get('adminimal_admin_menu_jquery', 'TRUE'),

	  '#title' => t('Load the requred jQuery 1.7 library automagically.'),

	  '#description' => t('<strong>Default value => Checked</strong>. This will load the newer jQuery version 1.7 using 

	  the no-conflict method so it wont interfere with any existing jQuery or other java-script libraries. 

	  The only reason to uncheck this if you are already using a newer version of jQuery site-wide and its globally accessible by the "$" variable. 

	  Unchekig this option could save you 33KB, but it may also break your javasctipt if not used correctly.'),

       ':input[name="adminimal_admin_menu_slicknav"]' => array('checked' => TRUE),

       variable_get('adminimal_admin_menu_jquery', 'TRUE') => FALSE,

     ),

	);

Designed and developed by: ANDiTKO -> http://anditko.com

Some of the Icons are from the Icons8 set -> http://icons8.com/ and -> http://VisualPharm.com

(function($) {

Drupal.admin = Drupal.admin || {};

Drupal.admin.behaviors = Drupal.admin.behaviors || {};

/**

 * @ingroup admin_behaviors

 * @{

 */

/**

 * Apply active trail highlighting based on current path.

 *

 * @todo Not limited to toolbar; move into core?

 */

Drupal.admin.behaviors.toolbarActiveTrail = function (context, settings, $adminMenu) {

  if (settings.admin_menu.toolbar && settings.admin_menu.toolbar.activeTrail) {

    $adminMenu.find('> div > ul > li > a[href="' + settings.admin_menu.toolbar.activeTrail + '"]').addClass('active-trail');

  }

};

Drupal.admin.behaviors.shorcutcollapsed = function (context, settings, $adminMenu) {

  // Create the dropdown base 

  $("<li class=\"label\"><a>"+Drupal.t('Shortcuts')+"</a></li>").prependTo("body.menu-render-collapsed #toolbar div.toolbar-shortcuts ul"); 

};

Drupal.admin.behaviors.shorcutselect = function (context, settings, $adminMenu) {

  // Create the dropdown base

  $("<select id='shortcut-menu'/>").appendTo("body.menu-render-dropdown #toolbar div.toolbar-shortcuts");

  // Create default option "Select"

  $("<option />", {

    "selected"  :  "selected",

    "value"     :  "",

    "text"      :  Drupal.t('Shortcuts')

  }).appendTo("body.menu-render-dropdown #toolbar div.toolbar-shortcuts select");

  // Populate dropdown with menu items

  $("body.menu-render-dropdown #toolbar div.toolbar-shortcuts a").each(function() {

    var el = $(this);

      "value"   :  el.attr("href"),

      "text"    :  el.text()

  $("body.menu-render-dropdown #toolbar div.toolbar-shortcuts select").change(function() {

    window.location = $(this).find("option:selected").val();

  });

  $('body.menu-render-dropdown #toolbar div.toolbar-shortcuts ul').remove();

};

	var

	// default settings object.

	defaults = {

		label: 'MENU',

		duplicate: true,

		duration: 200,

		easingOpen: 'swing',

		easingClose: 'swing',

		closedSymbol: '►',

		openedSymbol: '▼',

		prependTo: 'body',

		parentTag: 'a',

		closeOnClick: false,

		allowParentLinks: false,

		init: function(){},

		open: function(){},

		close: function(){}

	},

	mobileMenu = 'slicknav',

	prefix = 'slicknav';

	function Plugin( element, options ) {

		this.element = element;

        // jQuery has an extend method which merges the contents of two or

        // more objects, storing the result in the first object. The first object

        // is generally empty as we don't want to alter the default options for

        // future instances of the plugin

        this.settings = $.extend( {}, defaults, options) ;

        this._defaults = defaults;

        this._name = mobileMenu;

        this.init();

	}

	Plugin.prototype.init = function () {

        var $this = this;

		var menu = $(this.element);

		var settings = this.settings;

		// clone menu if needed

		if (settings.duplicate) {

			$this.mobileNav = menu.clone();

			//remove ids from clone to prevent css issues

			$this.mobileNav.removeAttr('id');

			$this.mobileNav.find('*').each(function(i,e){

				$(e).removeAttr('id');

			});

		}

		else

			$this.mobileNav = menu;

		// styling class for the button

		var iconClass = prefix+'_icon';

		if (settings.label == '') {

			iconClass += ' '+prefix+'_no-text';

		}

		if (settings.parentTag == 'a') {

			settings.parentTag = 'a href="#"';

		}

		// create menu bar

		$this.mobileNav.attr('class', prefix+'_nav');

		var menuBar = $('<div class="'+prefix+'_menu"></div>');

		$this.btn = $('<'+settings.parentTag+' aria-haspopup="true" tabindex="0" class="'+prefix+'_btn '+prefix+'_collapsed"><span class="'+prefix+'_menutxt">'+settings.label+'</span><span class="'+iconClass+'"><span class="'+prefix+'_icon-bar"></span><span class="'+prefix+'_icon-bar"></span><span class="'+prefix+'_icon-bar"></span></span></a>');

		$(menuBar).append($this.btn);		

		$(settings.prependTo).prepend(menuBar);

		menuBar.append($this.mobileNav);

		// iterate over structure adding additional structure

		var items = $this.mobileNav.find('li');

		$(items).each(function () {

			var item = $(this);

			data = {};

			data.children = item.children('ul').attr('role','menu');

			item.data("menu", data);

			// if a list item has a nested menu

			if (data.children.length > 0) {

				// select all text before the child menu

				var a = item.contents();

				var nodes = [];

				$(a).each(function(){

					if(!$(this).is("ul")) {

						nodes.push(this);

					}

					else {

						return false;

					}

				});

				// wrap item text with tag and add classes

				var wrap = $(nodes).wrapAll('<'+settings.parentTag+' role="menuitem" aria-haspopup="true" tabindex="-1" class="'+prefix+'_item"/>').parent();

				item.addClass(prefix+'_collapsed');

				item.addClass(prefix+'_parent');

				// create parent arrow

				$(nodes).last().after('<span class="'+prefix+'_arrow">'+settings.closedSymbol+'</span>');

			} else if ( item.children().length == 0) {

				 item.addClass(prefix+'_txtnode');

			}

			// accessibility for links

			item.children('a').attr('role', 'menuitem').click(function(){

				//Emulate menu close if set

				if (settings.closeOnClick)

					$($this.btn).click();

			});

		});

		// structure is in place, now hide appropriate items

		$(items).each(function () {

			var data = $(this).data("menu");

			$this._visibilityToggle(data.children, false, null, true);

		});

		// finally toggle entire menu

		$this._visibilityToggle($this.mobileNav, false, 'init', true);

		// accessibility for menu button

		$this.mobileNav.attr('role','menu');

		// outline prevention when using mouse

		$(document).mousedown(function(){

			$this._outlines(false);

		});

		$(document).keyup(function(){

			$this._outlines(true);

		});

		// menu button click

		$($this.btn).click(function (e) {

			e.preventDefault();

			$this._menuToggle();			

		});

		// click on menu parent

		$this.mobileNav.on('click', '.'+prefix+'_item', function(e){

			e.preventDefault();

			$this._itemClick($(this));

		});

		// check for enter key on menu button and menu parents

		$($this.btn).keydown(function (e) {

			var ev = e || event;

			if(ev.keyCode == 13) {

				e.preventDefault();

				$this._menuToggle();

			}

		});

		$this.mobileNav.on('keydown', '.'+prefix+'_item', function(e) {

			var ev = e || event;

			if(ev.keyCode == 13) {

				e.preventDefault();

				$this._itemClick($(e.target));

			}

		});

		// allow links clickable within parent tags if set

		if (settings.allowParentLinks) {

			$('.'+prefix+'_item a').click(function(e){

					e.stopImmediatePropagation();

			});

		}

    };

	//toggle menu

	Plugin.prototype._menuToggle = function(el){

		var $this = this;

		var btn = $this.btn;

		var mobileNav = $this.mobileNav;

		if (btn.hasClass(prefix+'_collapsed')) {

			btn.removeClass(prefix+'_collapsed');

			btn.addClass(prefix+'_open');

		} else {

			btn.removeClass(prefix+'_open');

			btn.addClass(prefix+'_collapsed');

		}

		btn.addClass(prefix+'_animating');

		$this._visibilityToggle(mobileNav, true, btn);

	}

	// toggle clicked items

	Plugin.prototype._itemClick = function(el) {

		var $this = this;

		var settings = $this.settings;

		var data = el.data("menu");

		if (!data) {

			data = {};

			data.arrow = el.children('.'+prefix+'_arrow');

			data.ul = el.next('ul');

			data.parent = el.parent();

			el.data("menu", data);

		}

		if (data.parent.hasClass(prefix+'_collapsed')) {

			data.arrow.html(settings.openedSymbol);

			data.parent.removeClass(prefix+'_collapsed');

			data.parent.addClass(prefix+'_open');

			data.parent.addClass(prefix+'_animating');

			$this._visibilityToggle(data.ul, true, el);

		} else {

			data.arrow.html(settings.closedSymbol);

			data.parent.addClass(prefix+'_collapsed');

			data.parent.removeClass(prefix+'_open');

			data.parent.addClass(prefix+'_animating');

			$this._visibilityToggle(data.ul, true, el);

		}

	}

	// toggle actual visibility and accessibility tags

	Plugin.prototype._visibilityToggle = function(el, animate, trigger, init) {

		var $this = this;

		var settings = $this.settings;

		var items = $this._getActionItems(el);

		var duration = 0;

		if (animate)

			duration = settings.duration;

		if (el.hasClass(prefix+'_hidden')) {

			el.removeClass(prefix+'_hidden');

			el.slideDown(duration, settings.easingOpen, function(){

				$(trigger).removeClass(prefix+'_animating');

				$(trigger).parent().removeClass(prefix+'_animating');

				//Fire open callback

				if (!init) {

					settings.open(trigger);

				}

			});

			el.attr('aria-hidden','false');

			items.attr('tabindex', '0');

			$this._setVisAttr(el, false);

		} else {

			el.addClass(prefix+'_hidden');

			el.slideUp(duration, this.settings.easingClose, function() {

				el.attr('aria-hidden','true');

				items.attr('tabindex', '-1');

				$this._setVisAttr(el, true);

				el.hide(); //jQuery 1.7 bug fix

				$(trigger).removeClass(prefix+'_animating');

				$(trigger).parent().removeClass(prefix+'_animating');

				//Fire init or close callback

				if (!init)

					settings.close(trigger);

				else if (trigger == 'init')

					settings.init();

			});

		}

	}

	// set attributes of element and children based on visibility

	Plugin.prototype._setVisAttr = function(el, hidden) {

		var $this = this;

		// select all parents that aren't hidden

		var nonHidden = el.children('li').children('ul').not('.'+prefix+'_hidden');

		// iterate over all items setting appropriate tags

		if (!hidden) {

			nonHidden.each(function(){

				var ul = $(this);

				ul.attr('aria-hidden','false');

				var items = $this._getActionItems(ul);

				items.attr('tabindex', '0');

				$this._setVisAttr(ul, hidden);

			});

		} else {

			nonHidden.each(function(){

				var ul = $(this);

				ul.attr('aria-hidden','true');

				var items = $this._getActionItems(ul);

				items.attr('tabindex', '-1');

				$this._setVisAttr(ul, hidden);

			});

		}

	}

	// get all 1st level items that are clickable

	Plugin.prototype._getActionItems = function(el) {

		var data = el.data("menu");

		if (!data) {

			data = {};

			var items = el.children('li');

			var anchors = items.children('a');

			data.links = anchors.add(items.children('.'+prefix+'_item'));

			el.data("menu", data);

		}

		return data.links;

	}

	Plugin.prototype._outlines = function(state) {

		if (!state) {

			$('.'+prefix+'_item, .'+prefix+'_btn').css('outline','none');

		} else {

			$('.'+prefix+'_item, .'+prefix+'_btn').css('outline','');

		}

	}

	Plugin.prototype.toggle = function(){

		$this._menuToggle();

	}

	Plugin.prototype.open = function(){

		$this = this;

		if ($this.btn.hasClass(prefix+'_collapsed')) {

			$this._menuToggle();

		}

	}

	Plugin.prototype.close = function(){

		$this = this;

		if ($this.btn.hasClass(prefix+'_open')) {

			$this._menuToggle();

		}

	}

	$.fn[mobileMenu] = function ( options ) {

		var args = arguments;

		// Is the first parameter an object (options), or was omitted, instantiate a new instance

		if (options === undefined || typeof options === 'object') {

			return this.each(function () {

				// Only allow the plugin to be instantiated once due to methods

				if (!$.data(this, 'plugin_' + mobileMenu)) {

					// if it has no instance, create a new one, pass options to our plugin constructor,

					// and store the plugin instance in the elements jQuery data object.

					$.data(this, 'plugin_' + mobileMenu, new Plugin( this, options ));

				}

			});

		// If is a string and doesn't start with an underscore or 'init' function, treat this as a call to a public method.

		} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {

			// Cache the method call to make it possible to return a value

			var returns;

			this.each(function () {

				var instance = $.data(this, 'plugin_' + mobileMenu);

				// Tests that there's already a plugin-instance and checks that the requested public method exists

				if (instance instanceof Plugin && typeof instance[options] === 'function') {

					// Call the method of our plugin instance, and pass it the supplied arguments.

					returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );

				}

			});

			// If the earlier cached method gives a value back return the value, otherwise return this to preserve chainability.

			return returns !== undefined ? returns : this;

		}

	};