Curtain Menu
Eases down on click with transparent or gradient background and vertically centered animated links
Next PageEverWeb Widgets
Tel: 012-345-6789
Header
The header is designed to be used with any of the navigation widgets that are opened/closed using a "hamburger" icon at the top right.
It has adjustable height and an optional bottom border to add when separation from the content is required.
The h1 heading is centered and either a logo or a phone number can be inserted on the left.
Logo
The logo has a checkbox to insert it and a button to select the image. There are controls for adjusting its width and position in relation to the top and left.
Phone Number/Phone Icon
On computers and tablets, the phone number is displayed. On mobile phones, this switches to a phone icon which calls the inserted phone number when tapped. There are controls for font size and color and icon color.
Heading
The h1 heading can use a web safe font or a non web safe or Google hosted font with a web safe fallback. It has controls for font size, mobile font size, style, weight letter spacing and color. A text shadow can be added using the controls for shadow radius and color.
The heading on this page uses the Google hosted font "Stint Ultra Expanded" This can look rather thin and doesn;t have a bold version so a 1px white shadow has been added along with 1px of letter spacing to make it stand out better.
The overall controls are for background color and its opacity and for the bottom border width and color.
Curtain Navigation Menu
The navigation slides up and down on clicking the "hamburger" icon with an expanding curtain effect. The navigation is visible during setup and then hidden by checking a box.
Background
The background can be a solid color or set to partially revea the page content using the opacity slider.
Icon
The "hamburger" icon can be styled for background color and its opacity, icon color, icon hover color and border radius. It can be positioned left or right and its location adjusted using the values for Position X and Position Y in the widget settings.
Links
The links are spaced out vertically by setting the value of the container's display property to "grid" and setting the the links to align themselves in the center of the row created by the grid.
The links are inserted using a modified version of the EverWeb Widget API Assets list and can open internal or external pages or files.
Current Page
The current page link can be indicated using a contrasting color by checking a box and setting the link color.
Fix
The navigation overlay and the "hamburger" icon are absolutely positioned by default. They can be fixed by checking a box so that they always remain in view no matter what the scroll position of the page content is.
Animations
The slide up/down animation can be set in milliseconds. The navigation link hover animation as created using scale on hover. The scale amount can be adjusted in the widget settings. This animation is turned off on mobile devices for obvious reasons!
Setup
The widget should be the last item on the page and be placed below the footer where it won't effect the page content items.
Animated Hero Image
The first item on the page is created using the RGL Hero Image with animation turned on. Follow the link below for more info…