Reputation: 5628

Delay the CSS transition for 2 secs

OK So I have created a button that displays a menu on hovering over it. And the menu is hid as soon as the mouse is moved away from the button. Which is perfect, but the menu should not disappear when I am moving away from mouse to the menu itself. Which is also happening, but I have created a bounce effect using css to make it a little more stylish and if i try to hover my mouse on the menu before the animation takes place, the menu gets hides again, because of the gap between menu and button during the bounce action, so I wanted to delay the hiding for 2 secs, so that even if someone goes on button and tries to move over menu it should wait atleast 2 secs before disappearing. Link to fiddle

HTML Code

<div id="menu">
            <ul class="menu" id="tempMenu">
    <li class="listOfNumbers"><a id="Menus" href="">Numbers</a><div>
                        <ul class="submenu">
                            <li>
                                <a id="one" href="">one</a>
                            </li>
                            <li>
                                <a id="two" href="">two</a>
                            </li>
                            <li>
                                <a id="three" href="">three</a>
                            </li>
                            <li>
                                <a id="four" href="">four</a>
                            </li>
                            <li>
                                <a id="five" href="">five</a>
                            </li>
                            <li>
                                <a id="six" href="">six</a>
                            </li>
                            <li>
                                <a id="seven" href="">seven</a>
                            </li>
                            <li>
                                <a id="eight" href="">eight</a>
                            </li>
                        </ul>
                    </div>
                </li>
    </ul>
</div>

CSS Code:

ul.menu .listOfNumbers{
    position: fixed;
    margin-left: 20px;
    list-style-type: none;
    margin: 15px 0;
    float: left;
    height: 30px;
    line-height: 30px;

}
ul.menu .listOfNumbers a{
    position: fixed;
    margin-left: 93px;
    background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.3, rgb(00,00,00)), color-stop(0.9, rgb(80,80,80)) );
     background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(17,17,17,1) 60%, rgba(0,0,0,1) 77%, rgba(19,19,19,1) 91%);
   background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
    display: block;
    padding: 0;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    font-weight: bolder;
    text-shadow: #000 0 -1px 1px;
    width: 90px;
    text-align: center;
    border-bottom: 1px solid #000;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #000;
    -webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
    -moz-transition: text-shadow .7s ease-out, background .7s ease-out;
    -moz-box-shadow: white 7px 5px 20px;
    -webkit-box-shadow:white 7px 5px 20px;
    box-shadow: white 7px 5px 20px;
}
ul.menu .submenu{
    display: none;
   top: -30px;
   position: absolute;
    opacity: 0;
}
ul.menu .submenu li{
    list-style-type: none;
}
ul.menu li:hover .submenu{

    display: block;
    top: -2px;
    opacity: 1;
    animation:mymove 1.2s linear;
    -moz-animation:mymove 1.2s linear; /* Firefox */
    -webkit-animation:mymove 1.2s linear; /* Safari and Chrome */
    -o-animation:mymove 1.2s linear; /* Opera */
    -ms-animation:mymove 1.2s linear; /* IE */
}
@keyframes mymove
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-ms-keyframes mymove /* IE */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

ul.menu .submenu li:first-child a{
  -webkit-border-top-left-radius:10px;
    -webkit-border-bottom-left-radius:2px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-top-left-radius: 10px;
    -moz-border-radius-bottomleft:2px;    
    -moz-border-top-right-radius: 10px;
    -moz-border-radius-bottomright: 2px;
    border-top-left-radius: 10px;
    border-bottom-left-radius:2px;    
    border-top-right-radius: 10px;
    border-bottom-right-radius:2px;
    margin: 34px 95px;
    z-index: 1000;


}
ul.menu .submenu li:last-child a{
    -webkit-border-top-left-radius:2px;
    -webkit-border-bottom-left-radius:10px;
    -moz-border-top-left-radius: 2px;
    -moz-border-radius-bottomleft:10px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:10px;
    -moz-border-top-right-radius: 2px;
    -moz-border-radius-bottomright: 10px;
    border-top-left-radius: 2px;
    border-bottom-left-radius:10px;    
    border-top-right-radius: 2px;
    border-bottom-right-radius:10px;
    margin:260px 95px;
     z-index: 1000;

}

ul.menu .submenu li:nth-of-type(2) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 68px 95px;
     z-index: 1000;

}
ul.menu .submenu li:nth-of-type(3) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 100px 95px;
     z-index: 1000;

}
ul.menu .submenu li:nth-of-type(4) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 133px 95px;
     z-index: 1000;

}
ul.menu .submenu li:nth-of-type(5) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 165px 95px;
     z-index: 1000;

}
ul.menu .submenu li:nth-of-type(6) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 197px 95px;
     z-index: 1000;

}

ul.menu .submenu li:nth-of-type(7) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    margin: 229px 95px;
     z-index: 1000;

}

I dont know what if would be necessary to involve javascript or jQuery. But still if it is achievable using either of them then also it is fine.

Upvotes: 4

Answers (3)

tristan

Reputation: 409

jsfiddle http://jsfiddle.net/sP5hg/6/

    ul.menu .listOfNumbers{
    position: relative;
    margin-left: 20px;
    list-style-type: none;
    margin: 15px 0;
    float: left;
    line-height: 30px;
    z-index: 1000;
}
ul.menu .listOfNumbers a{
    margin-left: 93px;
    background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.3, rgb(00,00,00)), color-stop(0.9, rgb(80,80,80)) );
     background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(17,17,17,1) 60%, rgba(0,0,0,1) 77%, rgba(19,19,19,1) 91%);
   background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
    display: block;
    padding: 0;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    font-weight: bolder;
    text-shadow: #000 0 -1px 1px;
    width: 90px;
    text-align: center;
    border-bottom: 1px solid #000;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #000;
    -webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
    -moz-transition: text-shadow .7s ease-out, background .7s ease-out;
    -moz-box-shadow: white 7px 5px 20px;
    -webkit-box-shadow:white 7px 5px 20px;
    box-shadow: white 7px 5px 20px;
}
ul.menu .submenu{
    display: none;
   top: -30px;
   position: absolute;
    /*opacity: 0;*/
}
ul.menu .submenu li{
    list-style-type: none;
}

ul.menu li:hover .submenu{

    display: block;
    top: -2px;
    /*opacity: 1;*/
    animation:mymove 1.2s linear;
    -moz-animation:mymove 1.2s linear; /* Firefox */
    -webkit-animation:mymove 1.2s linear; /* Safari and Chrome */
    -o-animation:mymove 1.2s linear; /* Opera */
    -ms-animation:mymove 1.2s linear; /* IE */
}
@keyframes mymove
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

@-ms-keyframes mymove /* IE */
{
0%   {top:-10px;opacity:0.1;}
10%  {top:3px;opacity:0.3;}
30%  {top:40px;opacity:0.4;}
60%  {top:-5px;opacity:0.5;}
80%  {top:20px;opacity:0.7;}
90%  {top:10px;opacity:0.9;}
95%  {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}

ul.menu .submenu li:first-child a{
  -webkit-border-top-left-radius:10px;
    -webkit-border-bottom-left-radius:2px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-top-left-radius: 10px;
    -moz-border-radius-bottomleft:2px;    
    -moz-border-top-right-radius: 10px;
    -moz-border-radius-bottomright: 2px;
    border-top-left-radius: 10px;
    border-bottom-left-radius:2px;    
    border-top-right-radius: 10px;
    border-bottom-right-radius:2px;
    margin: 35px 93px 0;


}
ul.menu .submenu li:last-child a{
    -webkit-border-top-left-radius:2px;
    -webkit-border-bottom-left-radius:10px;
    -moz-border-top-left-radius: 2px;
    -moz-border-radius-bottomleft:10px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:10px;
    -moz-border-top-right-radius: 2px;
    -moz-border-radius-bottomright: 10px;
    border-top-left-radius: 2px;
    border-bottom-left-radius:10px;    
    border-top-right-radius: 2px;
    border-bottom-right-radius:10px;

}

ul.menu .submenu li:nth-of-type(2) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
}
ul.menu .submenu li:nth-of-type(3) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}
ul.menu .submenu li:nth-of-type(4) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}
ul.menu .submenu li:nth-of-type(5) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}
ul.menu .submenu li:nth-of-type(6) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}

ul.menu .submenu li:nth-of-type(7) a{
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-radius-bottomleft:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;

}

major CSS changes:

change the LI's position to relative and remove its children's position fix so that LI's size will include all of its children; This step is critical, since it will make the li:hover works all the time even the mouse could move out of link "Numbers";
apply z-index on the LI rather than on the sub menus, I'm afraid this should be more rational, since we want the whole menu should be on the top front;

Upvotes: 1

Ayush Khemka

Reputation: 480

have a look at this W3School explaination

It says that you can specify a transition for any time you want, have multiple transitions, and many more things you can do with CSS3. Do go through the tutorial, it will help you a lot.

Upvotes: -1

phenomnomnominal

Reputation: 5515

Perhaps you want transition-delay: https://developer.mozilla.org/en-US/docs/CSS/transition-delay

EDIT:

You may specify multiple delays; each delay will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. If there are fewer delays specified than in the master list, missing values are set to the initial value (0s). If there are more delays, the list is simply truncated to the right size. In both case the CSS declaration stays valid.

Upvotes: 3

Delay the CSS transition for 2 secs

Answers (3)

Related Questions