Traditional navigation styles are not really effective on responsive pages. Horizontal navigation - with or without dropdows - gives very poor click through performance. A navigation tab at the top right is in the most inconvenient position for mobile device users and is much better if inserted at the bottom of the browser/device window.
This navigation was originally designed for navigating the sectons of a larger website but is equally useful for the home page navigation or for news/blog post links.
Action Tab
The tab shows text and has the option to add an icon. It is inserted at the top right with controls for adjusting its position on the X and the Y-axis.
There is an option to move the tab to the center bottom on mobile devices to make it easier to operate with a thumb.
Navigation
The navigation opens in a full size overlay with an optional heading and a close tab. The overlay has controls for padding, background color and its opacity and for adjusting the grid gap.
It can have up to 144 items which should be more than enough!
Layout
The CSS grid layout uses auto-fit columns and the minmax keyword to create a responsive grid which is adjusted using the min width setting and doesn't require media queries.
Items
Each item is an HTML5 <article> with a heading, image with alt text and border option, optional span, text and a full widt CTA (Call To Action) link.
The grid items maintain an equal height despite varying amounts of content using the CSS grid align property set to a value of "auto".
Links
The links have a hover background animation for a smooth professional change of state. All the links can have the same text if required. In the example the links show the universal symbol for dw read more" using two square brackets to enclose the CSS code for an elipsis [...].
Close Tab
The close tab has controls for adjusting the icon color and the background color.
The tab can be positioned top or bottom and left or right with controls for adjusting its position on the X and the Y-axis.
This page uses the ThemeKit Stage widget which is specifically designed for creating gradient or image backgrounds for responsive pages.
The widget can be inserted out of the way below the footer widget on the EverWeb design canvas. It has controls for the gradient background colors and their opacity, adjusting the color stops and a checkbox for switching to a radial gradient.
Image Background
Instead of inserting a large image in the browser background it inserts three different sizes of image - fixed in position - which fill the viewport rather than the whole browser which is much more efficient and gives a better user experience.
The images used in the demo are 1000 x 1000px, 600 x 600px and an image with an aspect ratio of 9:16 for mobile phones at 375 x 667px for mobile phones in portrait mode.
The slide in tab has a heading, text and an optional link over a gradient background. Both the tab and the content can be animated to give a double slide effect. The tab can be hidden on any device with a screen width less than the break point.
Position
The tab's position can be set as absolute at a preset distance from the top so that it scrolls with the page content. The position can be changed to fixed so that it always remains in view.
Close
The close function is optional and shows the close icon at the top right when turned on.
Inserted Position
Since the tab is either positioned absolutely or fixed, the widget can be inserted at the bottom - below the footer widget - on the EverWeb design canvas.
How It Works
The tab uses a custom CSS animation using keyframes to hide it on page load and slide it in after a preset delay.
The close function uses a single line custom jQuery plugin to animate it back out of the viewport.
Each item is an HTML5 <article>
A text block with a heading, paragraph and an optional link
A grid layout using auto-fit columns and the minmax keyword
The <article> is set to display as flex with the direction property set to "column"
The full width CTA (Call to action) links are insert at the bottom so that they all line up despite varying content
The links can have individual text or the same content entered once using the CSS ::after selector
The images in this demo were sized to 300px square before importing into EverWeb
All the images were optimised using the freeware ImageOptim
Turn on the lazy loading function before publishing
The optional main heading has controls for font size and color
The tab can be positioned top/bottom and left/right
The tab has an optional icon and can be positioned top or bottom and aligned left, center or right
