0

Здравствуйте!
Подскажите, пожалуйста, как называется эффект появления всплывающего окошка на странице при наведении на "Adrian Demian" справа вверху?

2 ответа 2

0

Тебе самому проще написать чем искать плагин, здесь обычный animate jquery Вот накидал на скорую руку думаю дальше поймешь, через условие делай

<!doctype html>
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#js_hover").on('mouseover', function(){
            $("ul.dropdown-menu").css({"display": "block"});
            $("ul.dropdown-menu").animate({"padding-top": "0px"}, 200);
        });
        $(".dropdown-menu").on('mouseleave', function(){
            $("ul.dropdown-menu").css({"display": "none"});
            $("ul.dropdown-menu").css({"padding-top": "15px"});
        });
    });
    </script>
    <style type="text/css">
        .menu {
    padding-left: 0px;
}
.menu li {
    display: inline-block;
}
.dropdown-menu li {
    background: red;
    width: 140px;
    padding: 0px;
    display: block;
}
.item {
    padding: 5px 10px 5px 10px;
}
.dropdown-menu {
    display: none;
    padding-left: 10px;
    padding-top: 15px;
}
    </style>
</head>
<body>
    <ul class="menu">
    <li class="item" id="js_hover">Menu</li>
    <li class="item">Menu1</li>
    <li class="item">Menu2</li>
    <ul class="dropdown-menu">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
</ul>
</body>
</html>
0

tooltip menu fadeUp :)

http://tympanus.net/Blueprints/TooltipMenu/

2
  • не совсем такой эффект, на примере он как-бы выезжает снизу чуть вверх, а на указанном вами просто fadeIn/Out 28 ноя 2013 в 20:25
  • ну погуглите нужный и вас глючит, он не выезжает, там анимация сделана с помощью вот таких строк в css: html.csstransitions.csstransforms3d .navbar.main .dropdown.open .dropdown-menu { -webkit-animation: fadeInUp 200ms linear; -moz-animation: fadeInUp 200ms linear; -ms-animation: fadeInUp 200ms linear;
    – zb'
    28 ноя 2013 в 20:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.