Tip:
Highlight text to annotate it
X
Welcome to www.Blended-Menu.com
This is a brief tutorial example how to use Menu Generator Online.
Will show how to create an 'Navy' style vertical HTML CSS menu.
Select 'Text' tab to decorate the menu items text in current level.
Start applying font type for each level of menu, see how
selected font changing upon sub menu selections.
Next proceed to font variant, and change it to' Small-Caps'.
Set the font weight for 'Bold', and text align to 'Left'.
Apply all those styles respectively to first sub menu - second level
and second sub menu - third level.
Next change the font size to 20 pixel and decrease 2 pixels each level.
You can style this menu template differently.
This is only a simple and fast demonstration on how to layout
the HTML vertical menu. This menu is present in site
so you can navigate after seeing this video and further
decorate it on the online generator web site itself.
This tutorial is excellent example to see how good looking menu
can be done just in a few clicks and without
any prior knowledge in HTML nor CSS coding language.
This menu is under vertical menus category in our site.
To proceed decoration vertical menu click to select 'Foreground' Tab.
Click 'Back Color' to change item background color to blue.
Drag mouse in canvas pallet near blue and adjust brightness if such needed.
To add the color to 'Color List' hit on 'Submit' button.
If you want you can insert the color manually.
In the Red, Green and Blue input fields also you can specify Opacity.
Once the color you pick is done, click 'Apply' to set the style.
Next we going to set the menu items width and height.
Setting those menu decorations to all sub menu items.
Thus will give a catch eye look for all drop down menus.
Here we customizing the menu using another trick:
decreasing the item height in 2 pixels for each sub menu level.
This type of decoration for vertical menu gives an 'depth'
looking an allows to give a longer menu titles.
Remember in all menu in this online generator the first item
is set as selected / active item, once you get your code
you can omit it or use in any PHP or JavaScript implement.
Now we going to build a menu level 'Background' using this tab.
Add 'DeepSkyBlue' alike color to the background menu.
Now change the 'Padding Left' to 8 pixels in padding parameters.
This will expose part of menu background color you set before.
You can see the true advantage of this 'Double Tabbed' generator
we invented, the ease of fast decoration and color
list comfort in fast online CSS restyling.
Carry on with the rest of drop down menu levels
applying this styling pattern.
If you get this tutorial interesting you can watch
another tutorial example for HTML page layout in our second
site : www.Blended-HTML.com
Where you can create an HTML page layout using drag and drop.
For a final adjustments of the vertical menu appearance
navigate to 'Active Items' tab. Here you will set respectively
Here you can set an Active/Selected item
decoration in addition will show hov decorate
mouse hover item. Al is done the same way
you have colored previous. Set 'RoyalBlue' like color for
the active item and 'Indigo' for mouse over item.
Note that there is no need to select any sub menu level
because the 'Active Item' is implemented for the
menu itself as addition decoration.
If you don't need further help you can navigate right away
to our site and start create and styling your menu free!
at: www.Blended-Menu.com
It's absolutely free so don't hesitate.
If you feel it's not enough watch other videos and
example tutorials on how to style and generate
HTML and CSS menu, vertical or horizontal online, it's free.
You can any moment preview the menu as it will result in it's
final appearance just place over the mouse in main menu appearance.
All time while you styling your vertical menu you
can build and download the HTMl and CSS code as much
as you want while you proceed restyling it.
Tip: the 'Color List' can contain up to 14 colors
each new color you add will be inserted using FIFO principle.
More over we added all colors that are present in each menu
you select in the 'Color List' so you don't have to guess.
Please consider and be patient this is a big project and takes
plenty of time to work on so each time you start to
create a new layout or restyle an existing one for best and updated
workspace it's highly recommended to press F5 - Refresh, Reload page.
Hope you enjoyed this example tutorial, for live sample visit:
Free Menu Generator On-line www.Blended-Menu.com