Please note, this is a STATIC archive of website www.cssplay.co.uk from 19 Oct 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Mobile Friendly Website

CSSPLAY

Doing it with style

CSS MENUSThe horizontal Float/Drop menu explained

Date : 18th July 2010

For all modern browsers


This demo is too wide for your mobile screen.
Please view on a tablet or PC.

Check the page source code for the stylesheet used for each step. The code used is identical for each step and is given in the information below.

This is a link above the menu so that you can see the affect of the various steps on this area.







Step one - getting the menu horizontal

The top level links 'Products' and 'Services' and their sub menus are floated left. The total width for each pair is 240px and the links are all 120px wide so that they fit inline. However when hovering the links they become 121px wide, but because the total width is now 241px the links will no longer fit within the overall width of 240px and so the sub menus drop below their top level link. This also happens when hovering the sub menu links. Hover over 'Products' and 'Services' to see the sub menus drop below allowing you to move onto the sub menu items. The negative bottom margin for the sub menus is to stop the sub menus pushing down the content below when moving beneath the top level link.

NOTE: I have added a green background color to the top level list element to indicate its size and position.


This is a link above the menu so that you can see the affect of the various steps on this area.



Step two - moving the sub menus out of the way

Applying a negative top margin to the top level list item we can move the sub menu upwards, then applying an equal positive top margin to the top level link we can move this back into position. Applying a large enough top margin in this way we can move the sub menu out of sight (should we wish to). I have applied a small top margin so that you can see what is happening. You will also see that the top level list element is growing to enclose the top level link and sub menu (all browsers except IE5.x and IE6 which has this fixed at the same height as the top level links). The green area is now covering the link above the menu in IE7 and only the text is seen in IE8 and non-IE browsers.


This is a link above the menu so that you can see the affect of the various steps on this area.



Step three - getting the top level links closer together

Reducing the width of the top level list item and applying a right margin to the top level link we can move the sub menu to the left.


This is a link above the menu so that you can see the affect of the various steps on this area.



Step four - getting the top level links next to each other (almost)

Reducing the width of the top level list item to its minimum and applying a right margin to the top level link we can move the sub menu so that it sits above the top level link.


This is a link above the menu so that you can see the affect of the various steps on this area.



Step five removing the jagged right edge

You will no doubt have noticed that when the width of the links is increased to 121px (on hover) it produces an unsightly jagged right edge to the sub menu. To stop this we can use the link right margin size instead for the link width on hover which will then keep the width at 120px but still increase the total 'space' occupied by the link and as such have the right edge of the sub menu remain vertical.


This is a link above the menu so that you can see the affect of the various steps on this area.





Step six - making the sub menus 'invisible'

If the sub menus are placed off the top of the screen then the top level list item (green area) will extend the full height of the browser window and may cause problems with the content above the menu. To avoid conflicts you could arrange the z-index of the various page elements so that they appear on top of this area OR simply make a small change to the menu styling to give the outer div.nav element a position:relative; and the top level ul.menu a position:absolute; with overflow:hidden; which will remove the top level list element and the sub menus from view. After doing this we can then remove the negative bottom margin from the ul.sub as this is no longer required.



Information

Applying a popup speech bubble to my previous menu to give an icon with a zoom feature and a sub navigation in the speech bubble.

Both the icon and the speech buuble use png images and Microsofts Alpha Image Loader to render this correctly in IE6.

Works in IE6, IE7, IE8, Firefox, Opera, Safari(PC) and Google Chrome.

HTML Code

<div class="nav">
 <ul class="menu">
  <li class="level1-li"><a class="level1-a" href="#url">Products</a>
   <ul class="sub">
    <li><a href="#url">Digital Cameras</a></li>
    <li><a href="#url">Tripods</a></li>
    <li><a href="#url">Flashguns</a></li>
    <li><a href="#url">Telephoto Lenses</a></li>
   </ul>
  </li>
  <li class="level1-li"><a class="level1-a" href="#">Services</a>
   <ul class="sub">
    <li><a href="#url">Enlarging</a></li>
    <li><a href="#url">Framing</a></li>
    <li><a href="#url">Printing</a></li>
    <li><a href="#url">Copying</a></li>
    <li><a href="#url">Sepia Toning</a></li>
   </ul>
  </li>
 </ul>
</div>

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.


Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page