The vertical menu for the site is a very convenient function that helps to save space and easily navigate the resource. You can make it based on cascading CSS style sheets or using special tools.
Instructions
Step 1
Open the purecssmenu.com website and register on it, otherwise you will not be able to create and download the created menu. On the left side, find the Templates button and click on it. Below there will be small windows with vertical menu templates. Click on them one by one and view them in the Preview window. Choose the template that best suits your site.
Step 2
Set the font and color of the menu using the Parameters tab. You can select a font and its size in the Font field. If necessary, specify underline / bold. Set the background (background) of the vertical menu in the Colors field, set the color of the font and background color on hover (fonthover / backgroundhover).
Step 3
Go to the Items menu to manage menu items. Clicking on the Clear button will clear the sample items so that you can create your own. It is enough to click on the AddItem plus key to add an item to the end of the menu. Using the AddNextItem button, you can add an item that will follow after the currently selected time. The AddSubitem button in the menu creates a nested item for the selected one. To remove a line, use the RemoveItem button.
Step 4
Open the item parameters (ItemParameters) at the bottom of the site. Enter a name for the menu item in the Text line, and its web address in Link. The Tip line is responsible for the description of the item, shown when the cursor hovers over the link. The Target section defines how the page is opened. With the _self parameter, the page can be configured to open in the current browser window.
Step 5
Download the ready-made menu by clicking on the Download button at the bottom of the page. Copy the corresponding code located in the purecssmenu.html file into the CSS template file: at the beginning and at the end. Make sure to paste in the correct code and save the file.
