2

Meu submenu category, transborda a página quando redimensionada. Como eu faço para o submenu ir para esquerda quando isso acontence?

O problema enter image description here

Assim que eu quero que acontença, o submenu foi jogado para a esquerda pois estava transbordando a página enter image description here

#primary_nav_wrap
{
	margin-top:15px
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0;
  border: 1px solid black;
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block
}
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul>
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li class="dir"><a href="#">Sub Menu 1</a></li>
      <li class="dir"><a href="#">Sub Menu 2</a>
        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="#">Category 5</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Menu 6</a></li>
  <li><a href="#">Menu 7</a></li>
  
  <li><a href="#">Menu 8</a>
    <ul>
      <li class="dir"><a href="#">Sub Menu 1</a></li>
      <li class="dir"><a href="#">Sub Menu 2</a>
        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="#">Category 5</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  
</ul>
</nav>

Eu procurei pela função getBoundingClientRect() do js para pegar as coordenadas mas não sei exatamente como implementar isso, também tentei esse plugin https://github.com/gijsroge/offscreen.js/ mas não deu certo também.

1 Resposta 1

4

Bastá colocar uma regra @media e jogar o sub-menu para dentro quando a tela for mais estreita.
OBS: Da mesma forma que vc fez essa primeira regra vc tem que ir fazendo outras conforme a tela vai ficando mais e mais estreita...

Veja como fica na imagem: inserir a descrição da imagem aqui

Segue o código

#primary_nav_wrap
{
    margin-top:15px
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul a
{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0;
  border: 1px solid black;
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#ddd
}

#primary_nav_wrap ul li:hover
{
    background:#f6f6f6
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}
@media screen and (max-width:1022px) {
    #primary_nav_wrap ul ul ul {
        left: -101%;
    }
}
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul>
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li class="dir"><a href="#">Sub Menu 1</a></li>
      <li class="dir"><a href="#">Sub Menu 2</a>
        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="#">Category 5</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Menu 6</a></li>
  <li><a href="#">Menu 7</a></li>

  <li><a href="#">Menu 8</a>
    <ul>
      <li class="dir"><a href="#">Sub Menu 1</a></li>
      <li class="dir"><a href="#">Sub Menu 2</a>
        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="#">Category 5</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>

</ul>
</nav>

7
  • Cara só tem um problema quando redimensionada a tela todos os submenus são jogados para a esquerda. Olha o menu 3 sub menu 2. Tem como fazer que só seja jogado para a esquerda aquele submenu que transbordou? Commented 26/11/2018 às 17:03
  • @MarceloT.Cortes não tinha reparado que tinha outro sub-menu rss. Bom nesse caso minha dica e vc criar uma classe e colocar essa classe só nos sub-menu que vc queira que fique para dentro da página. nesse casso um Ex. seria @media screen and (max-width:1022px) { #primary_nav_wrap ul ul ul.interno { left: -101% }} Dessa forma toda UL com a classe .interno vai fica para dentro quando a tela for menor que 1022px. Se o UL não tiver a classe .interno ela continua como antes. Qq coisa fala ai
    – hugocsl
    Commented 26/11/2018 às 17:09
  • O problema é que os menus aqui na empresa são gerados dinamicamente com php pastebin.com/5nMYqgpS olha na linha 42 no pastbin. Eu coloquei esse menu genérico na minha pergunta achando que a solução se aplicaria no menu da minha empresa e deu certo porém com esse problema. Então não adianta eu colocar uma classe pois vai aplicar para todos os uls gerados. Eu fiquei por muito tempo tentando uma solução com js usando Element.getBoundingClientRect() pegando as coordenadas da ul dos submenus mas não obtive sucesso kk Commented 26/11/2018 às 17:36
  • Acho que uma solução com javascript seria mais efetiva e se aplicaria em todos os casos, através das coordenados do ul. Se o ul que transbordar a página jogar este para a esquerda e manter os outros normais. Commented 26/11/2018 às 17:39
  • @MarceloT.Cortes com CSS vc não vai conseguir essa dinâmica totalmente automatizada, mas o que vc pode fazer é usar a pseudo classe :nth-child() para definir pelo CSS individualmente como vai se comportar cada parte do menu entende. Ainda não é uma opção 100%, mas é uma forma de definir pelo CSS como fica cada filho do menu. Se vc quiser, pode deixar a pergunta ainda desmarcada como Resposta Aceita, não tem problema não, tá de boa ;)
    – hugocsl
    Commented 26/11/2018 às 17:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .