© 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

Orange - Green Vertical HTML Menu Template Generator

An orange and green color combination with black background give this vertical menu a sharp look but in parallel keeps it calm. In this menu we added a custom circle that currently is unchangeable using "HTML Generator Tabs" but will present in the final generated code for this template.

No jQuery - clean CSS and HTML

All menus in this site are created using pure CSS and HTML only. We not making any use of jQuery but if you wish you can port those menus by your need for any CMS, plain HTML etc. website. This is what giving them a small size, witch useful for fast HTML page uploads.

The Unordered List Structure

All menus you will download or create using this site even the current "Menu Template" make a use of clear UL - "Unordered List" and LI - "List Item" elements. The essence in such a technique is resulting in clean CSS code, the only trick is to add "hover" rule for each sub menu / hovered item structure, and the web browser will do the rest work.

Browser Friendly

This vertical menu as others is made to be absolutely any web browser friendly. In other words it will be viewable in any browser "Cross Browser" for a better support it's recommended to make use of "<!DOCTYPE html>" in your HTML5 CSS3 page.

"HTML Menu Examples"

You don't have to download nor generate any code just play with menus re-styling them the way you want. We give those HTML menu examples for inspiration further customization is done by you. So if you use any CMS systems, Joomla, Wordpress, Drupal... style and download code, next open in any browser on your computer and apply same style for your site.

Orange - Green vertical menu template

This menu template created using four major colors, orange, green and black. Note for an orange circle appearing near menu item the mouse over, this circle is currently unchangeable but will appear in final generated code, so you will be able to change it there manually. As other vertical menu templates in this site this menu is absolutely free, if you like it link to this site. NOTE: It is highly recommended not exceed more that tree sub levels for this menu, for an orange circle to present in the correct place.

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
Main Menu Appearance
Second Level Menu Appearance

Third Level Menu Appearance

About Menu Layout
Orange - Green vertical menu template layout
Note for an orange circle appearing near menu item the mouse over, this circle is currently unchangeable but will appear in final generated code, so you will be able to change it there manually.
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