Pre lesson thought for the day

Next weeks lesson will be solving Circular Integrals using Gauss' divergence theorem so I would make sure you get this simple CSS stuff sorted out quickly :)

The Principle

Normally, the Top Bar dropdown menus are shown and hidden using the CSS display property. Unfortunately, it is not possible to add an easing transition to display, so upon changing from display:none to display:block the menu simply appears or disappears in quite a stark manner.

The trick here is to use the visibility and opacity properties rather than display to show and hide the dropdown when required. Since visibility and opacity can accept a transition then it becomes simple to ease in and out the drop downs.

How the code works

You will see that we are addressing two CSS selectors in the code below.

1. The dropdown menus

 .dropdown

Firstly we need to apply our new visibility and opacity properties to the actual dropdown menus themselves so that by default they are hidden and have an opacity of 0. We also change the display to block so that there is no change in its state between the hidden and shown cases, thus preventing the sudden appearance.

2. The menu item that will trigger the appearance of the dropdown when hovered over

.top-bar-section ul li.has-dropdown:hover > .dropdown

This second selector is a little more complicated. If you don't understand it, don't worry but this is what is it saying. (Read selectors from right to left, and it is much more intuitive to understand their hierarchy.)

So we are addressing

.dropdown

which is the class that all our drop down menus have. It is this class in our selector statement that will actually receive the styling that we apply between the curly braces.

Then, before that we specify the selector

.top-bar-section ul li.has-dropdown:hover

. top-bar-section is the class containing all of our menu items. Leaving it generic like this means that the selector will work no matter whether you have align left or right selected. This section contains an unordered list ul which in turn contains the menu items which are all list items - li's.

We only want to target those menu items that have drop down menus associated with them. So we add the class

.has-dropdown

to our li class with no space in between. The lack of a space is important and means that we want to target only li's that ALSO have the class has-dropdown.

So

ul li.has-dropdown

will select all menu items (li's) with the class has-dropdown that are children of our unordered list (ul). But we only want our styles to take effect when those items are hovered over.

We therefore add the final part of our selector :hover. This is known as a pseudo class. A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. In this case :hover will apply a style when the user hovers over the element specified by the selector.

Just for reference, the other simple pseudo selectors that are available are :link, :visited and :active

The final piece in the puzzle, '>'

You will notice that between our selector for the hovered menu item and the dropdown that is going to receive the styling (i.e. appear) we have the > symbol.

 This operator specifies immediate children only. So it will limit the selection of elements on the right hand side of the > symbol to only those that are direct decedents of the elements specified by the selector on the left hand side.

 Why is this important?

 Because without it, every time you hovered over a menu item that contains drop downs then the styling would be applied to all elements that have the class ".dropdown". This would result in all your dropdown appearing together - no matter which menu item you hover over.

Are you still with us?

I know that the last half an hour spent writing this will be merely an inconvenience that has to be scrolled out of the way to get to the snippet. Admittedly this example is a little more complex example of CSS selectors but it does demonstrate several principles that you really should understand.

 If nothing else, learning a little CSS can save you a lot of money!....

Would you really pay someone $10 to write about 18 characters of text for you if you didn't need to? I would imagine not but I am willing to bet most have. Learn a little CSS and make use of the free CSS Box stack and not only will you save money but your pages will contain a lot less redundant code and will be faster.

So here is the code...

Just paste this into the site-wide CSS in RapidWeaver and your Top Bar menus will ease in beautifully.

 If you want to change the speed of the transition just adjust the 250ms as required (ms obviously refers to milliseconds). You can also change the easing function if you like. Try linear instead of ease-in-out, you may prefer it.

Note: If you want this to work in all versions of Internet Explorer then you will need to add the appropriate opacity polyfill for it - I can't tell you everything at once now can I :)

 .top-bar-section ul li.has-dropdown .dropdown {
     display:block; 
     visibility: hidden;
     opacity: 0 ;
}


.top-bar-section ul li.has-dropdown:hover > .dropdown {
    visibility: visible;
    opacity: 1;
    transition: opacity 250ms ease-in-out;
   -moz-transition: opacity 250ms ease-in-out;
   -webkit-transition: opacity 250ms ease-in-out;  }