© 2014 by Roman P

Item Title
Item Link
New Item +
Edit Menu Items
Generate HTML CSS code for design
Build
Export
AbCd AbCd AbCd AbCd AbCd AbCd
AbCd AbCd AbCd AbCd AbCd AbCd
Text Fonts
Normal
Small-Caps
Font Variant
Normal
Bold
Font Weight
Left
Center
Right
Text Align
Font
Color
Letter Spacing
px
Font Size
px
Line Height
px
Font Properties
Shadow
Color
Shadow Offset X
px
Shadow Offset Y
px
Shadow Blur
px
Text Shadow Decoration
Back
Color
Item Width
px
Item Height
px
Items Property
Border
Color
Border Width
px
Border Radius
px
Border Decoration
Remove background image Click on image to set as background
Select Item Image
Shadow
Color
Shadow Offset X
px
Shadow Offset Y
px
Shadow Blur
px
Shadow Spread
px
Shadow Parameters
Back
Color
Remove background image Click on image to set as main background
Select Main Image
Shadow
Color
Shadow Offset X
px
Shadow Offset Y
px
Shadow Blur
px
Shadow Spread
px
Shadow Parameters
Border
Color
Border Width
px
Border Radius
px
Border Decoration
Margin Top
px
Margin Left
px
Margin All
px
Margin Right
px
Margin Bottom
px
Margin Parameters
Padding Top
px
Padding Left
px
Padding All
px
Padding Right
px
Padding Bottom
px
Padding Parameters
Text
Hover
Back
Hover
Text
Active
Back
Active

Purple Blue HTML CSS Menu Template

This vertical menu template is build from an purple and blue color combo, the menu items are floating inside a shadowed black container with 10 pixels padding resulting a transparent background in any html hosting page. Each sub menu is wider than preceding allowing to show longer page titles for nested items. As usual the color that this menu is build from present in "Color List" to enable fast recoloring.

Background image example

This is currently the only one vertical menu that uses an background image in its layout, you can annul it or replace with any other to satisfy your best looking theme. All images in this site are absolutely free to use, but not claim they are yours. Experiment and play with them in layout wisely.

Using CSS Box-Shadow Model

This menu uses delicate box-shadow decorations. The shadow spreads comfortably and catching eye but not exaggerated, it's achieved using hight blur aside a zero spread in the CSS shadow settings. This model set as for a level background decoration with "inset" and foreground item decoration as "outset".

Multilevel Menu Example

All menus in this site are multilevel this means that all of them containing at least one sub-menu and have and support of drop-down, cascading appearance. This menu example

Advanced CSS3 Menu

The menu, and other menu layouts on this site, uses advanced CSS level 3. It means inclusion of transition effect in almost every menu, and CSS3 standards. In parallel they any browser compatible.

Pre-Build a Purple Blue Vertical Menu Layout

This menu contains a combo of three colors Purple, Blue and Green. This combination creates a calm looking style. More over for CSS3 and HTML5 browsers that support an "transform" added "scale" transition effect! Note for box-shadow and padding sizes which give an elegant and partly transparent outer border for each level. Generate a code for this menu or rebuild the menu layout template absolutely free, no prior HTML nor CSS knowledge needed!

Pattern Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Ornament Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Texture Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Custom Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Other Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background
Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background Click on image to set as background
Update your web browser and enable JavaScript for full "HTML Menu Generator" support Update your web browser and enable JavaScript for full "HTML Menu Generator" support
Drag marker set brightness Update your web browser and enable JavaScript for full "HTML Menu Generator" support
Drag marker to set opacity Update your web browser and enable JavaScript for full "HTML Menu Generator" support
R G B Opacity
Submit
Apply
Cancel
Menu Explorer
Second Level Menu Appearance

Third Level Menu Appearance

About Menu Layout
Exit- Close
  • ID as selector
  • Class as selector
  • Plain HTML
  • Wordpress
  • Download ZIP file

To build a HTML CSS website layout for your menu
Visit : www.Blended-HTML.com