Mac SEO Blog

Our recently released EverWeb 4.4 for macOS and Windows, is big on new features: Containers, Border Options, Mouse Transitions and Animations and more! Additionally, there is a great update for EverWeb‘s Navigation Bar widget with some great new options adding more style and focus to navigating your site!

The New Navigation Bar Widget Design…

The first thing to notice when adding a Navigation Bar widget to a page with EverWeb 4.4 or higher, is that the menu options displayed in the Editor Window now features a blue colored rectangle background shape. You can change the color and background shape easily enough if desired. Start, by going to the Shape Options tab in the Inspector Window. In the Fill Section you will see that ‘Color Fill’ is selected and that the color swatch is blue. If you don’t want any background shape displayed, just click on the ‘Color Fill’ menu option and change it to ‘None’. You will see the background shape disappear from the widget in the Editor Window.

If you do use a Color Fill, you have some new options to play with to make your Navigation more fun!

Using A Background Shape In Your Navigation

If you do want to use a background shape for your navigation, but do not want to use the default, rectangle shape, you can choose a different shape if you want. To change the shape used, go to the Shape section at the top of the Shape Options tab. Change the ‘Default’ selection to the shape that you want to use. Note that the Default shape option is the same as the Rectangle shape.

To style the navigation bar use the widget’s Button Options settings, These settings let you adjust the spacing and padding between the each menu item, which may have particular importance to you if you are using a background shape in your navigation. You may also need to adjust the font size of the text used in the navigation which can be done through the Text Inspector’s Font section.

Using Border Options

One of the exciting new options for the Navigation Menu widget is that if you are using either the default, or rectangle shape, you can now change the each corner border to round the corners of the shape as you want. Simply select the Navigation Menu widget, then go to the Shape Options tab. Check that the shape you are using is either the Default or Rectangle shape, then click on the Custom Border Radius checkbox in the Borders section. This will activate the Border Options settings. Next, enter a value in the each corner that you want to change. You will see the Navigation updated as you make your changes.

Using Mouse Transitions & Animations

EverWeb 4.4 also lets you add mouse transitions to your navigation. To activate this feature, check the box to the left of the Mouse Transition & Animations section title. Choose the type of animation effect you want, there are 41 to choose from. It is more likely that you will want to use a mouse over animation for the navigation, but you can also apply a mouse down animation to your navigation if desired.

You can also set a Transition Time so that the effect works immediately when the user mouses over or mouses down on a menu item. When using Transition Time, a value of zero will play the effect immediately. You can set a value up to 500 if desired. The higher the value you choose, the slower the effect will play out.

After you have applied the effect that you want, use the Preview button the EverWeb Toolbar to see the effect in action. When you mouse over, or mouse down, over each menu item you will see the mouse effect in action.

Using The NEW Mouse Down Fill Options…

The last new option for the Navigation Menu widget is located in the Widget Settings of the widget itself. The new ‘Apply Mouse Down Fill’ option in the Appearance section has been a much requested feature we are happy to deliver to you!

The Apply Mouse Down Fill option has three available states: ‘On Mouse Down’, ‘On Current Page’ and ‘On Mouse Down and Current Page.’ A Mouse Down Fill can be applied for the selected state. To set this up, first make sure the Navigation Menu widget is selected, then go to the Shape Options tab.

In the Fill section, the default state is set to ‘Normal’. Change this to Mouse Down. Next, choose the Fill type that you want to apply when the user mouses down on the Navigation. You can also choose to highlight the current page in the navigation if desired. In this example, we are going to use a Color Fill.

You can also apply a Border as well if you are using either the Default, or Rectangle Shape.

Once the Mouse Down Fill has been set, go back to the Navigation Menu widget’s Widget Settings.

By default, ‘Apply Mouse Down Fill’ is set to ‘On Mouse Down.’ To test this, mouse down on one of the menu options in the navigation. The background color and shape borders will change.

Next choose. the ‘On Current Page’ option. you will see the current page highlighted using the shape you have chosen.

The last option, ‘On Mouse Down and Current Page’ combines the ‘Mouse Down’ and ‘On Current Page’ options together.

EverWeb’s New Navigation options bring you a wealth of new options to add extra flair, style and simplicity in navigation to your users!