2013-06-28 6 views
0

Я создал сайт с использованием zurb-фондов. Моя проблема в этом. Когда я приношу размер браузера, а меню навигации меняется от категорий к слову «Меню», я могу щелкнуть его и выбрать, к какой категории я бы хотел перейти. Однако, когда я выбираю категорию, у которой есть четыре или более варианта, четвертый и все остальные ниже, которые, похоже, обрезаются. Я попытался изменить z-индекс некоторых элементов, чтобы компенсировать это, и несколько других вещей, но мне не удавалось решить эту проблему. Я смотрел здесь для подобных вопросов, но не повезло найти эту же проблему. Может ли кто-нибудь помочь?Zurb foundation Меню обрезание

+0

От чего он отрезан? Экран или другие элементы? Лучше увидеть код и скриншоты ... –

ответ

0

У меня такая же проблема. По какой-то причине, когда я нажимаю подменю, когда навигация сокращается, он отключает его.

enter image description here

Я попытался, г-индекс, обивка, даже цвет фона каждого Lī а, но я считаю, что высота составлена ​​из JS.

Временное решение - добавить еще одно Div в меню.

<li><a href="#">&nbsp;</a></li> 

Это отрезано, но это не имеет значения, потому что информации там нет. Надеюсь, это поможет, пока не будет создано лучшее решение!

1

Я столкнулся с подобной проблемой. Странно. Я попробовал работу над добавлением дополнительного элемента, предложенного Dan, но пространство (хотя и отсечка) было слишком большим для меня. В моем случае это был список <ul> со ссылками. Что, кажется, работает для меня устанавливает нижнюю границу на последнем элементе, как так:

<ul class='dropdown'> 
    <li><a href='#link'>Item 1</a></li> 
    <li><a href='#link'>Item 2</a></li> 
    ... 
    <li><a href='#link' style='margin-bottom:1em;'>Item n</a></li> 
</ul> 

В качестве альтернативы, чтобы держать уборщика разметки и сохранить стиль из этого, вы можете иметь CSS:

.problem-dropdown li:last-child 
{ 
    margin-bottom: 1em; 
} 

Затем добавьте класс problem-dropdown в раскрывающееся меню, которое даст вам проблемы.

Если у вас есть время, проблема вызвана кодом, который устанавливает высоту элемента nav.top-bar.expanded. Установка margin-bottom, как указано выше, позволяет установить правильную высоту для меню. В моем случае увеличение вручную это решает мою проблему, поэтому я предполагаю, что вы могли бы написать слушателя JS для события, а затем исправить ситуацию после него. Тем не менее, можно было бы просто исправить код, который делает это в первую очередь.