Блог

У меня есть очень обычное меню наведения css, с БОЛЬШИМ количеством ссылок href в нем. Проблема в том, что при наведении курсора на каждую вложенную ячейку меню отображается небольшое «окно» с белым фоном, в котором будут содержаться элементы наведенного отца. Вот пример, при наведении курсора FATHER1 (меню полностью управляется CSS):

 _____________________________
FATHER1 | FATHER 2 | FATHER 3
________|__________|_________
.--^-------------------------------
|Title Of Cont1    Title Of Cont2  |
| Lia element        Lia element   |
| Lia element        Lia element   |
| Lia element        Lia element   |    ( "Lia element" stands for <li><a> )
|                                  |
|Title of Cont3    Title of Cont4  |
| Lia element        Lia element   |
| Lia element        Lia element   |
'----------------------------------'
  

Вот в чем проблема: таким образом, когда ширина элемента <li><a> превышает определенное количество пикселей (в моем случае это число равно 156px), макет прерывается из-за отсутствия параллелизма по высоте.

Решение простое, с помощью CSS для элементов <li><a>:

 display: block; width: 156px; overflow: hidden; white-space:nowrap;
  

Таким образом, весь переполненный текст от 156 пикселей до бесконечности остается скрытым.

Теперь мне нужен второй шаг к моему проекту: когда пользователь проводит мышью по этим «урезанным» элементам <li><a> , я хотел бы показать ему остальной текст «карусельным» способом, буква за буквой. Таким образом, ширина остается 156 пикселей в каждый момент времени, но пользователь действительно может видеть, какой текст скрыт.

Есть какой-нибудь необычный способ сделать это? Я никогда в жизни не видел такого фрагмента кода, и в данном случае я застрял на ключевых словах Google

вы могли бы попробовать что-то в этом роде:

 .menu *{
    -webkit-transition  : all 1s ease-in-out;
    -moz-transition     : all 1s ease-in-out;
    -o-transition       : all 1s ease-in-out;
    -ms-transition      : all 1s ease-in-out;
}
.item{
    width               : 100px;
    line-height         : 20px;
    height              : 20px;
    border              : 1px solid red;
    display             : block;
    overflow            : hidden;
    cursor              : pointer;
}
.item a{
    position            : relative;
    display             : block;
    text-decoration     : none;
    height              : 20px;
    white-space         : nowrap;
}
.item:hover a{
    -webkit-transform   : translate(-100%, 0px);
    -moz-transform      : translate(-100%, 0px);
    -o-transform        : translate(-100%, 0px);
    -ms-transform       : translate(-100%, 0px);
}
</style>
<div class="menu">
    <ul>
        <li class="item"><a href="#">item 1</a></li>
        <li class="item"><a href="#">somewhat longer item 2</a></li>
        <li class="item"><a href="#">item 3</a></li>
        <li class="item"><a href="#">item 4</a></li>
        <li class="item"><a href="#">item 5</a></li>
    </ul>
</div>
  

вы можете сделать аналогичную вещь, используя javascript, конечно

После тщательного поиска в Интернете и документации jQuery я нашел решение:

CSS (исправьте ширину и высоту элементов в соответствии с вашими потребностями)

 #nav ul.sub_cat li { display: block; width: 156px; overflow: hidden; height: 13px; }
#nav ul.sub_cat li a { display: block; position: relative; height: 13px; white-space: nowrap; }
  

Фрагмент jQuery

• Я фильтрую элементы li, которым требуется функция автоматической прокрутки, с помощью rel =»filter»
• Я использую «22» в качестве разбивки длины текста li для запуска анимации
• Я использую коэффициент 8 пикселей для каждого символа, превышающего разбивку по 22 символам

Очевидно, измените эти значения в соответствии с вашими потребностями

 $('ul li[rel="filter"]').hover (
    function() {
        var lihref = $(this).find('a');
        var lihreftextlengthbreakdown = 22;
        var pixelfactor = 8;

        if ( $(lihref).text().length > lihreftextlengthbreakdown ) {
            var slidelen = ( ( $(lihref).text().length ) - lihreftextlengthbreakdown ) * pixelfactor;
            $(this).animate ( { scrollLeft: slidelen }, 5000 );
        }
    },
    function() {
        $(this).animate ({ scrollLeft: 0 });
    }
);