joomla day uk 2009 menus presentation
DESCRIPTION
Joomla menus presentation given at Joomla Day UK 2009 in Maidstone, Kent, UK.TRANSCRIPT
- 1. Joomla! Day UK 2009
2. Joomla! Day UK 2009 Menus and how to make them look cool Providing a flexible platform for digital publishing and collaboration. Chris Davenport Joomla! Core Team 3. Choosing a template Choose primarily for layout Menus can usually be customised 4. All kinds of menus All menus are just HTML unordered lists 5. Basic menu HTML
-
- Home/a>
-
- Joomla! Overview
-
- Joomla! License
-
- More about Joomla!
-
- FAQ
-
- The News
-
- Web Links
-
- News Feeds
Some tags and attributes stripped for clarity URLs shortened for clarity 6. 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 7. CSS Box Model Margin Padding Border Content box Bounding box 8. Basic menu styling
ul.menu { list-style: none; margin: 0; padding: 0; } Default Joomla menu class Corresponding class selector Don't need any of these styles if you used a CSS reset script 9. Vertical menus 10. Vertical menus
-
- ul.menu a {
-
- display: block;
-
- width: 200px;
-
- }
Gives all menu items a fixed width 11. Horizontal menus 12. Variable width horizontal
-
- ul.menu li {
-
- display: inline;
-
- }
13. Fixed width horizontal
-
- ul.menu a {
-
- display: block;
-
- width: 8em;
-
- text-align: center;
-
- }
-
- ul.menu li { float: left; }
14. 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; } 15. Web developer toolbar http://addons.mozilla.org/firefox/60/ 16. Roll-over effects
- link
- visited
- hover
- active
Reminder: The order of CSS pseudo-classes for link 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; } 17. 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; } 18. 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; } 19. Roll-over effects: submenus ul.menu li ul { position: absolute; width: 300px; left: -999em; } ul.menu li:hover ul { left: auto; margin-left: 352px; margin-top: -15px; } This shifts the sub-menu off the pageThis brings the sub-menu back onto the pageUse margins to position the sub-menu http://www.alistapart.com/articles/dropdowns http://htmldog.com/articles/suckerfish/dropdowns/ 20. Joomla menu CSS
- Sample data: Home page This menu item has an ItemID of 1. There
can be only onecurrentmenu item so it has anidof current This menu
item is theparentof at least one sub-menu so it has a class of
parent. 21. Joomla menu CSS
-
- Sample data: What's New in 1.5? page There can be
manyactivemenu items so they have aclassof active 22. Joomla menu
item 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 {
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; } Remember: there's only one current
item But there can be more than one active item Sometimes you may
need to change the hover colour for the current item 23. 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 {} 24. Background
images ul.menu a:link, ul.menu a:visited { padding: 5px 5px 5px
25px; background: url(../images/arrow.png) no-repeat center left; }
The path to the image is relative to the CSS file, not the template
root Increase the left padding to allow room for the background
image Use center to centre the image vertically 25. 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; }
26. 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
- Enter an id here and it will be added to the UL here Instead of
ul.menu, use ul#main-menu 28. Joomla Menu Class Suffix
- Module Manager -> Module: [Edit] Enter a suffix here and it
will be added to the UL here 29. 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.
-
- 30. 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!
- 30. Conclusion
-
- Module Manager -> Module: [Edit] Enter a suffix here and it
will be added to the UL here 29. 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.
- Sample data: What's New in 1.5? page There can be
manyactivemenu items so they have aclassof active 22. Joomla menu
item 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 {
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; } Remember: there's only one current
item But there can be more than one active item Sometimes you may
need to change the hover colour for the current item 23. 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 {} 24. Background
images ul.menu a:link, ul.menu a:visited { padding: 5px 5px 5px
25px; background: url(../images/arrow.png) no-repeat center left; }
The path to the image is relative to the CSS file, not the template
root Increase the left padding to allow room for the background
image Use center to centre the image vertically 25. 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; }
26. Where to get button images
-