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

Discussion in 'CSS, HTML, Web 2.0, верстка по web-стандартам' started by deniro21, Mar 28, 2010.

  1. deniro21
    Offline

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

    Joined:
    Nov 23, 2009
    Messages:
    107
    Likes Received:
    4
    Gender:
    Male
    Всем привет. Имеется модуль 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. Возможно кончено это "дерганье" отключается именно так, но тогда в какой строке можно отрегулировать расстояние между иконками, как сверху/снизу, так и справа/слева? Заранее благодарен.
     

    Attached Files:

  2.  
  3. deniro21
    Offline

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

    Joined:
    Nov 23, 2009
    Messages:
    107
    Likes Received:
    4
    Gender:
    Male
    Проблему решил сам. Оказалось все просто. В строке .nsi-container li просто стер целиком отрывок "padding:10px 20px 0 0". После этого эффект дерганья выключился. Затем я прописал margin-left:, margin-top:, и так далее в эту же строку и все заработало. Если бы я вписывал это, не убирая padding, то результата бы не было.
     
  4. OlegM
    Offline

    OlegM Russian Joomla! Team Staff Member

    Joined:
    Apr 12, 2007
    Messages:
    4,310
    Likes Received:
    375
    Gender:
    Male
    Может пора:
    1. Поучить CSS
    2. Начать пользоваться Firebug и т.п.
    а?
    Сегодня дерганье убрать, завтра подвинуть, послезавтра еще чего... так и будешь всё методом тыка?

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

    OlegM Russian Joomla! Team Staff Member

    Joined:
    Apr 12, 2007
    Messages:
    4,310
    Likes Received:
    375
    Gender:
    Male
    Даже методом тыка простым перебором всех комбинаций проблему действительно легко решить.
    Хмм... а если б было 1000 строк в CSS? %)
     
  6. deniro21
    Offline

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

    Joined:
    Nov 23, 2009
    Messages:
    107
    Likes Received:
    4
    Gender:
    Male
    Разумеется подучу. Просто я знакомлюсь со всем этим не так давно, и поэтому пользуюсь форумом. Если мои "глупые" вопросы смешат матерых гуру, то ответить мне на это нечего. А за советы спасибо. Учту.:)
     
  7. OlegM
    Offline

    OlegM Russian Joomla! Team Staff Member

    Joined:
    Apr 12, 2007
    Messages:
    4,310
    Likes Received:
    375
    Gender:
    Male
    Смешат не вопросы, а подход к решению задач
    Да и не смешат. Так, улыбнуло. :)
     
  8. deniro21
    Offline

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

    Joined:
    Nov 23, 2009
    Messages:
    107
    Likes Received:
    4
    Gender:
    Male
    Не стал пока создавать новую тему, т.к. вопрос по этому же модулю. Сейчас он поддерживает 20 иконок, но мне требуется сделать больше. Как добавить поддержку большего количества иконок в этом модуле? На соседнем форуме поехидничали мол "Все просто", но так никто и непомог. Видимо не так уж просто. Помогите...
     

Share This Page

Loading...