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

Home/a>

Joomla! Overview

Joomla! License

More about Joomla!

FAQ

The News

Web Links

News Feeds

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