STEP 5: Main Menu
From Frontal Wiki
Once you have your fonts selected, it’s time to change the layout of the main menu. Locate the following lines:
// MAIN MENU SETTINGS: // width: 140px; height: 100px; z-index: 5; top: 40px; left:0px; padding-top: 10px; padding-bottom: 10px; // END MAIN MENU SETTINGS //
The above block of code contains the settings of the current Frontal Portfolio Site demo. They place the menu in the top left corner. Below are code blocks that can be used to place your menu in other locations. To use one, simply copy it and replace the original code in your document.
i. Bottom Left Menu, Vertical:
// MAIN MENU SETTINGS: // width: 140px; height: 100px; z-index: 5; bottom: 100%; margin-bottom: 40px; left:0px; padding-top: 10px; padding-bottom: 10px; // END MAIN MENU SETTINGS //
Example:
ii. Top Right Menu, Vertical:
// MAIN MENU SETTINGS: // width: 140px; height: 100px; z-index: 5; margin-top: 40px; float: right; padding-top: 10px; padding-bottom: 10px; // END MAIN MENU SETTINGS //
Example:
If you'd like your navigation to be horizontal, you’ll have to replace two blocks of code. The reason for this is that, by default, Frontal displays menu links one on top of the other. In order for them to be displayed side by side, we’ll have to change some of the properties for the menu items themselves. Be sure to replace both blocks of code according to their labels.
iii. Top Menu, Horizontal, Left Aligned:
// MAIN MENU SETTINGS: // width: 100%; height: 30px; z-index: 5; padding-top: 5px; padding-bottom: 10px; // END MAIN MENU SETTINGS //
// MENU ITEM SETTINGS: // float:left; margin-left: 60px; margin-top: 5px; // END MENU ITEM SETTINGS //
Example:
iv. Bottom Menu, Horizontal, Left Aligned:
// MAIN MENU SETTINGS: // width: 100%; height: 30px; z-index: 5; bottom: 100%; padding-top: 5px; padding-bottom: 10px; // END MAIN MENU SETTINGS //
// MENU ITEM SETTINGS: // float:left; margin-left: 60px; margin-top: 5px; // END MENU ITEM SETTINGS //
Example:
If you're using a horizontal menu and you'd like to center all the elements within the menu, you’ll have to replace another block of code (about 1/3 of the way down in your document):
v. Center Justified Menu Items:
<!-- MENU ITEM DISPLAY: --> <div style="width: 580px; margin-right:auto; margin-left:auto;"> <text class="frMarker menuEntry" style="margin-left:40px;" mgrId="siteMenu" elemNdx="Home">Home</text> <text class="frMarker menuEntry" mgrId="siteMenu" elemNdx="Projects">Projects</text> <text class="frMarker menuEntry" mgrId="siteMenu" elemNdx="About">About</text> <text class="frMarker menuEntry" mgrId="siteMenu" elemNdx="Contact" >Contact</text> <text class="fullScreen menuEntry" style="padding-top: 4px;">Fullscreen</text> </div> <!-- END MENU ITEM DISPLAY -->
Example:
Now that you’ve experimented with different possibilities for the menu layout, you might want to experiment with some of the settings within these blocks of code. For example, try changing "width:" in the Menu Settings or "margin-left:" in the Menu Item Settings. This will help you further customize your navigation until it's just the way you like it.
</br> </br>