Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.08.2015, 20:04
Интересующийся
Отправить личное сообщение для zzMaddyzz Посмотреть профиль Найти все сообщения от zzMaddyzz
 
Регистрация: 06.03.2015
Сообщений: 15

Дерганье картинок при SlideDown в меню
Доброго времени суток! Сварганил трехуровневое меню,проблема в том, что при выезжании подменю картинка(в примере цифра 1,на самом деле обычная стрелка) появляется быстрее чем появляется само подменю (сначала вылазит картинка,а потом все остальное) и соответственно пропадает медленней.Есть ли способ решить данную проблему кроме как уменьшить милисекунды в slidedown?
https://jsfiddle.net/vnv466dw/4/
Ответить с цитированием
  #2 (permalink)  
Старый 30.08.2015, 21:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от zzMaddyzz
появляется быстрее
.pointer-img{
position: absolute;
вы хотите обогнать абсолют?
Ответить с цитированием
  #3 (permalink)  
Старый 30.08.2015, 21:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

вертикальное меню
zzMaddyzz,
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <style type='text/css'>
  a{text-decoration:none}
  .menu-block{width:240px;height:auto;border:2px solid black;border-radius:6px;box-shadow:0px 1px 12px 3px rgba(0,0,0,0.95);margin:5% 0 0 5%}
  .menu-block>ul{margin:0;padding:0}
  .menu-block>ul>li{list-style:none;border-bottom:2px solid black}
  #first{border-radius:3px 3px 0px 0px}
  #last{border-bottom:none;overflow:hidden;border-radius:0 0 3px 3px}
  .menu-block>ul>li>a{border-top:2px solid #757881;font:16px Verdana;color:#f4f6fa;background:linear-gradient(to top,#3a3d47,#4d505a);text-shadow:0px 1px 0px rgba(0,0,0,0.5);display:block;padding-left:15%;padding-top:10px;padding-bottom:13px}
  .menu-block>ul>li>a:hover{border-top:2px solid #a5ba47;background:linear-gradient(to top,#58641c,#95a52c);cursor:pointer}
  .menu-block>ul>li>a.active{background:linear-gradient(to top,#58641c,#95a52c);border-top:2px solid #a5ba47;box-shadow:inset 0px 1px 9px 1px rgba(50,50,50,0.55)}
  .category-section{background:#2d3239;display:none}
  .category-section>li{list-style:none}
  .category-section>li>a{font:14px Verdana;color:#b0ce13;display:block;margin-left:14px;padding-top:7px}
  .category-section>li>a:hover{cursor:pointer}
  .pointer-img{position:absolute;margin-left:-15px;margin-top:5px;border:none;display:block}
  .second-section{display:none;margin-left:-10px;margin-top:4px}
  .second-section>li{list-style:disc;color:#708409}
  .second-section>li>a{font:14px Verdana;color:#708409;display:block;padding-bottom:7px}
  .second-section>li:hover,.second-section>li>a:hover{color:#cfd0d1;cursor:pointer}
  .second-section>li:active,.second-section>li>a:active{color:#cfd0d1}
  .sublink{position:relative}
  </style>





<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 jQuery(function() {
    $(".second-section, .category-section").each(function(f, c) {
        var a = $(this).prev(),
            d = $(this).parent(),
            b = $("img", a);
        a.click(function(e) {
            e.preventDefault();
            d.siblings().find("a.active").click();
            a.toggleClass("active");
            $(c).stop().slideToggle();
            b.length && b.css("transform", a.is(".active") ? "rotate(90deg)" : "rotate(0deg)")
        })
    })
});
  </script>




    <title>Test - Menu</title>
</head>
<body>
<div class="menu-block">
<ul>
    <li>
        <a id ="first" href="#" alt="">Сделать ставку</a>
        <ul class="category-section">
            <li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png"  alt="1"/>Подкатегория</a>
                <ul class="second-section">
                    <li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
                    <li><a href="#" alt="">Подкатегория active</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" alt="">Результаты матчей</a>
        <ul class="category-section">
            <li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
                <ul class="second-section">
                    <li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
                    <li><a href="#" alt="">Подкатегория active</a></li>
                </ul>
            </li>
            <li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
                <ul class="second-section">
                    <li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
                    <li><a href="#" alt="">Подкатегория active</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" alt="">Правила</a>
        <ul class="category-section">
            <li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
                <ul class="second-section">
                    <li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
                    <li><a>Подкатегория active</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" alt="">Анонсы матчей</a>
        <ul class="category-section">
            <li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
                <ul class="second-section">
                    <li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
                    <li><a href="#" alt="">Подкатегория active</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" alt="">Новости проекта</a>
        <ul class="category-section">
            <li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
                <ul class="second-section">
                    <li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
                    <li><a href="#" alt="">Подкатегория active</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" alt="">Реферальная программа</a>
        <ul class="category-section">
            <li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
                <ul class="second-section">
                    <li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
                    <li><a href="#" alt="">Подкатегория active</a></li>
                </ul>
            </li>
            <li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
                <ul class="second-section">
                    <li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
                    <li><a href="#" alt="">Подкатегория active</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li id ="last">
        <a>Благотворительность</a>
        <ul class="category-section">
            <li><a class="sublink" href="#" alt=""><img class="pointer-img" src="img/1.png" alt="1"/>Подкатегория</a>
                <ul class="second-section">
                    <li><a href="#" alt="">Подкатегория 2-го уровня</a></li>
                    <li><a href="#" alt="">Подкатегория active</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 30.08.2015, 23:37
Интересующийся
Отправить личное сообщение для zzMaddyzz Посмотреть профиль Найти все сообщения от zzMaddyzz
 
Регистрация: 06.03.2015
Сообщений: 15

Да,все дело было в абсолюте,сразу не подумал.рони,спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие меню при клике Alhambra (X)HTML/CSS 4 25.11.2014 20:07
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 17:08
при нажатии на раздел меню поворачивается маркер Сергей545 Элементы интерфейса 5 08.12.2013 22:15
Зависание кнопок меню при быстром переключении (onMouseOver) Kapitan79 Элементы интерфейса 3 06.11.2013 18:18
скрипт работает только на последнем пункте меню walking Элементы интерфейса 0 08.01.2012 14:56