Всем привет. Имеется модуль Ninja Simple Icons v1.6.0a, который выводит меню в виде иконок. ( Я прикрепил его во вложении). По умолчанию, при наведении курсора на эти иконки они немного дергаются, смещаются и т.д. создавая эффект выдвижения (или выделения, в общем я незнаю как это правильно называется). Я захотел убрать этот эффект и полез в CSS модуля. Поскольку я плохо в этом разбираюсь, то работал методом тыка. И обнаружил, что если в строке:
.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), вот пример:
.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:
/* Ninja Simple Icons (c) Richie Mortimer, www.ninjaforge.com richie@ninjaforge.com */
.nsi-container {overflow:hidden; position:relative; padding:0}
.nsi-container div {float:left; position:relative; left:50%; text-align:left;}
.nsi-container ul {position:relative; padding:0; margin:0; list-style:none;}
.nsi-container li {clear:left; float:left; margin:0; padding:10px 20px 0 0; text-align:center; cursor:pointer;}
.nsi-container span {font-weight:bold;}
.nsi-container img {border:none;}
.nsi-container a:link,
.nsi-container a:hover {height:100%; text-decoration:none;}
/* Horizontal */
.nsi-iconhoriz div{padding:0 15px 0 0; background-position:100% 100% !important;}
.nsi-iconhoriz ul {float:left; right:50%;}
.nsi-iconhoriz li {clear:none;}
/* Vertical - icons above titles */
.nsi-iconvert a {left:0; bottom:0; width:100%; display:block}
/* Vertical - icons to the left of titles */
.nsi-iconvert-l div {padding:10px 0; left:0}
.nsi-iconvert-l li {text-align:left; width:100%; padding:0 0 10px 0}
.nsi-iconvert-l img {float:left}
.nsi-iconvert-l span {padding:0 0 0 10px; float:left}
/* Vertical - icons to the right of titles */
.nsi-iconvert-r div {padding:10px 0; left:0; float:right}
.nsi-iconvert-r li {text-align:right; width:100%; padding:0 0 10px 0}
.nsi-iconvert-r img {float:right}
.nsi-iconvert-r span {padding:0 10px 0 0; float:right}
P.S. Возможно кончено это "дерганье" отключается именно так, но тогда в какой строке можно отрегулировать расстояние между иконками, как сверху/снизу, так и справа/слева? Заранее благодарен.
[вложение удалено Администратором]
29.12.2021, 23:15:38