Tip:
Highlight text to annotate it
X
Welcome to www.Blended-Menu.com
This is a short tutorial example how to create catch eye colorful menu.
Will start from selecting vertical code generator in navigation panel.
First will change the font type of current menu level.
Next will change the text for Small-Cups to make it look
more eye catching. We will proceed with the same
changes for all sub levels of our menu. If you make a
use only one level you probably don't need this but for this example
will style all sub levels of the current menu, that is found on site.
Now we change the back ground of each level, giving it an fluorescent
style alike appearance. This colors will let any user
visiting your site more ease attention to the navigation
inside the site tree. Note for the color picker
to make it easier this builder allow you to save your favorite
color and reuse them while you working in the color list, just click the new color
and it will be added to color list, up to 14 colors can be added in
FIFO cycle, that can be used anywhere.
Next step is to set border width for current level and colorize it.
Beside the regular black, white and gray colors well make use
of another five orange, red, green blue and blue transparent.
All those color will add to menu project "Color List".
Giving a two pixels border width and eight pixels border radius.
To give this vertical menu good look we add some shadow blur
and shadow spread using the same color we colorized
menu background in our case is third level appearance.
Visit our site to see exact values used in this menu example.
All and more examples of ready to use vertical menu templates
and horizontal menu templates are available in our web site:
Free on line menu generator: http://www.Blended-Menu.com
As you can see to style this sub menu took only a minute
and the whole project from scratch less than five minutes
If you need only one level menu just decorate main menu appearance
and download the project and make a use of this one level.
The generated cascading style sheet and HTMl code is supported
in all modern browsers, no compatibility problems.
Now we will continue to decorate our menu selecting
clicking in second menu level appearance.
We change the menu items background to green and will
set the same border width and border radius as we did
for third level adding shadow blur and shadow spread to
this vertical sub menu decoration. The major, dominating color is green.
As you notice all other parameters are stay the same for all levels.
Note that you can always test the effects you add just place
mouse over the menu itself to allow it expand and show
the newly inserted value.
Unfortunately we can give an undo nor redo options
for this menu generator, so if you created something
you like generate a code for it and download, this will
promise to prevent disappointments from lost project.
As a tip refresh your browser each time you start a new project.
This will ensure you will stay with the latest updated generator version
and prevent bug issues. In addition you can check
list of supported browsers in our site, but we insure
if you use any updated browser you will have no problem at all.
To support us please Tweet and Like us on site.
Or next step is main menu appearance restyling.
Click on it and do set same values as you did previous
to all sub menu levels. Setting background color
shadow color and border color. Adding border radius and
border width, setting the shadow spread and blur.
The only difference here from sub menu level decoration is
in background red color, that is same for shadow.
Explain some useful tips for example if your screen
has a low resolution note for the scroll bar that would
appear next to menu ribbon for more convenient work on
menu style you can alternatively click on decoration block description
this will hide the block another click will reveal it back once again.
You can generate as much menus as you wish no downloads
nor building times restrictions. The more you use it the faster
you will be inspired with menus ideas, this is the
reason we not created ton's of menu but just a few examples
to get you started, the rest is up to your imagination.
For addition you can visit another site that uses
same ideas and consepts but generates an code
for HTML web page layout using DIV elements.
For HTML CSS layout visit: http://www.Blended-HTML.com
If you found a bug please report it to us ASAP so we can fix it.
In next step we will check our menu for overlapping
because we added and border and outer menu level shadow.
We about to correct it using margin selector
for each sub level of the main menu just
go to margin left option an set it to same level
as border radius, 8 pixels long by dragging
cursor or enter the value manually.
Of course you can leave it originally or change
to any desired position you would like you each
sub menu will be placed.
Once we achieved the desired style and look to our menu
select active items tab to set colors for selected
item text background color and mouse over effects.
Because we adding opacity for background color the
result is different color for each sub menu.
Check it by moving the mouse over your menu.
In next step will do the same for selected item
just pick any color to active - selected item.
For convenient remember that once you get the
menu generated code you can safety omit this item
by need or use it for your web page as you need.
Currently active items cannot be ignored.
So if you left only one item in the menu explorer you cannot
remove the active items but you can make it absolutely transparent.
Same can be done for all menu items.
Once you pleased with the decoration you did
Navigate to menu tab to get your menu code
And click on build button under export note.
As you see you will a ready to use HTML
and CSS code for your menu. Place your mouse
Over the CSS or HTML code block and right click to select
all code inside it, right click to copy.
If you like it visit us and generate online any menu you imagine!
Visit us: http://www.Blended-Menu.com