Эффект дергающегося меню. Как отключить? (модуль Ninja Simple Icons)

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем deniro21, 28.03.2010.

  1. deniro21
    Offline

    deniro21 Пользователь

    Регистрация:
    23.11.2009
    Сообщения:
    107
    Симпатии:
    4
    Пол:
    Мужской
    Всем привет. Имеется модуль Ninja Simple Icons v1.6.0a, который выводит меню в виде иконок. ( Я прикрепил его во вложении). По умолчанию, при наведении курсора на эти иконки они немного дергаются, смещаются и т.д. создавая эффект выдвижения (или выделения, в общем я незнаю как это правильно называется). Я захотел убрать этот эффект и полез в CSS модуля. Поскольку я плохо в этом разбираюсь, то работал методом тыка. И обнаружил, что если в строке:
    Код (CODE):
    1. .nsi-container li {clear:left; float:left; margin:0; padding:10px 20px 0 0; text-align:center; cursor:pointer;}

    В параметре padding:10px 20px 0 0 любой из двух последних нулей заменить на любую цифру (например 1), вот пример:
    Код (CODE):
    1. .nsi-container li {clear:left; float:left; margin:0; padding:10px 20px 1 0; text-align:center; cursor:pointer;}
    то иконки перестают дергаться, т.е. эффект отключается и иконки становятся неподвижными, что собсн и требуется. В общем на этом я и остановился, т.к. цель была достигнута. Но оказалось рано радовался, так как впоследствии мне потребовалось настроить расположение иконок меню относительно друг друга. Это расположение при включенном эффекте (дерганьи) регулировалось как раз padding:10px 20px путем замены первого и второго значения px. Когда же эффект отключен (т.е. стоит единичка вместо нуля, как писалось выше), то padding: больше ничего не регулирует, и какое бы значение пикселей я не ставил, ничего не меняется. По всей видимости я изначально неправильно отключил этот эффект, и поэтому прошу вашей помощи. Прикладываю весь код CSS:
    Код (CODE):
    1. /* Ninja Simple Icons (c) Richie Mortimer, www.ninjaforge.com  richie@ninjaforge.com */
    2.  
    3. .nsi-container {overflow:hidden; position:relative; padding:0}
    4. .nsi-container div {float:left; position:relative; left:50%; text-align:left;}
    5. .nsi-container ul {position:relative; padding:0; margin:0; list-style:none;}
    6. .nsi-container li {clear:left; float:left; margin:0; padding:10px 20px 0 0; text-align:center; cursor:pointer;}
    7. .nsi-container span {font-weight:bold;}
    8. .nsi-container img {border:none;}
    9. .nsi-container a:link,
    10. .nsi-container a:hover {height:100%; text-decoration:none;}    
    11.  
    12. /* Horizontal */
    13. .nsi-iconhoriz div{padding:0 15px 0 0; background-position:100% 100% !important;}
    14.     .nsi-iconhoriz ul {float:left; right:50%;}
    15.         .nsi-iconhoriz li {clear:none;}
    16.  
    17. /* Vertical - icons above titles */
    18. .nsi-iconvert a {left:0; bottom:0; width:100%; display:block}
    19.  
    20. /* Vertical - icons to the left of titles */
    21. .nsi-iconvert-l div {padding:10px 0; left:0}
    22.     .nsi-iconvert-l li {text-align:left; width:100%; padding:0 0 10px 0}
    23.         .nsi-iconvert-l img {float:left}
    24.         .nsi-iconvert-l span {padding:0 0 0 10px; float:left}
    25.  
    26. /* Vertical - icons to the right of titles */
    27. .nsi-iconvert-r div {padding:10px 0; left:0; float:right}
    28.     .nsi-iconvert-r li {text-align:right; width:100%; padding:0 0 10px 0}
    29.         .nsi-iconvert-r img {float:right}
    30.         .nsi-iconvert-r span {padding:0 10px 0 0; float:right}


    P.S. Возможно кончено это "дерганье" отключается именно так, но тогда в какой строке можно отрегулировать расстояние между иконками, как сверху/снизу, так и справа/слева? Заранее благодарен.
     

    Вложения:

  2.  
  3. deniro21
    Offline

    deniro21 Пользователь

    Регистрация:
    23.11.2009
    Сообщения:
    107
    Симпатии:
    4
    Пол:
    Мужской
    Проблему решил сам. Оказалось все просто. В строке .nsi-container li просто стер целиком отрывок "padding:10px 20px 0 0". После этого эффект дерганья выключился. Затем я прописал margin-left:, margin-top:, и так далее в эту же строку и все заработало. Если бы я вписывал это, не убирая padding, то результата бы не было.
     
  4. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 310
    Симпатии:
    375
    Пол:
    Мужской
    Может пора:
    1. Поучить CSS
    2. Начать пользоваться Firebug и т.п.
    а?
    Сегодня дерганье убрать, завтра подвинуть, послезавтра еще чего... так и будешь всё методом тыка?

    Код (CODE):
    1. padding:10px 20px 1 0;
    Так нельзя делать! Должны быть единицы измерения, только 0 может быть просто нулем.
     
  5. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 310
    Симпатии:
    375
    Пол:
    Мужской
    Даже методом тыка простым перебором всех комбинаций проблему действительно легко решить.
    Хмм... а если б было 1000 строк в CSS? %)
     
  6. deniro21
    Offline

    deniro21 Пользователь

    Регистрация:
    23.11.2009
    Сообщения:
    107
    Симпатии:
    4
    Пол:
    Мужской
    Разумеется подучу. Просто я знакомлюсь со всем этим не так давно, и поэтому пользуюсь форумом. Если мои "глупые" вопросы смешат матерых гуру, то ответить мне на это нечего. А за советы спасибо. Учту.:)
     
  7. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 310
    Симпатии:
    375
    Пол:
    Мужской
    Смешат не вопросы, а подход к решению задач
    Да и не смешат. Так, улыбнуло. :)
     
  8. deniro21
    Offline

    deniro21 Пользователь

    Регистрация:
    23.11.2009
    Сообщения:
    107
    Симпатии:
    4
    Пол:
    Мужской
    Не стал пока создавать новую тему, т.к. вопрос по этому же модулю. Сейчас он поддерживает 20 иконок, но мне требуется сделать больше. Как добавить поддержку большего количества иконок в этом модуле? На соседнем форуме поехидничали мол "Все просто", но так никто и непомог. Видимо не так уж просто. Помогите...
     

Поделиться этой страницей

Загрузка...