Animating Side Menu Panels In SiteSpinner

Transcription

1 Animating Side Menu Panels In SiteSpinner Introduction In the tutorial Side Panel Menus in SiteSpinner, I showed you how to create a menu panel in your SiteSpinner project that was displayed and hidden using mouse effects. As mentioned in the tutorial, this type of menu had 2 problems inherent to SiteSpinner: 1. The menu could be scrolled out of view, and 2. Displaying the menu is not animated. In this tutorial, I will show you a different approach to building menu panels using jquery and CSS to animate displaying and hiding the menu, as well as keeping it visible when the user scrolls the web page. Notes: 1. The method used in this tutorial will take advantage of some SiteSpinner version 2.92Q features. If you have not yet updated your SiteSpinner program, please do so before using the steps outlined in this tutorial. 2. Code will be presented in this tutorial that must be entered into your project. To simplify entering the code into your own project, text files containing the codes are included in the zip file along with the demo project. You can load these files into the code objects using the File->Open File menu option.

2 3. The code presented in this tutorial was inspired by the blog article Slide In Panel by Sebastiano Guerriero at The Menu Buttons For this tutorial I will be using the built-in SiteSpinner flower-template project file. As seen in the following figure, the pre-built project navigation menu is laid out across the top portion of the page. Figure 1 - Original menu button layout The existing text menu objects use left-aligned text and a purplish text color, so I modified each one to be center-aligned with a white font color. I then moved the objects to a blank area of the page (off to the right, outside the target resolution). Mouse effects were used in the template project to change the background of the bar behind menu objects, so these were removed as they are no longer needed. The modified menu buttons were then center-aligned and stacked vertically, as shown in the following figure.

3 Figure 2 - New menu text object layout The Close Button A close button will be needed to close the sliding menu panel when it is no longer needed. In the modified project file, I created a close button using a title object and an ellipse shape object. The title object is a lower-case, bold x in the same font and color as the other title objects. The ellipse is adjusted to be round so the title object fits inside, and then given a white 3-pixel border. The 2 objects are then combined into a permanent group. The finished close button is shown below. Figure 3 - The close button The close button will be used by the jquery script to hide the menu panel, the script must be able to detect when the button is clicked. Since I am lazy, I prefer to add a class name to the button rather than mess with renaming the object and making it non-unique. To do this, open the Object Editor to the Options tab and enter the code in the Code field as shown in the following figure.

4 Figure 4 - Adding the class name to the close button The Menu Panel Now that the menu buttons are laid out and we have a close button, they are grouped together to create a menu panel, as shown below. Figure 5 - The menu panel group After grouping the objects into a completed panel, open the Object Editor to the Options tab and enter the code into the Code field as shown in the following figure. This class name will be used by the jquery script to manipulate the menu panel.

5 Figure 6 - Adding class name to the menu panel The Menu Button To get the menu panel to appear, we need a menu button. Once again, I used a title object with the same font and color as the other title objects, as shown below. Figure 7 - The menu button A class name is also given to the menu button so the jquery script can detect when it is clicked. Open the Object Editor, and enter the code into the Code field as shown in the following figure.

6 Figure 8 - Adding class name to the menu button The Menu Container At this point in the process, the menu panel is sitting off somewhere on the project page and not looking much like an animated panel. We need to be able to attach the menu panel to either the left or right side of the page, and it must be displayed the same regardless of the page being centered or not. Normal SiteSpinner layout cannot cover all these possibilities, so a scripted method must be used. This requires using a separate code object to hold the menu panel when the page is previewed or published. Open a code object, set the code placement to Below Body Tag and enter the following code: <div class='menu-panel'> <div class='menu-container onright'> <div class='menu-content'> </div> </div> </div> In the above code, you will see that the text onright is highlighted. This part of the code tells the browser where the menu panel is positioned. The valid options

7 are onright and onleft. Choose the side of the browser you want the menu panel displayed and change the code to reflect your choice. The code object can be repositioned on the page so it does not interfere with your work. The jquery script and the following CSS code will take care of placing it on the page where it belongs. The CSS Code CSS code is used to position the menu panel on the page, give it a background color, and to specify how wide the display panel should be. Open a code object, set the code placement to in CSS and enter the following code:.menu-container { position: fixed; background-color: rgb(117,117,117); width: 150px; height: 100%; top: 0; z-index: 999; }.onright { right: 0px; }.onleft { left: 0px; }.menubtn,.closebtn { cursor: pointer; } In the code, you will see 2 highlighted items: background-color and width. As you can guess from its name, the background-color property is used to set the background color of the menu panel. The code shows the color being specified in RGB (red-green-blue) codes. The easiest way to find the RGB color code you want to use is to open the Shading Editor to the Fill Settings tab and then choosing the desired color. The RGB color code values will be seen in the boxes next to the RGB sliders (see figure 9). Take note of the values for your desired color selection and copy them into the CSS code. Be sure to enter the values in the correct R-G-B sequence.

8 Figure 9 - Finding the menu panel background color The width property is used to specify the total width of the menu panel when it slides into view. The value must be at least as wide as the menu panel group object, but will look best if the value is larger. Adjust the pixel value as desired. You can move this code object to a blank area on your page so it does not interfere with your work. The jquery Script The jquery script is used to animate the menu panel. When the menu button is clicked, the menu panel will slide into view and the menu button is hidden. When the close button is clicked, the menu will slide out of view and the menu button is displayed. Open a code object, set the code placement to Header and enter the following code: <script src=" </script> <script type='text/javascript'> $(function() { var menu = $('.menupanel').html(); $('.menu-content').html(menu);

9 $('.menupanel').remove(); $('.menu-container').hide(); $('.menubtn').click(function(e) { e.preventdefault(); var p = $('#centered').position(); if (p!= null) { if ($('.menu-container').hasclass('onleft')) { $('.menu-container').css('left',p.left); } if ($('.menu-container').hasclass('onright')) { $('.menu-container').css('right',p.left); } } $('.menu-container').animate({width:"toggle"},500); $('.menubtn').toggle(); }); $('.closebtn').click(function(e) { e.preventdefault(); $('.menubtn').toggle(); $('.menu-container').animate({width:"toggle"},500); }); }); </script> There is nothing in the script for you to change. You can reposition this code object somewhere out of the way on your page so it does not interfere with your work. Multiple Pages If your project contains multiple pages and you want to use the menu on all pages, simply click the objects used to display the menu panel and put them on all pages. Because class names are used instead of SiteSpinner object names, the objects can be either copy & pasted, copy & cloned, or set as included objects. Under normal circumstances, you would want to include them on all pages so they appear on the pages in the same position. However, if you want the menu panel animated from the right on one page and from the left on the others, use the copy & paste method and change the menu container code to onright. The objects that must be on each page are: the menu button, the menu panel, the menu container code object, the CSS code object, and the jquery code object.

10 Conclusion The zipped demo project file can be downloaded from the following link: sitespinnerpages.com/downloads/sliding-menu.zip The zip file contains the project file (sliding-menu.ims) and 3 supporting files: menu-container.html This file contains the HTML code for the menu container object. The code must be placed into a code object with the code placement set to Below Body Tag. slide-menu.css This file contains the CSS code needed to style the menu panel and initialize its placement on the page. The code must be placed into a code object with the code placement set to in CSS. side-slide.js This file contains the jquery script code used to animate the sliding menu panel. The code must be placed into a code object with the code placement set to Header. You can open each of the supporting files in a plain text editor and then copy and paste the code into SiteSpinner code objects, or you can use the code object File->Open File menu option to import the file. Be sure to set the optional values as needed per the instructions in this tutorial. Note: As of SiteSpinner v2.92q, there is a bug that causes any plain text file imported into a code object with a file extension other than.js to switch the code editor to text mode. Be sure to change the editor mode back to Code after importing the.html and.css files. Figure 10 - Setting editor mode