Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Hide a menu until a box is hovered

Hide a menu until a box is hovered

Problem

I have an accordion style menu that floats to the right of the page. It takes up a lot of space and I would like to find a way to make it hidden.

How can I make an orange box to be put in its place and whenever hovered, the menu appears.

EXAMPLE:

My menu: http://jsfiddle.net/4dHYq/

HTML:

CSS:

body {
    font-size: 100%;
    background:#cccccc;
}
a {
    text-decoration: none;
}
ul, ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu {
    float: right;
    width: 300px;
    height: auto;
}
.menu > li > a {
    background-color: #f36f21;
    border-bottom: 1px solid #444;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    color: #fff;
}
.menu ul li a {
    background: #fff;
    border-bottom: 1px solid #efeff0;
    width: 100%;
    height: 2em;
    line-height: 2em;
    text-indent: 2em;
    display: block;
    position: relative;
    color: #444;
}
.menu ul li:last-child a {
    border-bottom: 1px solid #444;
}
.menu > li > a:hover, .menu > li > a.active {
    background-color: #444;
    border-bottom: 1px solid #f36f21;
}
.menu > li > a.active {
    border-bottom: 1px solid #f36f21;
}
.menu > li > a:before {
    font-size: 36px;
    height: 1em;
    width: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    margin: -.5em 0 0 0;
}

.menu > li > ul li a:before{
    content: '▶';
    font-size: 8px;
    color: #bcbcbf;
    position: absolute;
    width: 1em;
    height: 1em;
    top: 0;
    left: -2.7em;
}

.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
    color: #444;
}
Problem courtesy of: Chaddly

Solution

Apply a generic hide class (display:none;) to your Menu UL with a Div. Inside this Div place a Span which will act as the access point to your menu.

You can then add the following code :

$('.menuAccess').hover(function () {
    $('.menu').removeClass('hide');
}, function () {
    $('.menu').addClass('hide');
});

http://jsfiddle.net/danieljordan13/Ha58r/2/

Solution courtesy of: Daniel Jordan

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Hide a menu until a box is hovered

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×