MenuMachine menu styled with CSS/stylesheet
various vertical menues
- if the various font/format/border options in MenuMachine don't suffice your extravagant design concept ... ;-), you can define your own cool stylesheet
- apply your preferred style as span to the menuitems in the textfields like this:
<span class='cooltype1'>COOL TYPE 1</span>
(if you are not afraid of doing things in code, you can copy/paste the tags tiny bit quicker if you go into source of the menuspec.js for your menu)
- the tags will appear in inspector and layout but in the browser everything will look fine
- the css overwrites some MenuMachine settings, e.g. if you have set your text alignment in MM as left, but the css is set to center the text, it will be rendered as centered in the browser
- if you use margins and paddings in your .css, the paddings/x- and y-positions set in the MenuMachine editor will still be displayed, so you can set those to 0 to not get confused
- I have used a variety of fonts like Mini 7, Pixel, Tenacity, Maxxi... So, if you don't have those fonts installed on your system you will see the next in the set up font row which are Verdana, Tahoma, Geneva, etc., (click here for a small screenshot to see what the fonts I've used look like)
- I also played with different border styles, colours, paddings, etc. :-)
- it's one MenuMachine menu, but each mainitem and it's submenu uses different css that's why it looks like different menues.
- for the gaps at the mainmenu I use “Block/Pad between items/10px”
- not all browsers might display the css alike, though... (e.g. IE6 doesn't display 1px dotted lines as dots but dashes...)
- the css for first blue/turquoise menu is this (you can simply copy/paste this into your stylesheet and adjust it as you like):
- .cooltype1 { color: #0fc; font-family: "Mini 7 Condensed", Verdana, Helvetica, sans-serif; line-height: 12px; text-decoration: none; text-align: center; padding: 4px 3px; border-bottom: 1px dashed #4cebe6; display: block }
- I've noticed that not all css settings that are possible in the stylesheet will appear in the MenuMachine menu (apart from those that wouldn't make sense here anyway, e.g. intent of paragraphs or ul settings) (yet). e.g. a:hover settings are not respected yet ... I'll continue with my experiments, and check out updates of MenuMachine and post further samples here.
(for demonstration only - no pagelinks added to the items)
