CODEWITHSUNDEEP
htmlcss
Rayne
Rayne

Reputation: 67

Accordion Vertical Nav

I've searched for the answer but either the question is slightly different or i can't get the code to work in a list or, it's so complex i just end up copying and pasting - which is obviously not what i want.

What I'm looking for (quite a beginner question I think), is how to hide and reveal the 'work' dropdown, like in an accordion. Here is the fiddle: http://jsfiddle.net/syoban/9Z8zA/8/

<div>
<ul class="vertical-nav">
    <li class="active"><a href="#"><i1></i1>home</a>

    </li>
    <li class="has-dropdown"><a href="#"><i2></i2>about</a>

    </li>
    <li><a href="#"><i3></i3>work <icd></icd></a>

        <ul class="child">
            <li>Web</li>
            <li>Print</li>
            <li>Illustration</li>
        </ul>
    </li>
    <li><a href="#"><i4></i4>contact</a>

    </li>
</ul>

From what I've gathered it has something to do with changing the height of the dropdown UL in order to 'fake' hide it but beyond that i'm stumped.

Any help greatly appreciated. I should clarify that i'd prefer CSS only.

Upvotes: 4

Views: 642

Answers (6)

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

Check the demo below. You can choose from the following fiddle.

Pure CSS Fiddle

CSS

.child{
    display:none;
}
#work:hover+.child{
    display:block;
}

jQuery Fiddle

JQuery

$('#work').on('click',function(){
$('.child').toggle();
});

Upvotes: 2

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

Add this to your CSS

ul li ul
{
    display:none;
}

ul li:hover ul
{
    display:block;
    list-style-type:none;
}

Fiddle

Fiddle Demo

Output:

enter image description here

Upvotes: 1

Khurram Hassan
Khurram Hassan

Reputation: 1544

You can achieve this using pure CSS, no jQuery required (including the hover effect). Just add these CSS code to your existing code. Here is your jsFiddle example.

.vertical-nav li ul 
{
    height: 0px;
    overflow: hidden;
    transition: height 0.3s;
    -webkit-transition: height 0.3s;
    -ms-transition: height 0.3s;
}
.vertical-nav li:hover ul 
{
    height: 70px;
}

Upvotes: 2

Manoj
Manoj

Reputation: 1890

Try this code:

DEMO

.child
{
    display:none;
}
#work:hover+.child
{
    display:block;
}

Upvotes: 1

Kheema Pandey
Kheema Pandey

Reputation: 10265

just add these 2 line of code in your CSS and it will work.

.vertical-nav li>ul{display:none;} /*new line added*/
.vertical-nav li:hover >ul{ display:block;}/*new line added*/

Working Demo link. http://jsfiddle.net/kheema/9Z8zA/12/

Upvotes: 0

Abhineet
Abhineet

Reputation: 632

Try this css solution

.vertical-nav li ul {
    display: none;
}
.vertical-nav li:hover ul {
    display: block;
}

Upvotes: 0

Related Questions