Push Menu Plugin Documentation



Description

Push Menu WordPress plugin - Soft and loud! Off Canvas menu molded to perfection with slider, widget areas and much more. It's easy to setup, and with lot of options. It comes with Push Menu Icon and Push Menu Slider widgets, and there are also top / bottom widget areas for some custom content. Possiability to enable social icons at the bottm, or to use user registration links instead is a big plus. Plugin is coded with latest scss technology. It's light and fast.


You can obtain Push Menu from Envato Market:

Get It »


Installing Push Menu plugin

Note: After downloading plugin file, first unzip it in order to be able to access and to install push-menu.zip. If you try to install parent .zip file which contain both plugin installation and documentation, installation will fail.

To install it, from WordPress back end, navigate to Plugins > Add New > Upload Plugin and select push-menu.zip file. Finally click Install Now:


After installation, Activate the plugin.




Push Menu Integration

When Push menu is actiavted and configured, default theme menu will be replaced with toggle button which will reveal off canvas menu on click. You can also replace several menus, so if you decide to use some other menu, it will also use Push Menu Off Canvas layout. In order to set it up, you first need to assign one of your menus to one of theme predefined menu locations. Navigate to Appereance > Push Menu options > General, and select one of your menus, or create a new one, assign it to menu location and Save Changes.



Finally navigate to Appereance > Push Menu options > General, select previously assigned menu, or select multiple menus with Ctrl + Click method, and Save Changes.


With these few steps, menu is ready, and it will be displayed instead of default theme menu.


Clicking on Hamburger menu will open off canvas menu.


In few steps above, you saw a glimpse of Push Menu options, and we will cover all of them in following chapter.


Manual Integration

Note: For manual integration, intermediate coding knowledge is required.

Usage:

<?php pushmenu_integration($args); ?>

Default arguments:

$args = array(
   'theme_location' => '',
   'menu' => ''
);

Parameters:

'menu'

Required - Pass selected menu to this argument so you can initialize Push Menu for it. If you do not pass 'menu' argument, Push Menu will call menu which was created first.

'theme_location'

Optional - You can pass the theme location if you want, but it is not mandatory, and Push Menu requires only 'menu' argument in order to initialize it for the selected menu.

To find the menu you want to integrate go to Appearence > Menus. Edit existing menu, or create new. When done, copy the Menu Name, and then pass it to the 'menu' argument when calling Push Menu.


Then go to theme files (usually header.php) and paste integration function where you want it.

Example:

<?php
  //pass the selected menu to the arguments array (In this example I will be using Header Menu)
  $args = array( 'menu' => 'Header Menu' ); 

  //call Push Menu
  pushmenu_integration($args);
?>

Push Menu Options

You can access Push Menu Options from Appereance > Push Menu options. While there, you will see several tabs on the left and accessing each one will reveal several sets of options.


Note: For each option which is expecting value, like line height, margin, padding, font size, you just need to type value in. Do not add px at the end unless instructed differently by description next to it.

All options are self explanatory, but we will list and cover them briefly.

GENERAL

Name Description
MENU NAME Select Menu that will be integrated as Push Menu.
MENU ALIGNMENT Select Push Menu Navigation alignment.
MENU SHADOW Enable or disable box shadow for the menu container.
PUSH ANIMATION Choose to enable, or disable push animation applied to the website while menu is entering from the side.
ENTRANCE ANIMATION DURATION Enter the duration of the entrance animation. Value will be calculated in milliseconds.
SUBMENU ELEMENTS ANIMATION Choose to enable, or disable submenu menu items appear animation once menu is opened.
LOGO, Text, Text Color, Text size Upload your logo image, or choose to display text as logo. Image will have priority over text, so if you want to display text, you need to make sure that no image is added, or remove one is set.
BUTTON, Button Layout, Button Color, Close Button Color, Button Top Offset, Button Side Offset Set button layout, text and color.
MENU POSITION Select the position of the Push Menu menu. Choose either to place to the left side, or right side of the screen

CUSTOMIZE

Name Description
PUSH MENU WIDTH Edit Push Menu menu width. Value will be calculated in px. Only number input is allowed.
PUSH MENU WIDTH ON MOBILE DEVICES Edit Push Menu menu max width on mobile devices.
LOGO STYLING, Width, Height, Position From Top Customize your logo, set it margins and width and height properties.
MENU BACKGROUND, BG color, BG image, position, size Select Menu background color, or image. If image and color are used the background image will be visible, as it holds priority over color. For Background size you can enter cover, contain or custom value for width and height. For background position enter position for x and y axis.
MENU NAVIGATION TOP MARGIN Set the top margin for the main menu.
MENU TEXT, Font size, Line Height Change Main font and font-size of Push Menu menu.
MENU TEXT TRANSFORM Select menu text transform.
TEXT PADDING, Top, Bottm, Left, Right Edit text padding of Push Menu menu.
TEXT MARGIN, Top, Bottm, Left, Right Edit text margin of Push Menu menu.
MENU ITEMS STYLES, Text color, Hover color Change menu elements style when user hovers them with the mouse.
SUBMENU TEXT, Font Stize, Line Height, Text Transform Change submenu font and font-size.
SUBMENUS STYLES, Text color, Hover color, Dropdown Animation Speed, Dropdown Open/Close Trigger Change submenus text font-size, color and line height.

WIDGETS

Push Menu have two widget areas, Push Menu Top Sidebar and Push Menu Bottom Sidebar. Placing widgets inside these widget areas will disaply widgets at the top or bottom of the Push Menu. You can access them from Appearance > Widgets.


Beside these two widget areas, there are also two widgets which comes with Push Menu, and these are Push Menu Image Slider and Push Menu Icon. Options for these widgets are self explanatory. We need to point out that when you are adding images, and links into corresponding boxes of Push Menu Image Slider widget, you need to separate each input by hitting enter.


Push Menu Icon widget is shown on the image below, and beside choosing icon and setting url, you can also add text next to the icon.


Name Description
WIDGET TEXT, Font Size, Line Height, Titles Color, Text Color Change widget text font-size, color and line height.
AFTER BOTTOM WIDGET LINKS, Displayed In After Menu Widget, Display Links Choose to display social links, or login/logut and register links. Those links will be displayed at the bottom of after menu widget area.
SOCIAL LINKS TOP OFFSET Change social links area top offset. You can enter value in px, em or %.
SOCIAL LINK COLOR Select link color for social icons or login/log out links.
SOCIAL LINKS, Facebook, Google+, Twitter, Instagram Add Social links to the bottom of after menu widget area.
LOGIN/REGISTER LINKS, Login Text, Logout Text, Register Text, Login Link, Register Link Add Login/logout and register links to the botom of after menu widget area. This will create links to default wordpress login and register pages, if you have custom pages you can add your links.

IMPORT and EXPORT

These options allows you to export current settings and to import them later on.


Contact Form

Contact form which is present in our demo isn't part of the menu. It is just demonstrating additional menu content, but we will provide steps for creating it since you may want to integrate it as well. Form is created with Contact Form 7 plugin which is free and can be downloaded from wordpress.org.

Crete new form and add following code for it:

<div class="pushmenu-newsletter-form">[email* your-email placeholder "Your E-Mail"][submit class:newsletter "&#xf18e;"]</div>

If you want to change button icon, use Font Awesome unicodes.

In order to style the form like in demo, apply custom css code below from WordPress back end > Appearance > Customize > Additional CSS:

/*contact form 7 styling*/
.pushmenu-newsletter-form {
    height: 40px;
}

input.wpcf7-form-control.wpcf7-submit.newsletter {
    font-family: FontAwesome;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 20px;
    color: #fff;
    background: #ac0404;
    border-bottom: 3px solid #000;
    padding: 0 8px;
    height: 40px;
    line-height: 36px;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    display: inline-block;
    width: 50px;
    vertical-align: top;
}

.pushmenu-newsletter-form input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email {
    padding: 15px 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 13px;
    width: 80%;
    margin-bottom: 0;
    vertical-align: top;
    height: 40px;
    line-height: 40px;
    background-color: transparent;
    color: #000;
    border: 1px solid #B4B4B4;
    border-right: 0;
}

Note: For all questions regarding Contact Form 7 plugin please consult plugin documentation or contact plugin author. We are not in position to provide support for 3rd party plugins.

Credits

List of the resources used with Push Menu WordPress plugin:

Copyright

Copyright © 2017 PressFore