Подменю превышает поле страницы

[Другое решение]: Используя Jquery, можно узнать расстояние между меню и окном, поэтому для каждого меню необходимо проверить, меньше ли его расстояние, чем 0, когда мышь наводит на него курсор. Если оно меньше 0, используйте css для изменения положения.

Jquery:

            var distance = $(window).width() - ($('#your-element').offset().left + $('#your-element').width());
            if(distance<0){
                /* manage if the menu that exceeds the window*/
            }

Я пытаюсь закодировать подменю с помощью HTML и CSS.
До сих пор все работает нормально, но если в меню слишком много уровней, оно превышает запас.

Есть ли способ исправить это, переставив уровень, когда он превысит маржу?

Вот код: http://jsfiddle.net/mag2v/19/

HTML

<div class="menu">
    <ul>
        <li><a href="javascript:void(0)">HOME</a>
        </li>
        <li><a href="javascript:void(0)">PRODUCTS</a>

            <ul class="sub-menu">
                <li><a href="javascript:void(0)">E-COMMERCE</a>
                </li>
                <li><a href="javascript:void(0)">INTRANET</a>
                </li>
                <li><a href="javascript:void(0)">MARKETING</a>
                </li>
            </ul>
        </li>
        <li><a href="javascript:void(0)">HELP</a>

            <ul class="sub-menu">
                <li><a href="javascript:void(0)">F.A.Q</a>
                </li>
                <li><a href="javascript:void(0)">CHAT ONLINE</a>
                </li>
            </ul>
        </li>
        <li><a href="javascript:void(0)">BLOG</a>
        </li>
        <li><a href="javascript:void(0)">ABOUT US</a>

            <ul class="sub-menu">
                <li><a href="javascript:void(0)">OUR TEAM ></a>

                    <ul class="sub-sub-menu">
                        <li><a href="javascript:void(0)">DEVELOPERS</a>
                        </li>
                        <li><a href="javascript:void(0)">DESIGNERS</a>
                        </li>
                        <li><a href="javascript:void(0)">COMMERCIAL</a>
                        </li>
                    </ul>
                </li>
                <li><a href="javascript:void(0)">WHERE ARE WE? ></a>

                    <ul class="sub-sub-menu">
                        <li><a href="javascript:void(0)">BRAZIL ></a>

                            <ul class="sub-sub-menu">
                                <li><a href="javascript:void(0)">SÃO PAULO</a>
                                </li>
                                <li><a href="javascript:void(0)">RIO DE JANEIRO</a>
                                </li>
                                <li><a href="javascript:void(0)">PORTO ALEGRE ></a>

                                    <ul class="sub-sub-menu">
                                        <li><a href="javascript:void(0)">TESTE</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="javascript:void(0)">USA</a>
                        </li>
                        <li><a href="javascript:void(0)">GERMANY</a>
                        </li>
                        <li><a href="javascript:void(0)">CHINA</a>
                        </li>
                        <li><a href="javascript:void(0)">RUSSIA</a>
                        </li>
                    </ul>
                </li>
                <li><a href="javascript:void(0)">MEDIA</a>
                </li>
                <li><a href="javascript:void(0)">JOIN US</a>
                </li>
            </ul>
        </li>
        <li><a href="javascript:void(0)">CONTACT US</a>
        </li>
    </ul>
</div>

CSS

#header .container {
    padding:30px 0 50px 0;
}
#header .container .logotipo {
    float:left;
    height:22px;
    width:97px;
}
#header .container .menu {
    float:left;
    margin-left:20px;
    margin-top:-30px;
}
.menu ul li {
    float:left;
    list-style:none;
    margin-left:40px;
    position:relative;
}
.menu ul li:hover > ul {
    display:block;
}
/* 1 */
 .menu ul li:nth-child(1) a {
    border-top:3px solid #7F9614;
    color:#7F9614;
    display:block;
    padding:29px 0 9px 0;
}
.menu ul li a {
    color:#000;
    cursor:pointer;
    display:inline-block;
    font-family:Gisha;
    font-size:16px;
    padding:32px 0 9px 0;
    text-decoration:none;
}
.menu ul li:hover a {
    border-top:3px solid #7F9614;
    color:#7F9614;
    display:block;
    padding:29px 0 9px 0;
}
/* 2 */
 .menu ul li > ul {
    border-top:3px solid #7F9614;
    display:none;
    position:absolute;
    width:240px;
}
.menu ul li > ul.sub-menu li {
    float:left;
    margin-left:-40px;
    width:100%;
}
.menu ul li > ul.sub-menu li a {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background:rgba(255, 255, 255, 0.8);
    border-bottom:1px dotted #7F9614;
    border-top:none;
    color:#7F9614;
    font-size:14px;
    padding:10px 0px 10px 20px;
    word-break:break-all;
}
.menu ul li > ul.sub-menu li a:hover {
    background:#7F9614;
    color:#fff;
}
/* 3... */
 .menu .sub-sub-menu {
    position:absolute;
    left:100%;
    top:0;
}
.menu .sub-sub-menu {
    border-left:1px dotted #7F9614;
    border-top:none;
    word-break:break-all;
}
Источник

3 ответа

Решение

примечание: подобное меню - плохая идея, и проблема, с которой вы столкнулись, является хорошим примером того, почему это так. Посмотрите вокруг, есть веские причины, по которым большинство сайтов этого не делают, и даже больше причин не делать этого без JavaScript.

При этом можно заставить его работать только с HTML А ТАКЖЕ CSS,

Вы хотели бы использовать медиа-запросы, чтобы изменить CSS в зависимости от размера окна; лайк:

@media (max-width: 800px) {/*just change 800 to whatever you need*/
    /*css here*/
}

Я сделал рабочий пример в этой скрипке...

Это не без проблем / ошибок, но это просто для иллюстрации концепции. Я добавил пустой li с классом trigger который показывает, когда меню нужно свернуть.

Я также внес несколько изменений в ваш существующий CSS и добавил комментарии, чтобы вы могли видеть, что изменилось.

Этот тип проблемы обычно решается с помощью главного меню, имеющего только один раскрывающийся уровень, и страницы внутри него, имеющие дополнительные ссылки, будут отображать эти дополнительные ссылки во вторичной навигации на этих страницах вместо того, чтобы пытаться поместить 10 фунты "вещи" в 5 фунт сумка.

Вот так они сделали вторичную навигацию из 3-х блоков под вводным содержанием страницы (для вас, для бизнеса, для разработчиков). Большинство сайтов решают эту проблему аналогичным образом.

Источник

Вы должны помнить ниже шаги.

  1. Всегда желательно сбрасывать теги html, чтобы уменьшить несоответствия в браузере по поводу полей, отступов и т. Д.

Два самых известных сброса CSS:

http://necolas.github.io/normalize.css/ - Я предпочитаю это.

http://meyerweb.com/eric/tools/css/reset/

  1. UL по умолчанию имеет стиль списка, следовательно, перезаписать его. список-стиль: нет;

Ссылка на скрипку JS http://jsfiddle.net/mag2v/22/ и теперь вот модифицированный css:

#header .container {
padding:30px 0 50px 0;
}
#header .container .logotipo {
float:left;
height:22px;
width:97px;
}
#header .container .menu {
float:left;
 margin-left:20px;
margin-top:-30px;
}
.menu ul li {
float:left;
list-style:none;
margin-left:40px;
position:relative;
}
.menu ul li:hover > ul {
display:block;
list-style: none;
padding:0;
}
/* 1 */
.menu ul li:nth-child(1) a {
border-top:3px solid #7F9614;
color:#7F9614;
display:block;
padding:29px 0 9px 0;
}
.menu ul li a {
color:#000;
cursor:pointer;
display:inline-block;
font-family:Gisha;
font-size:16px;
padding:32px 0 9px 0;
text-decoration:none;
}
.menu ul li:hover a {
border-top:3px solid #7F9614;
color:#7F9614;
display:block;
padding:29px 0 9px 0;
}
/* 2 */
.menu ul li > ul {
border-top:3px solid #7F9614;
display:none;
position:absolute;
width:240px;
}
.menu ul li > ul.sub-menu li {
float:left;
margin-left:0;
width:100%;
}
.menu ul li > ul.sub-menu li a {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
background:rgba(255, 255, 255, 0.8);
border-bottom:1px dotted #7F9614;
border-top:none;
color:#7F9614;
font-size:14px;
padding:10px 0px 10px 20px;
word-break:break-all;
}
.menu ul li > ul.sub-menu li a:hover {
background:#7F9614;
color:#fff;
}
/* 3... */
.menu .sub-sub-menu {
position:absolute;
left:100%;
top:0;
}
.menu .sub-sub-menu {
border-left:1px dotted #7F9614;
border-top:none;
word-break:break-all;
}
Источник

Решено Демо

.menu .sub-sub-menu1{position:absolute;left:-100%;top:0;}// does the trick alter
  1. -100% для отображения поля на боковой странице меню слева от выпадающего меню level2
  2. Изменить содержание HTML .sub-sub-menu в .sub-sub-menu1 или имя, которое вам нравится, используйте отдельное подменю для подуровней, чтобы они отображались слева от уровня 2, то есть уровня 3 слева от уровня 2 и уровня 4 слева от сына уровня 3, даже с этим следующим уровнем может быть очень трудно приспособиться к текущему коду

Предложение В случае, если у вас есть такие глубокие / многоуровневые выпадающие (Демо)

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

Ваши отступы и поля, и все это делает ваше меню более толстым (занимают пространство 240 x 37 пикселей), вы должны попытаться ограничить сумму длины всех видимых выпадающих меню до 1288.472 пикселей, что соответствует размеру меню, отображаемого в моем браузере. по сути, я пытаюсь сказать, что дать отступ и отступ в раскрывающемся меню (li и теги) таким образом, чтобы при наиболее глубоком раскрытии раскрывалась общая длина, которая должна быть меньше длины используемого вами размера сетки.

Источник
Другие вопросы по тегам