Photoshop Question posted in
The official user guide can be found here.

On Click toggle menu – Photoshop

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.

Tags:

2

Answers


  1. 0

    Change .liFirst:hover to .liFirst:active

    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search