Показать меню прокрутки, если есть больше, чем X строки

Question

Я сделал это jsfiddle: http://jsfiddle.net/alonshmiel/2PeEK/

это показать меню, когда пользователь нажимает на изображение, и закройте меню, если пользователь нажимает ее снова.

Я пытаюсь сделать следующую вещь:.

если номер <li> меньше 7, показывает только количество строк (для 4 <li> показать меню из 4 строк на 2, показывают 2). но если есть 7 <li> или более, покажите свиток.

любая помощь оценена!

Answer 1

Если вы желаете, чтобы динамически вычислять его без установки жестких значений в CSS

var m = $('.menu'), //cache for performance 
mh = m.height(), //get actual height 
lih = mh/$('.menu li').length, //calculate the height of one of the LI's 
max = 7, //what's the max amount of rows we want to show 
mth = lih *max; //the height the container should be set to 

Тогда просто сделать условный

if(mh > (lih * max)){ //if the menu height is greater than 7 li's 
    m.css({'maxHeight' : mth, 'overflow-y': 'scroll'}); 
}else{ //it's not greater 
    m.css({'maxHeight': 'none', 'overflow-y' : 'auto'}); 
} 

Here's the Fiddle

Answer 2

Добавление

max-height: 240px; 
    overflow-y: auto; 

к вашему .menu CSS получает нужный результат без JS, если это достаточно хорошо? Проще и быстрее.

Answer 3

я бы делать на основе эм, а не фиксированной высоты пикселя, поэтому высота зависит от размера текста списка:

.menu { 
    max-height: 15.75em; 
    overflow-y: auto; 
    font-size:1em; 
    line-height:1.25em; 
} 

http://jsfiddle.net/3DWKP/1/

Вы .5em отступы сверху и снизу на теги, так что строка 1.25em + 1em отступов = 2.25em для элемента списка. для 7 элементов списка как максимальная высота, это будет 7 * 2,25 = 15,75 em для максимальной высоты.

Answer 4

Использование простых математических уравнений необходимо остановить рост в (7 * 36) где 7 равно числу li вы хотите, чтобы показать и 36, равной высоте индивидуального li так просто добавить к вашему .menu классу следующих правил

.menu{ 
    max-height: 240px; 
    overflow-y: auto; 
    //the rest of yout css rules 
}