A hidden tab menu-completely CSS

Source: Internet
Author: User

Author's website: http://www.cssplay.co.uk

For a simple and hidden menu, there is only one menu label for the indication at the beginning,
When you move the cursor over the menu label, the complete menu is displayed. Javascript has many versions,
But few CSS versions are available. I think this menu is unique so far.

Menu work in ie5.5, IE6, IE7, Firefox, opera, Netscape 8
Nd Mac Firefox 1.5 and Safari, cannot work in MAC ie5.x.

It can also be made into a multi-level expanded menu.

Cascading Style Sheets

Add a normal style sheet (non-ie)

 
<LINK rel = "stylesheet" Media = "all" type = "text/CSS" href = "CSS/hidden.css"/>

The hidden.css File

Add the style sheet to IE with the condition judgment statement

 
<! -- [If lte ie 6]>
<LINK rel = "stylesheet" Media = "all" type = "text/CSS" href = "CSS/hidden_ie.css"/>
<! [Endif] -->

The hidden_ie.css File

XHTML
<Div class = "menu"> <ul> <li> <a class = "Drop" href = "../menu/index.html"> menu <! -- [If IE 7]> <! --> </A> <! -- <! [Endif] --> <Table> <tr> <TD> <ul> <li> <a href = ".. /menu/zero_dollars.html "> zero dollars advertising page </a> </LI> <li> <a href = ".. /menu/embed.html "> wrapping text around images </a> </LI> <li> <a href = ".. /menu/form.html "> styled form </a> </LI> <li> <a href = ".. /menu/nodots.html "> active focus </a> </LI> <li> <a href = ".. /menu/shadow_boxing.html "> shadow boxing </a> </LI> <li> <a href = ".. /menu/old_master.html "> image map For detailed information </a> </LI> <li> <a href = ".. /menu/bodies.html "> fun with background images </a> </LI> <li> <a href = ".. /menu/fade_scroll.html "> fade scrolling </a> </LI> <li> <a href = ".. /menu/em_images.html "> em image sizes compared </a> </LI> </ul> </TD> </tr> </table> <! -- [If lte ie 6]> </a> <! [Endif] --> </LI> </ul> </div>

You canCodeAnd nested tables for a specific version of IE. other browsers will not see the tables,
But the list will be normally used unordered. Remember to use a standard document type (doctype ).

Final Effect

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.