Accordion style left navigation (quick launch) using pure CSS

<style type=”text/css”>
.s4-ql li.static
{
height: 2em;
overflow: hidden;
}

.s4-ql li.static:hover
{
height: auto;
}

.s4-ql li > span.menu-item
{
cursor: pointer;
}
/* Format the headers */
.s4-ql li > span.menu-item
{
cursor: pointer;
background: #0171C6;
color: white;
border: solid #fff;
border-width: 1px 0;
}
/* Format the accordion list items */
.s4-ql a.menu-item
{
color: #000;
background: #C9D4FF;
border: 1px solid #97C8F7;
border-bottom: none;
}
/* Format the header hover, list item hover and currently selected item */
.s4-ql li > span.menu-item:hover, /*Header */
.s4-ql a.selected, /* Selected */
.s4-ql a.menu-item:hover /* List item */
{
color: #FFF;
background: #073D7D;
}

.s4-ql ul.root > li.static
{
max-height: 2em;
overflow: hidden;
transition: max-height 1s linear;
}

.s4-ql ul.root > li.static:hover
{
max-height: 500px;
}

</style>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s