Path Style Menu

Transcription

1 Path Style Menu WordPress Configuration Made by Alessandro Zifiglio

2 After installing the plugin, a new menu item will appear in the left side Navbar of your WordPress Admin page. If you have not already created a menu using the WordPress Nav Menus feature then get on that page. Creating a new menu is pretty straight forward. You only need to give it a "name" and then add menu items to it. This is what any path menu you create will use as it's datasource. Once done, you'll find the Nav menu you've just created, listed as one of the menu items to pick and

3 designate as the data point for the PathMenu. Create New But first things first. Clicking the Path Style Menu menu item in the Admin side bar will take you to the Path menus administration page. Here you can create a new menu and configure it appropriately for use within your WordPress instance. Once a menu is created, you can configure it by going in the Edit tab. Here on the Edit tab, you'll be able to associate one of the menus you created using the WordPress Nav Menus feature. This is consumed by the Path menu. Setting the Datasource The data for the menu is what you create using the WordPress build in Nav Menus feature. Everytime you create a menu using WordPress, the menu will appear in the datasource dropdown list so that you can associate it to your Path Style menu.

4 In our example we have created a Menu called TestData with 3 menu items. This is reflected as a treeview. Most of the options in this page will be enabled based on the kind of menu you created. A Path Style Menu can be of two kinds, Inline or Fixed. An inline menu respects your page flow and can be included alongside content in your page. A fixed menu on the other hand will remain fixed in one of the four corners of the screen, depending on the fixed menu chosen during creation.

5 Customizing the icons through the Image Gallery Browser Customizing the icons visually is possible by clicking a treenode in the treeview structure the menu items are displayed in. This will pop up a dialog that displays all images you added into your media gallery ( A feature of WordPress). You select the new image and it's applied to your menu item. Note however that this is not saved yet. You have to save changes upon completion for the changes to persist. This is true for any modifications you make, not just the image gallery. The selected image is applied to the treenode that launched the Image Gallery dialog you see above.

6 Additional customizations through custom CSS While care has been taken to ensure that you don't ever have to write a single line of code, sometimes you might want to fiddle with the css or javascript to perform the customizations that are unique to your application. To this end you won't be deluded as you can manually override any of the css the path menu uses or add additional javascript.

7 Customizing width and height By default, the width and height of the buttons are : Main button and Back button: 50x50 Item buttons: 40x40 These can be overridden in CSS to match your custom size. Note the following css : #pathmenu1.menu { /*The main x menu item and the back button*/ width: 60px; height: 60px; } #pathmenu1.item { /*effects all child menu items*/ width: 45px; height: 45px; } Replace the highlighted 1 with the id you'll find displayed in your shortcode. Note above how we've changed the width and height of the main button, back button and the individual item buttons from their

8 defaults. Simply pace the CSS in the CSS tab mentioned in the previous section and hit save. Additional customizations through custom JS You can add a block of javascript code in the SelectedItem event handler that is exposed by the Path style menu. This allows you to change the default behavior, which is to navigate to the page in the menu items url. For instance, let's say you wanted to load the pages clicked, in a fancy box or perhaps do some custom processing when a menu item is clicked. You achieve this by adding the apposite code into the textarea designated for your custom javascript. Note above how the url variable is just consumed. The code you write into this box will be injected into the SelectedItem handler where it will part of a autogenerated code, output for you into all your pages where the Menu is visible. Styling the label An arc style menu can include a label beside the icon. Every menu item that has a title will have a label showing beside it when show title in label setting is checked. The label can be styled using standard css that you can add in the css tab when editing a menu. The selector to use when styling the label is as follows : #your_menu_id.captionlabel{ background: black;

9 color: white; } Note that the label container is a simple span element, which is an inline element so keep that in mind when styling. If you need to style an individual icon, i.e. give each icon's label a different styling, then you'll have to select it using the menu item id. To discover the menu item id, just simply use the View autogenerated css option provided by the path menu's admin pages. For instance, if you created your first menu, you'll note an id like the following #pathmenu1_menuitem0.item{ /* background: url('url to icon for page titled: About us') no-repeat;*/ } From the above, you can denote that the label's id will be : #pathmenu1_menuitem0_label{ /*style for label here*/ }

10 Manually centering in-line menus If you need to center the menu when using one of the in-line expand patterns, then you need to wrap the shortcode in a container and set it in css as follows : <div style="width: 50px; height:50px; margin: 0 auto;"> <?php echo do_shortcode("[pathmenu id=1]");?> </div> Note the highlighted css rules above. The width and height are the default sizes of the main button which is 50x50 and we then set the right and left margins to auto. In-line CSS used in the demo above for demonstration purposes. You'll normally want to include this in a CSS class instead. Path menu widget Inline Path style menus can also be included into your pages through a widget. To do this, navigate to the widgets page in WordPress. This is found under the menu option Appearance Widgets. In the widgets page drag and drop the Path Style Menu widget into the widgets area.

11 Adding the menu in your header.php template The menu can be embedded directly in your header.php file. This is the only template file where shortcodes are parsed. To add your shortcode in the header.php file attempt the following : If your shotcode looks like the following : [pathmenu id="1"] Then you have to rewrite it as follows:. <?php echo do_shortcode("[pathmenu id=1]");?> Place the above code exactly where you want the menu to appear in your header.php file. The settings Name type default beziercurve Object null paddingleft number 10 paddingright number 10 paddingtop number 10 paddingbottom number 10 radius number 50 description The control points of a bezier curve {x0, y0, x1, y1, x2, y2, x3}. This allows you to customize the curve fully. eg: {'x0':70, 'y0':45, 'x1':75, 'y1':75, 'x2':75, 'y2':75,'x3':45}. Note: We provide a visual tool that can auto-generate these values by sliding the desired control points. Simply go in the Bezier curve option under the Path Style Menu in the WordPress admin side Navbar. The padding of the main button from the left edge of the screen. The menu has to be created with an expand pattern of Left Bottom Fixed Arc or Left Top Fixed Arc. The padding of the main button from the Right edge of the screen. The menu has to be created with an expand pattern of Right Top Fixed Arc or Right Bottom Fixed Arc. The padding of the main button from the Top edge of the screen. The menu has to be created with an expand pattern of Left Top Fixed Arc or Right Top Fixed Arc. The padding of the main button from the bottom edge of the screen. The menu has to be created with an expand pattern of Left Bottom Fixed Arc or Right Bottom Fixed Arc. The distance of the menu items from the main menu button's mid point. This value effects the menu when it's inline. The menu is placed inline when using an expandpattern of one of

12 Name zindex Add to all pages Expanded Expand Timeout Show Label Reference Parent type default description the following: Line Top, Line Right, Line Bottom, Line Left, Line Middle Horizontal, Line Middle Vertical. Affects how the menu covers other elements on the page. The number default value is high to ensure that the menu is always above any element on the page. The menu is added to all pages and inserting shortcode is not boolean false required. This option is only available to menus created using one of the 4 Fixed patterns. boolean false When true the menu is in an expanded state on page load. A value in milliseconds that collapses a menu that is expanded number 0 on page load by default. Shows a label beside the icon when true. The label value is boolean false extracted from the menu name. When unchecked, the parent menu item does not show in the boolean true children. This is a fix to Gotcha #1 in the Gotchas section below. Once finished with your configurations, click the save changes button and head on to a non-admin page of your WordPress site to see the menu in action. Tools The tools page allows you to collect the rendering of the menu manually. This is useful when your theme does not play nice with the plugin. This is something that happens quite often with dynamic themes. If you have this problem, copy the items to go in your themes header and body manually and paste it in the relevant templates. The rendered output is plain css includes and javascript includes to be manually inserted in your header.php file and a combination of javascript and html to be embeded in the relevant template files where you want the menu to appear.

13 Gotchas 1) When you have a sub menu, the parent menu item will likely be a page of it's own. This design works well for menu items that are hover based, whereas one expands submenus on hover (mouseover) while clicking is only used for navigation. The path menu does not work this way. There is no hover. It's all either touch or click based. We solve this problem by adding the parent menu item in the sub menu it's expanding. Unlike the original parent menu item, this one allows navigation. This is all internal logic to our WordPress plugin and you do nothing in order to get this functionality. This is further illustrated in the screen below :

14 The above gotcha can now be overriden by unchecking the Reference Parent option. And the following is what happens when the "support" menu item is clicked, which in turn has a submenu item "Help". 2) Another gotcha is when creating a menu through the WordPress nav-menu feature, if you check "Automatically add new top-level pages", then any submenu page you add will automatically be added as a top level menu item.

15 3) You have to manually maintain your menu. If you add a new page, you want to go back in the navmenu feature of WordPress and select the page from the list of pages and add it to your menu. 4) When creating an inline menu, using one of the inline patterns, after using the shortcode on a post or page and navigating to the page, you'll notice the menu items appear displaced. This is due to the WordPress admin bar and your still logged in WordPress. Logout and everything will be back to normal again. It is the admin bar interfering with the menu, nothing more. If logging out is not an acceptable solutionj for you, then fix the problem at the root by removing the default margins wordpress forces into the document. This can be done by adding the following code in the header.php file of wordpress, right before the ending </header> tag :

16 <?php if ( is_admin_bar_showing() ):?> <style type="text/css" media="screen"> html { margin-top: 0!important; } * html body { margin-top: 0!important; } </style> <?php endif;?>