Your SlideShare is downloading. ×
0
Joomla! Day UK 2009
Joomla! Day UK 2009 Menus and how to make them look cool Providing a flexible platform for digital publishing and collabor...
Choosing a template Choose primarily for layout Menus can usually be customised
All kinds of menus All menus are just HTML unordered lists
Basic menu HTML <ul><ul><li><ul> </li></ul></ul><ul><ul><li><li><a href=&quot;/&quot;>Home/a></li> </li></ul></ul><ul><ul>...
Basic CSS styling <ul><li>Boxes: </li></ul><ul><ul><li>margin, border, padding, width, height. </li></ul></ul><ul><li>Colo...
CSS Box Model Margin Padding Border Content box Bounding box
Basic menu styling <ul><ul><li><ul class=&quot;menu&quot;> </li></ul></ul>ul.menu { list-style: none; margin: 0; padding: ...
Vertical menus
Vertical menus <ul><ul><li>ul.menu a { </li></ul></ul><ul><ul><li>display: block; </li></ul></ul><ul><ul><li>width: 200px;...
Horizontal menus
Variable width horizontal <ul><ul><li>ul.menu li { </li></ul></ul><ul><ul><li>display: inline; </li></ul></ul><ul><ul><li>...
Fixed width horizontal <ul><ul><li>ul.menu a { </li></ul></ul><ul><ul><li>display: block; </li></ul></ul><ul><ul><li>width...
Basic styling ul.menu a { display: block; width: 8.5em; font-size: 2em; text-decoration: none; margin-top: 10px; padding: ...
Web developer toolbar http://addons.mozilla.org/firefox/60/
Roll-over effects <ul><li>link </li></ul><ul><li>visited </li></ul><ul><li>hover </li></ul><ul><li>active </li></ul>Remind...
Roll-over effects: Example ul.menu a:hover { color: white; background-color: blue; } ul.menu a:link, ul.menu a:visited { c...
Roll-over effects: Borders ul.menu a:link, ul.menu a:visited { padding: 0.2em 0.4em; border-left: 0.4em solid #2b3d91; col...
Roll-over effects: submenus ul.menu li ul { position: absolute; width: 300px; left: -999em; } ul.menu li:hover ul { left: ...
Joomla menu CSS <ul class=&quot;menu&quot;> <li id=&quot;current&quot; class=&quot;active item1&quot;> <li class=&quot;par...
Joomla menu CSS <ul class=&quot;menu&quot;> <li class=&quot;item1&quot;> <li class=&quot;parent active item27&quot;> <ul> ...
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.acti...
Joomla menu CSS cascade /* Basic link styles - Joomla states */ ul.menu li#current a:link, ul.menu li#current a:visited, u...
Background images ul.menu a:link, ul.menu a:visited { padding: 5px 5px 5px 25px; background: url(../images/arrow.png) no-r...
Background images ul.menu a:link, ul.menu a:visited { margin-top: 10px; padding: 5px 5px 5px 25px; background: url(../imag...
Where to get button images <ul><li>http://www.buttonboost.com/startweb.html </li></ul><ul><li>http://cooltext.com/ </li></...
Joomla Menu Tag ID Module Manager -> Module: [Edit] <ul class=”menu” id=”main-menu”> Enter an id here and it will be added...
Joomla Menu Class Suffix <ul class=”menu-main-menu”> Module Manager -> Module: [Edit] Enter a suffix here and it will be a...
Joomla Menu Class Suffix Tip: If you enter a Menu Class Suffix with a leading space, you will get separate CSS classes in ...
Conclusion <ul><li>Use a recipe to set the orientation of the menu. </li></ul><ul><ul><li>Vertical, horizontal (fixed or v...
If you can't be bothered Check out the extensions site: http://extensions.joomla.org/extensions/core-enhancements/menu-sys...
Joomla menus Questions?
Copyright and Licence Copyright © 2009 Chris Davenport This presentation is available for use under the Joomla! Electronic...
Upcoming SlideShare
Loading in...5
×

Joomla! Day UK 2009 Menus Presentation

1,860

Published on

Chris Davenport's presentation on Creating Good Looking, Functional, Menus from this year's Joomla! Day UK event

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,860
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
64
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Joomla! Day UK 2009 Menus Presentation"

  1. 1. Joomla! Day UK 2009
  2. 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. 3. Choosing a template Choose primarily for layout Menus can usually be customised
  4. 4. All kinds of menus All menus are just HTML unordered lists
  5. 5. Basic menu HTML <ul><ul><li><ul> </li></ul></ul><ul><ul><li><li><a href=&quot;/&quot;>Home/a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;/joomla-overview&quot;>Joomla! Overview</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;/joomla-license&quot;><span>Joomla! License</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;/more-about-joomla&quot;>More about Joomla!</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;/faq&quot;>FAQ</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;/the-news&quot;>The News</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;/web-links&quot;>Web Links</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;/news-feeds&quot;>News Feeds</a></li> </li></ul></ul><ul><ul><li></ul> </li></ul></ul>Some tags and attributes stripped for clarity URLs shortened for clarity
  6. 6. Basic CSS styling <ul><li>Boxes: </li></ul><ul><ul><li>margin, border, padding, width, height. </li></ul></ul><ul><li>Colour: </li></ul><ul><ul><li>color, background-color. </li></ul></ul><ul><li>Text: </li></ul><ul><ul><li>text-decoration, text-align, text-transform. </li></ul></ul><ul><ul><li>font-family, font-weight, font-size. </li></ul></ul>Learn more: http://www.w3schools.com/css/default.asp
  7. 7. CSS Box Model Margin Padding Border Content box Bounding box
  8. 8. Basic menu styling <ul><ul><li><ul class=&quot;menu&quot;> </li></ul></ul>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. 9. Vertical menus
  10. 10. Vertical menus <ul><ul><li>ul.menu a { </li></ul></ul><ul><ul><li>display: block; </li></ul></ul><ul><ul><li>width: 200px; </li></ul></ul><ul><ul><li>} </li></ul></ul>Gives all menu items a fixed width
  11. 11. Horizontal menus
  12. 12. Variable width horizontal <ul><ul><li>ul.menu li { </li></ul></ul><ul><ul><li>display: inline; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  13. 13. Fixed width horizontal <ul><ul><li>ul.menu a { </li></ul></ul><ul><ul><li>display: block; </li></ul></ul><ul><ul><li>width: 8em; </li></ul></ul><ul><ul><li>text-align: center; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>ul.menu li { float: left; } </li></ul></ul>
  14. 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. 15. Web developer toolbar http://addons.mozilla.org/firefox/60/
  16. 16. Roll-over effects <ul><li>link </li></ul><ul><li>visited </li></ul><ul><li>hover </li></ul><ul><li>active </li></ul>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. 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. 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. 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 page This brings the sub-menu back onto the page Use margins to position the sub-menu http://www.alistapart.com/articles/dropdowns http://htmldog.com/articles/suckerfish/dropdowns/
  20. 20. Joomla menu CSS <ul class=&quot;menu&quot;> <li id=&quot;current&quot; class=&quot;active item1&quot;> <li class=&quot;parent item27&quot;> <li class=&quot;item2&quot;> 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 “current” This menu item is the parent of at least one sub-menu so it has a class of “parent”.
  21. 21. Joomla menu CSS <ul class=&quot;menu&quot;> <li class=&quot;item1&quot;> <li class=&quot;parent active item27&quot;> <ul> <li id=&quot;current&quot; class=&quot;active item34&quot;> Sample data: What's New in 1.5? page There can be many active menu items so they have a class of “active”
  22. 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. 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. 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. 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. 26. Where to get button images <ul><li>http://www.buttonboost.com/startweb.html </li></ul><ul><li>http://cooltext.com/ </li></ul><ul><li>http://www.netdenizen.com/buttonmill/glassy.php </li></ul><ul><li>Use your favourite search engine to find others </li></ul>
  27. 27. Joomla Menu Tag ID Module Manager -> Module: [Edit] <ul class=”menu” id=”main-menu”> Enter an id here and it will be added to the UL here Instead of ul.menu, use ul#main-menu
  28. 28. Joomla Menu Class Suffix <ul class=”menu-main-menu”> Module Manager -> Module: [Edit] Enter a suffix here and it will be added to the UL here
  29. 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. <ul class=”menu main-menu”> <ul class=”menu main left rounded”>
  30. 30. Conclusion <ul><li>Use a recipe to set the orientation of the menu. </li></ul><ul><ul><li>Vertical, horizontal (fixed or variable). </li></ul></ul><ul><li>Use a prototype stylesheet to ensure you get styles in the right order. </li></ul><ul><li>Use Web Developer Toolbar to save time. </li></ul><ul><li>Start by applying basic CSS styles. </li></ul><ul><li>Apply hover (and active) behaviour. </li></ul><ul><ul><li>Decide if you are showing sub-menus on hover. </li></ul></ul><ul><li>Apply Joomla state behaviour. </li></ul><ul><li>Have fun and let your creative juices flow! </li></ul>
  31. 31. If you can't be bothered Check out the extensions site: http://extensions.joomla.org/extensions/core-enhancements/menu-systems
  32. 32. Joomla menus Questions?
  33. 33. Copyright and Licence Copyright © 2009 Chris Davenport This presentation is available for use under the Joomla! Electronic Documentation License http://docs.joomla.org/JEDL
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×