Как сделать меню Superfish по горизонтали шириной 100%? - PullRequest
Новая
       5

Как сделать меню Superfish по горизонтали шириной 100%?

3 голосов
/ 02 июня 2011

Я использую Superfish 1.4.8 в качестве горизонтального меню

Меню внутри div с фиксированной шириной 900px

Мне бы хотелось, чтобы ширина Superfish составляла 100% (900 пикселей), и чтобы ширина каждого li автоматически изменялась в зависимости от количества элементов. Количество пунктов в этом меню будет меняться со временем.

По сути, я хочу, чтобы ТАБЛИЦА ширины 100% и поведение автоматической настройки размеров ТД

были такими же.

Я нашел следующие CSS-дополнения из старого поста 2009 года о том, как это сделать: 

.sf-menu { width: 100%; float: left; display: table;}
.sf-menu ul { display: table-row; }
.sf-menu ul li { display: table-cell; min-width: 20%; }

Похоже, это должно работать, но это не так, меню все равно выглядит точно так же

Вот это на jsFiddle: http://jsfiddle.net/xRcJL/

Кто-нибудь смог сделать Superfish в масштабе до 100% контейнера?

Ответы [ 4 ]

1 голос
/ 14 сентября 2012

Я не уверен, что вы используете DNN, но у меня появилась идея вытянуть контейнер моей навигации для суперфиш из их темной кожи.Это то, что я сделал 

#strech_nav
{
    width:100%;
    height:31px;
    background:url(images/yournavbg.jpg) repeat-x;
    z-index: 9;
}

#strech_nav #nav
{
    width:900px;
    height:31px;
    background:url(images/yournavbg.jpg) repeat-x;
    font-size:medium;
    margin:auto;
    color:White;
    position: relative; 
    z-index: 9;

}

, затем в файле ascx 

<div id="strech_nav"><div id="nav"><dnn:MENU ID="MENU1" MenuStyle="Superfish" runat="server"/></div></div>

Надеюсь, это поможет :) Обратите внимание, что это то, что вы хотите использовать, если вы хотите, чтобы ваш навигационный контейнерохватывают ширину страницы.Если вы хотите, чтобы ваша навигация охватывала определенную ширину пикселя, удалите содержимое #stretch_nav и измените #strech_nav #nav

1 голос
/ 10 января 2012

Я не уверен, что это то, что вы ищете, но после того, как я прочитал этот пост и провел несколько экспериментов, я пришел к этой точке:

http://jsfiddle.net/EFnTa/

Надеюсьпомогает.

1 голос
/ 02 июня 2011

UPDATE:

Прочтите эту статью для " jQuery Плагин для полноширинной навигации ": http://exscale.se/archives/2007/11/09/jquery-full-width-navigation-plugin/

Это потому, что ваши .sf-menu li элементы списка перемещены влево.

Проверьте отредактированный JSfiddle с обновленным стилем для: 

.sf-menu li {
    /*float: left;*/
    position: relative;
}

Обновлен JSfiddle ссылка: http://jsfiddle.net/xRcJL/1/

Если вы хотите центрировать свой NAV, вы можете сделать что-то вроде: 

}
.sf-menu{
    text-align:center;
    background-color:#ccc;
}
.sf-menu li {
    position: relative;
    display:inline-block;
    margin:0 -2px;
}

См. Обновленный JSfiddle v2 : http://jsfiddle.net/xRcJL/3/

* Работает в Chrome, Firefox и IE8. Не проверялось в IE7 и 6.

0 голосов
/ 02 июня 2011

  1. любой плавающий элемент будет игнорировать свойство display, поэтому в вашем коде .sfmenu не отображается в виде таблицы (в скрипте значение float устанавливается намного позже в коде)

  2. .sfmenu является родительским ul, поэтому он должен быть display: table-row; с его непосредственными дочерними элементами li элементы, являющиеся display: table-cell; - .sfmenu ul li, выбирают выпадающие спискине верхний горизонтальный уровень

  3. #container div, вероятно, должен быть display: table;

См. этопример

Поскольку ваш код выше стоит, только эти выпадающие списки получают эти свойства, поэтому первый уровень не растягивается, хотя я не думаю, что списки дочерних уровней будут нуждаться в них, этодолжно быть просто первый уровень.Я не совсем уверен, что позиционирование дочернего меню будет работать должным образом, даже если вышеупомянутое исправлено, поскольку «реальные» ячейки таблицы не принимают относительное позиционирование, для тестирования потребуются некоторые уровни отбрасывания.

...