EverWeb Codebox

Vertical Fixed Navigation

This is an example of how to create a vertical navigation which can be used as either main or sub navigation or for a list of links to files such as PDFs.

In this case, the div has been fixed so that the navigation stays in the same position when the page is scrolled. If this feature is not required, instructions for removing it are given further down this page.

The links are created using HTML which is styled by inserting the CSS into the EverWeb Head Code box.

<div id="vertical-nav">

     <a href="#">Home</a>

     <a href="#">Page 2</a>

     <a href="#">Page 3</a>

     <a href="#">Page 4</a>

     <a href="#">Page 5</a>

     <a href="#">Page 6</a>

</div>

HTML

In each line like this...

<a href="#">Home</a>

...the hash # sign is replaced by the file name and file extension page-name.html

The page name that is displayed in the menu is inserted between the opening and closing <a> tags

<a href="#">Page Name</a>.  

CSS

The codebox below shows the styles to be pasted into the Head Code box in the Page inspector if the menu is only required on one page or in the site wide Head Code box if it is needed on every page of the site.

<style type="text/css">

#vertical-nav {

     position: fixed;

     top: 105px; /* distance to the top of the menu div from the top of the page */

     width:140px; /* width of the menu div */

     height: auto;

     margin: 0;

     padding: 5px;

     border: 2px solid #0000FF; /* border width, type and color*/

     border-radius: 10px; /* border-radius */         

     background: rgba(0,0,0, 0.5); /* Menu background color with opacity - delete if not required */

}

#vertical-nav a {

     min-width: 100px;

     font: 15px 'verdana', helvetica, sans-serif;

     color: #0000FF;

     background: #000;

     text-align: center;

     text-decoration: none;

     padding: 5px 10px;

     margin: 2px 10px;

     float: left;

}

#vertical-nav a:hover {color: #FF0000}

</style>

To unfix the menu, delete this from the CSS...


     position: fixed;

     top: 105px; /* distance to the top of the menu div from the top of the page */


... and drag the snippet to the desired position on the page.

Unfixing The Menu

Once the rest of the page content has been inserted, use the EverWeb Arrange menu to bring the navigation to the front or do the keyboard command: Shift + Command + F