How to put transition in a dropdown of a menu?

Navigation
5

I currently use the following code: 

$("#menu").find('li').hover(function () {
    $(this).children('ul').clearQueue().slideDown(600);
    $(this).children('a').children('ul').clearQueue().show(0);
}, function () {
    $(this).children('ul').slideUp(300);
    $(this).children('a').children('ul').hide(0);
});

$("#menu").find('a').has( "ul" ).each(function() {
    $(this).addClass("menu-arrow");
});

It uses .slideDown and .slideUp . How could I leave it as the from this site ?

Whenyouhoveryourmouseoverthemenu,lowerthedropdowns.

Whatisthenameofthisrole?Icouldreplaceitwith.slide...

HTML code in Pastebin .

    
asked by anonymous 14.08.2014 / 03:59

3 answers

4

I do not know if it helps, but the source in JS for the showMenu function is this one: 

ypSlideOutMenu.showMenu = function(id)
{
var reg = ypSlideOutMenu.Registry
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
obj.over = true
for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
}

I took the page from the website itself, link

I hope it helps with something. Murilo

    
14.08.2014 / 04:22
4

The code below is a simple sample of what you might want to do. However, it is noteworthy that it only transitions into menus of only two levels and this is not the ideal solution for smartphones. To reach as many devices as possible within W3C standards, I recommend improving HTML, CSS, and JavaScript. Since I do not have much time, I have developed a very simple solution. 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Meu menu</title>
        <style type="text/css"><!--
            .menucontainer {
                background: #eee
            }
            ul.menu, ul {
                list-style: none;
                margin: 0;
                padding: 0;
                display: block
            }
            ul.menu a {
                text-decoration: none;
                color: inherit
            }
            ul.menu li {
                display: block;
                float: left;
                position: relative;
                padding: 10px
            }
            ul.menu li:hover {
                background: #ddd
            }
            ul.menu li li {
                float: none;
                padding: 0
            }
            ul.menu li li a {
                padding: 10px;
                display: block
            }
            ul.menu li .verticalhider {
                position: absolute;
                top: 90%;
                left: 0;
                overflow: hidden
            }
            ul.menu li ul {
                display: none;
                background: #f3f3f3;
                width: 200px;
                padding: 5px;
                border: 1px dotted #555;
                position: relative
            }
            ul.menu li:hover ul {
                display: block
            }
            .clearfix {
                clear: both
            }
        //--></style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script><scripttype="text/javascript"><!--
            (function($){
                $(function(){
                    $('.menu li > .verticalhider > ul').each(function(){
                        var u = $(this);
                        function getHeight(){
                            return u.height() + parseInt(u.css('paddingTop')) + parseInt(u.css('paddingBottom')) + parseInt(u.css('borderTopWidth')) + parseInt(u.css('borderBottomWidth'))
                        }
                        u.css({display: 'block', marginTop: -getHeight()}).parent().parent().mouseenter(function(){
                            u.stop().animate({marginTop: 0}, 200)
                        }).mouseleave(function(){
                            u.stop().animate({marginTop: -getHeight()}, 200)
                        })
                    })
                })
            })(jQuery);
        //--></script>
    </head>
    <body>
        <div class="menucontainer">
            <ul class="menu">
                <li>
                    <span>Menu 1</span>
                    <div class="verticalhider">
                        <ul>
                            <li>
                                <a href="#">Menu 1</a>
                            </li>
                            <li>
                                <a href="#">Menu 2</a>
                            </li>
                            <li>
                                <a href="#">Menu 3</a>
                            </li>
                            <li>
                                <a href="#">Menu 4</a>
                            </li>
                            <li>
                                <a href="#">Menu 5</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <span>Menu 2</span>
                    <div class="verticalhider">
                        <ul>
                            <li>
                                <a href="#">Menu 1</a>
                            </li>
                            <li>
                                <a href="#">Menu 2</a>
                            </li>
                            <li>
                                <a href="#">Menu 3</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>
    </body>
</html>

See you soon

    
14.08.2014 / 05:58
1

First, consider the possibility of a pure CSS solution, such as

15.08.2014 / 23:06
What does this "point" in Python mean? Generate random CPF in C #