How to design menu layouts

Example sitesUnderstand DB to HTML
Adding TextAdding picturesBuildUploadPage layoutsSetupMedia filesGraphic textAdd tablesPhoto albumCode GeneratorsStyleSItemap pages etcCD-Rom
Special TagsSetupPage LayoutMenu LayoutLinked sitesAuto-sequenceMore custom tagsTablesPhoto albumStylesheetsSitemapsAccessibility


Increase font size Decrease font size Reset to default



 Developed by Engineering Adventures



Last Updated


Placing the top, side, middle and bottom menus

Download FREE SEO website builder

go to top arrow How to create custom menus automatically

Pure SEO CMS will create top, side and bottom menus automatically.

The following code is for one menu and the program duplicates this for each page of the site.

The start and end repeat tags identify the code to be duplicated and the page name and link values are placed instead of the relevant tag.

Building menus automatically can save hours and will ensure that the links are never wrong.

Here is a basic menu list example

The title can include the menu name.

Leave out the repeat tags and no menu will be added.

Add your own html or CSS tags to customise the menu.

go to top arrow How to build a sub page menu list

Each menu group in Pure SEO CMS can have many sub pages.

You can add one subpage menu list per page either within the top or side menu.

Simply add the subpage repeat tags within the main menu repeat tags and customise the code as you require.

Subpage menu example

go to top arrow Standard menu layout

Pure SEO CMS does not use lists for menus but builds them from pure text and areas. This is because we find it gives increased flexibility, more reliable cross browser performance, less conflict with page lists in the body content and it works with our CSS design wizard

Typical full sidemenu example

Note how the grouplive tag identifies the page that is open.

go to top arrow How to make and expanding drop down top menu

Version 3.51 and above can automatically create a drop down menu.

This menu uses JavaScript but all design aspects are CSS and stored within the stylecolor.css file.

Simply adapt one of our examples or embed the following code.

DON'T forget to upload the dropdowntabs.js file into the scripts directory.

For a drop dowm menu place this code in the template and style sheet and add the dropdowntabs.js script in the scripts directory

go to top arrow How to add accessibility tags

The title tag for links will help screen readers inform the user where the link will take them. Write any text and use the page name tag to identify the page each menu will open.

The tabindex tag will tell a browser the link tab order for when the user presses the tab key. Adding a simple tabindex="(!--@Groupnumber--)" or "(!--@GroupTnumber--)" to the side or top menu links will the number of each menu group. Sub menu page links are added automatically.

The accesskey="(!--@Groupnumber--)" tag will allow users to press Alt N keys and then return, to access each section. Pure SEO-CMS uses numbers for each menu group to provide the N key value although take it out if you do not want it.

Pre 2.61c versions used title="?" tabindex="?" accesskey="?" and replace the ? with a text automatically. Now you can add any text and use the page name and number tag to say where it goes.

Previous Page   Next Page

Introduction | How to make site | Advanced Design | FAQ help | Contact | Top
© Copyright Engineering Adventures , all rights reserved.