By The new Mousedown Fill features that come to EverWeb‘s Navigation Bar widget have been a popular request amongst users for a while. EverWeb 4.4 now delivers with easy new settings to make navigation even easier for your visitors!
An Updated Navigation Menu Widget
If you’ve been using a version of EverWeb prior to 4.4 and have updated recently, you’ll notice that when you add a Navigation Bar widget to your page, from the Widgets tab, that the navigation menu on screen looks a little different than before. That’s down to the fact that there’s now a blue rectangle background shape behind each navigation menu item by default. If you don’t want this, it’s easy to remove: First select the Navigation Bar widget in the Editor Window if it’s not already selected. Next, go to the Shape Options tab. In the Fill section of the settings, you’ll notice that the dropdown menu is set to ‘Color Fill.’ Change this to ‘None’ to remove the rectangle background shape from the navigation.
For this blog post, we’re going to keep the background rectangle as it is for the moment as it will help us show you some of the new EverWeb 4.4 features later on…
The other difference you may spot is that the widget’s name has changed from ‘Navigation Menu’ to ‘Navigation Bar’ Widget…
Formatting the Navigation Bar
There are many ways in which you can format the Navigation Bar widget, such as using the Hyperlinks Inspector to change the color and underline of the menu items text, but for EverWeb 4.4 our focus remains with the Shape Options tab. There are also options in the Navigation Bar’s Widget Settings too, and we’ll come back to those soon…
As we kept the Navigation Bar at its default, the most obvious thing we can do is to change the background rectangle shape’s color using the Color Swatch or Color Wheel in the Fill section. You could also use the Fill section’s dropdown menu to change the type of fill to, for example, gradient fill, if you preferred. Remember though that the navigation should be easy to navigate for your visitors so be careful about the background fill that you choose.
Using Border Options
When using the rectangle shape, we can use the new Border Options to change the roundness or any of the corners of the rectangle. For example, you could go with a tabbed look but changing the top left hand corner border to a value of e.g. 40. To change the border roundness, just go to the Border Options section and check the ‘Custom border radious’ checkbox to activate the settings, then make the changes you want. The Editor Window will update automatically as you make the changes.
EverWeb’s Border Options only work for the Default and Rectangle shapes and are not available to other shape types.
You may also havre noticed that the Stroke options of Line and Picture Frame are now integrated in to the new Border Options section. For the navigation bar, you can use the three Line options of Line, Dashed and Dotted, but Picture Frame options won’t work here which is probably best..
Shape Changing Your Navigation
If the default, i.e. rectangle, shape is not to your liking, you can use a different background shape for your navigation. Simply, click on the dropdown in the Shape section and choose a different shape.
When choosing a different shape, you’ll probably want to adjust their size and spacing. To do this, go to the Navigation Bar’s Widget Settings. The Button Options section you can change Padding and Spacing options to create the look you want.. Remember also that you may want to change some of the menu item names so that they fit properly within the shape. You can do this by changing the Navigation Menu Display Name field in the Page Settings tab of the Inspector Window.
Using Mouse Transitions and Animations
One of EverWeb 4.4’s new features, Mouse Transitions and Animations can be applied to your navigation to highlight menu options better to your visitors. For instance, adding a ‘Bob’ effect will make each menu option bob up then down once when moused over. When using these effects you may want to keep the Transition time to zero so that the effect takes place immediately on mouse over or mouse down. Effects such as the ‘Bob’ can be used effectively with either a simple, or dropdown, menu structures. Be careful though with some effects e.g. you would not want to use the ‘Flip Down’ effect on a navigation, especially on a dropdown navigation. When using Mouse Transition and Animations, it’s always best to test them out first, using Preview, to see if they work well or not.
Using EverWeb’s Mouse Down Fill Effects
Something that many EverWeb users have been looking forward to isthe inclusion of Mouse Down Fill options for the Navigation Bar widget. In EverWeb 4.4 it’s become a reality. You’ll find this new feature by selecting the Navigation Bar widget, then clicking on the Widget Settings Cog in the Inspector Window if it’s not already visible. In the Appearance section you’ll see a new field: Apply Mousedown Fill. This is a drop-down menu with three possible choices: On Mouse Down, On Current Page and On Mouse Down and Current Page. Choose the option that you want to use with your navigation.
Setting the Apply Mouse Down Fill in the Navigation Bar Widget is only half of the story. The other half belongs in the Shape Options tab. In this tab you have three different states that you can set for the Shape Options: Normal, Mouse Over and Mouse Down. By default, the usual state is set as ‘Normal’. To activate the Mouse Down Fill settings for your navigation, change the state from Normal to Mouse Down. Once you’ve done this, change the Fill dropdown menu from ‘None’ to ‘Color Fill’, then choose the color you want to use for when your visitor clicks on the navigation item. After setting this, you will probably also want to do the same for the ‘Mouse Over’ state.
Once you have completed the set up of your Mousedown Fill, you can test it out using Preview.
If you have chosen either ‘On Current Page’ or ‘On Mousedown and Current Page’ in the Navigation Bar Widget’s Widget Settings, you’ll see that the menu item of the current page will be that of the Mouse Down Fill you chose in the Shape Options tab.
Once you have finished, test by using Preview in EverWeb’s Toolbar before publishing the changes to your site.
Loading ...
Comments