CODEWITHSUNDEEP
jqueryhtmlcssmenu
Sergio Morganti
Sergio Morganti

Reputation: 163

On Click toggle menu

I know there's lots of tutorials and questions about this topic, but I followed lots of them and none of them solved my problem.

The thing is: I have an HTML and CSS menu, and it's submenus are hidden. They appear when mouse hover it. I want to make the submenu appear when clicked, not when hovered.

Here's my code.

<ul class="gn-menu">
<li class="gn-search-item">
<input placeholder="Search" type="search" class="gn-search">
<a class="gn-icon gn-icon-search"><span>Search</span></a>
</li>
<li class="liFirst">
<a class="gn-icon gn-icon-download" href="#">Downloads</a>
<ul class="gn-submenu">
<li><a class="gn-icon gn-icon-illustrator">Vector Illustrations</a></li>
<li><a class="gn-icon gn-icon-photoshop">Photoshop files</a></li>
</ul>
</li>
</ul>

Here's my css

    .liFirst:active .gn-submenu li, .liFirst:hover .gn-submenu li {
    display: block;
}

.gn-submenu li {
        display: none;
        overflow: hidden;
        height: 0;
        -webkit-transition: height 0.3s;
        -moz-transition: height 0.3s;
        transition: height 0.3s;    
        padding-left: 20px;
}

Can someone help me out? I know that I need some JS in order to make it works, but I don't know much about CSS...

Sorry about my bad english. Thank you in forward.

Upvotes: 0

Views: 639

Answers (2)

Dimitri
Dimitri

Reputation: 302

You have to use anchor to define when your div is focused

        <nav>
        <ul>
            <li><a href="#">menu 1</a></li>
            <li><a href="#">menu 2</a>
                <ul>
                    <li><a href="#">menu 2.1</a></li>
                    <li><a href="#">menu 2.2</a></li>
                    <li><a href="#">menu 2.3</a></li>
                </ul>
            </li>
            <li><a href="#">menu 3</a>
                <ul>
                    <li><a href="#">menu 3.1</a></li>
                    <li><a href="#">menu 3.2</a></li>
                    <li><a href="#">menu 3.3</a></li>
                </ul>
            </li>
        </ul>
        </nav>

                    <style>
        ul, li{
            padding: 0;
            list-style-type: none;
        }
        nav>ul>li{
            display: inline-block;
            border: 1px solid #000;
        }
        nav>ul ul{
            display: none;
            position: absolute;
        }
        nav>ul li:active ul{
            display: block;
        }
        nav>ul ul>li{
            position: relative;
            left: 0;
        }
                    </style>

jsfiddle : http://jsfiddle.net/4tYWX/2/

Upvotes: 2

BOMEz
BOMEz

Reputation: 1010

Change .liFirst:hover to .liFirst:active

Upvotes: 1

Related Questions