Slide 1
Joomla! Day UK 2009
Joomla! Day UK 2009
Menus and how to make them look cool
Chris Davenport
Joomla! Core Team
Providing a flexible platform for digital publishing and collaboration.
Choosing a template
Choose primarily for layoutMenus can usually be customised
All kinds of menus
All menus are just HTML unordered lists
Basic menu HTML
Some tags and attributes stripped for clarityURLs shortened for clarity
Basic CSS styling
Boxes:
margin, border, padding, width, height.
Colour:
color, background-color.
Text:
text-decoration, text-align, text-transform.
font-family, font-weight, font-size.
Learn more: http://www.w3schools.com/css/default.asp
CSS Box Model
Margin
Padding
Border
Content box
Bounding box
Basic menu styling
ul.menu { list-style: none; margin: 0; padding: 0;}
Default Joomla menu classCorresponding class selectorDon't need any of these stylesif you used a CSS reset script
Vertical menus
Vertical menus
ul.menu a {
display: block;
width: 200px;
}
Gives all menu items a fixed width
Horizontal menus
Variable width horizontal
ul.menu li {
display: inline;
}
Fixed width horizontal
ul.menu a {
display: block;
width: 8em;
text-align: center;
}
ul.menu li { float: left; }
Basic styling
ul.menu a { display: block; width: 8.5em; font-size: 2em; text-decoration: none; margin-top: 10px; padding: 5px 5px 5px 15px; color: #2b3d91; background-color: #f0f0f0;}
Web developer toolbar
http://addons.mozilla.org/firefox/60/
Roll-over effects
link
visited
hover
active
Reminder: The order of CSS pseudo-classes forlink states is important.
Mnemonic: LoVe - HAte
Example
ul.menu a:link,ul.menu a:visited { text-decoration: none;}
ul.menu a:hover { text-decoration: underline;}
Roll-over effects: Example
ul.menu a:hover { color: white; background-color: blue; }
ul.menu a:link,ul.menu a:visited { color: blue; background-color: white; }
ul.menu a:active { color: white; background-color: red; }
Roll-over effects: Borders
ul.menu a:link, ul.menu a:visited {padding: 0.2em 0.4em;border-left: 0.4em solid #2b3d91;color: #2b3d91;background: #f6f6ff; }
ul.menu a:hover {border-left: 0.4em solid #aea;color: white;background: #369; }
ul.menu a:active {border-left: 0.4em solid red; }
Roll-over effects: submenus
This shifts the sub-menu off the page This brings the sub-menu back onto the page Use margins to position the sub-menuul.menu li ul { position: absolute; width: 300px; left: -999em;}
ul.menu li:hover ul { left: auto; margin-left: 352px; margin-top: -15px;}
http://www.alistapart.com/articles/dropdownshttp://htmldog.com/articles/suckerfish/dropdowns/
Joomla menu CSS
Sample data: Home page
This menu item has an ItemID of 1.There can be only one current menu item so it has an id of currentThis menu item is the parent of at least one sub-menu so it has a class of parent.
Joomla menu CSS
There can be many active menu items so they have a class of activeSample data: What's New in 1.5? page
Joomla menu item states
Remember: there's only one current itemBut there can be more than one active itemSometimes you may need to change the hover colour for the current itemul.menu li#current a:link,ul.menu li#current a:visited,
ul.menu li.active a:link,ul.menu li.active a:visited {
color: #f0f0f0;background: #2b3d91;border-left: 0.4em solid #fe3;}
ul.menu li#current a:hover,ul.menu li.active a:hover {border-left: 0.4em solid #aea;}
Joomla menu CSS cascade
/* Basic link styles - Joomla states */ul.menu li#current a:link,ul.menu li#current a:visited,ul.menu li.active > a:link,ul.menu li.active > a:visited {}
/* Basic menu styles */ul.menu {}
/* Hover states */ul.menu a:hover,ul.menu li#current a:hover,ul.menu li.active a:hover {}
/* Suckerfish - Hide/show sub-menus */ul.menu li ul { position: absolute; left: -999em;}
ul.menu li:hover ul { left: auto; margin-left: 342px; margin-top: -44px;}
/* Basic link styles */ul.menu a:link,ul.menu a:visited {}
/* Styles for parent menus */ul.menu li.parent {}
/* Active states */ul.menu a:active,ul.menu li#current a:active,ul.menu li.active a:active {}
Background images
The path to the image is relative to the CSS file, not the template rootIncrease the left padding to allow room for the background imageUse center to centre the image verticallyul.menu a:link,ul.menu a:visited { padding: 5px 5px 5px 25px; background: url(../images/arrow.png) no-repeat center left;}
Background images
ul.menu a:link,ul.menu a:visited { margin-top: 10px; padding: 5px 5px 5px 25px; background: url(../images/button_0.png) no-repeat center left; color: white;}ul.menu a:hover { background: url(../images/button_1.png) no-repeat center left;}
Where to get button images
http://www.buttonboost.com/startweb.html
http://cooltext.com/
http://www.netdenizen.com/buttonmill/glassy.php
Use your favourite search engine to find others
Joomla Menu Tag ID
Module Manager Module: [Edit]
Enter an id hereand it will be added to the UL hereInstead of ul.menu, use ul#main-menu
Joomla Menu Class Suffix
Module Manager Module: [Edit]
Enter a suffix hereand it will be added to the UL here
Joomla Menu Class Suffix
Tip: If you enter a Menu Class Suffix with a leading space, you will get separate CSS classes in the UL.
Tip: You can have as many classes in the UL as you like.
Conclusion
Use a recipe to set the orientation of the menu.
Vertical, horizontal (fixed or variable).
Use a prototype stylesheet to ensure you get styles in the right order.
Use Web Developer Toolbar to save time.
Start by applying basic CSS styles.
Apply hover (and active) behaviour.
Decide if you are showing sub-menus on hover.
Apply Joomla state behaviour.
Have fun and let your creative juices flow!
If you can't be bothered
Check out the extensions site:http://extensions.joomla.org/extensions/core-enhancements/menu-systems
Joomla menus
Questions?
Copyright and Licence
Copyright 2009 Chris Davenport
This presentation is available for use under theJoomla! Electronic Documentation Licensehttp://docs.joomla.org/JEDL
Click to edit Subject titleClick to edit Speaker Name
Click to edit Speaker Company
Click to edit Position
Click to edit Joomla! Community Position