Float half of the Dropdown Menu list to another position

Asked

Viewed 1,217 times

5

How to do for in the sixth cell of Dropdown menu float left as in the image example below:

inserir a descrição da imagem aqui I tried unsuccessfully something like:

<style>
    #main-navigation-2 .dropdown-menu :nth-child(6),
    #main-navigation-2 .dropdown-menu :nth-child(7),
    #main-navigation-2 .dropdown-menu :nth-child(8),
    #main-navigation-2 .dropdown-menu :nth-child(9),
    #main-navigation-2 .dropdown-menu :nth-child(10)
    {
    right:0;
    }
</style>

Menu Code

<div id="main-navigation-2" class="hidden-xs col-sm-12 col-md-12">
   <!-- <div class="container"> -->
   <nav class="navbar-main-navigation mb-xs-10" role="navigation">
      <ul class="nav navbar-nav">
         <li class="dropdown"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
            <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Banheiro</p></a>  
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
            <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Cozinha</p></a>  
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
            <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Infantil</p></a>  
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
            <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Jarras & Copos</p></a>  
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
            <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Limpeza</p></a>  
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
            <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Mesa</p></a>  
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
            <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Microondas</p></a>  
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
            <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Organização</p></a>  
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
            <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Potes</p></a>  
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
            <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Tábuas</p></a>  

            <ul class="dropdown-menu menu-right">
               <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
               <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
               <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
               <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
               <br><span class="pull-right">+ PRODUTOS</span>
            </ul>
         </li>
      </ul>
   </nav><!-- .navbar-collapse -->
   <!-- </div> --> <!-- #container-->
</div><!-- #main-navigation -->
html css bootstrap dropdown
  • 1

    Can I give you a tip to make your life easier? If it’s no problem, put the Green Bar with 100% Width and align the items in the Center. So it will give you less headache to leave everything Responsive without JS etc...

  • Thanks for the tip, but I plan to go with him to the screen-tablet only !

  • 1

    Did you notice that you wrote "rihgt:0;" wrong? It should be RIGHT, in your code is spelled wrong! []s

  • 1

    Put the full code from the menu so we can analyze.

  • Hugocsl I saw thanks but not that same funf !

  • dvd I updated the code I think you can now understand

Show 1 more comment

3 answers

5


I imagine that each <li> be a menu button, where is also included a <ul> which is the menu dropdown of the respective button.

In this, the correct menu selector, from 6 to 10, would be:

#main-navigation-2 nav ul li.dropdown:nth-child(6) ul,
#main-navigation-2 nav ul li.dropdown:nth-child(7) ul,
#main-navigation-2 nav ul li.dropdown:nth-child(8) ul,
#main-navigation-2 nav ul li.dropdown:nth-child(9) ul,
#main-navigation-2 nav ul li.dropdown:nth-child(10) ul
{
   right: 0;
   left: auto;
}

Or simply create a class and add to the elements:

ul.menu_direita{
   right: 0;
   left: auto;
}

Test (run in full screen):

ul.menu_direita{
   right: 0;
   left: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="main-navigation-2" class="hidden-xs col-sm-12 col-md-12">
   <!--<div class="container">-->
      <nav class="navbar-main-navigation mb-xs-10" role="navigation">
         <ul class="nav navbar-nav">
            <li class="dropdown"> 
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
               <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Banheiro</p></a>  
               <ul class="dropdown-menu menu-right">
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <br><span class="pull-right">+ PRODUTOS</span>
               </ul>
            </li>
            <li class="dropdown"> 
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
               <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Cozinha</p></a>  
               <ul class="dropdown-menu menu-right">
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <br><span class="pull-right">+ PRODUTOS</span>
               </ul>
            </li>
            <li class="dropdown"> 
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
               <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Infantil</p></a>  
               <ul class="dropdown-menu menu-right">
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <br><span class="pull-right">+ PRODUTOS</span>
               </ul>
            </li>
            <li class="dropdown"> 
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
               <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Jarras & Copos</p></a>  
               <ul class="dropdown-menu dropdown-menu-right" style="float: right;">
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <br><span class="pull-right">+ PRODUTOS</span>
               </ul>
            </li>
            <li class="dropdown"> 
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
               <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Limpeza</p></a>  
               <ul class="dropdown-menu menu-right">
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <br><span class="pull-right">+ PRODUTOS</span>
               </ul>
            </li>
            <li class="dropdown"> 
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
               <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Mesa</p></a>  
               <ul class="dropdown-menu menu-right menu_direita">
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <br><span class="pull-right">+ PRODUTOS</span>
               </ul>
            </li>
            <li class="dropdown"> 
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
               <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Microondas</p></a>  
               <ul class="dropdown-menu menu-right menu_direita">
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <br><span class="pull-right">+ PRODUTOS</span>
               </ul>
            </li>
            <li class="dropdown"> 
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
               <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Organização</p></a>  
               <ul class="dropdown-menu menu-right menu_direita">
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <br><span class="pull-right">+ PRODUTOS</span>
               </ul>
            </li>
            <li class="dropdown"> 
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
               <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Potes</p></a>  
               <ul class="dropdown-menu menu-right menu_direita">
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <br><span class="pull-right">+ PRODUTOS</span>
               </ul>
            </li>
            <li class="dropdown"> 
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0"> 
               <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Tábuas</p></a>  
               <ul class="dropdown-menu menu-right menu_direita">
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
                  <br><span class="pull-right">+ PRODUTOS</span>
               </ul>
            </li>
         </ul>
      </nav><!-- .navbar-collapse -->
   <!--</div>-->
</div><!-- #main-navigation -->

  • Just like I needed to thank you all !

2

You can use the class .dropdown-menu-right to change the alignment of the dropdown

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- <div id="main-navigation-2" class="hidden-xs col-sm-12 col-md-12"> -->
<div id="main-navigation-2">
  <nav class="navbar-main-navigation mb-xs-10" role="navigation">
    <ul class="nav navbar-nav">
      <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0">
          <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" />
          <p>Item 1</p>
        </a>
      </li>
      <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0">
          <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" />
          <p>Item 2</p>
        </a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0">
          <img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" />
          <p>Algo</p>
        </a>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
          <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
          <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
          <li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
          <br><span class="pull-right">+ PRODUTOS</span>
        </ul>
      </li>
    </ul>
  </nav><!-- .navbar-collapse -->
</div><!-- #main-navigation -->

  • 1

    I added the class dropdown-menu-right in the dropdown element to change the alignment of the menu when it is open as indicated in the bootstrap documentation. If you run the code and click Whole Page you will see that the dropdown is aligned right as prompted.

  • 1

    True. I did not notice that I had to click on the menu rs..

1

I did something similar, this already, only that determined the direction of the menu according to the screen size, the code was more or less like in the example, the menu was not with bootstrap and nor responsive, I made the example with the bootstrap classes, I hope it helps ...

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div id="main-navigation-2">
  <nav class="navbar-main-navigation mb-xs-10" role="navigation">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
          Item 1
        </a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
          Item 2
        </a>
        <ul class="dropdown-menu">
          <li><a class="imagem-horizontal" href="">item-2.1</a></li>
          <li><a class="imagem-horizontal" href="">item-2.2</a></li>
          <li><a class="imagem-horizontal" href="">item-2.3</a></li>
          <li><a class="imagem-horizontal" href="">item-2.4</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
          Item 3
        </a>
        <ul class="dropdown-menu">
          <li><a class="imagem-horizontal" href="">item-3.1</a></li>
          <li><a class="imagem-horizontal" href="">item-3.2</a></li>
          <li><a class="imagem-horizontal" href="">item-3.3</a></li>
          <li><a class="imagem-horizontal" href="">item-3.4</a></li>
        </ul>
      </li>
    </ul>
  </nav><!-- .navbar-collapse -->
</div><!-- #main-navigation -->
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>

function normalizarDirecaoSubmenu() {
	var tela = $(window).width();
	var limiteMenu = 650; //tamanho da tela
	$('.dropdown').each(function(index, el) {
		var $el = $(el),
			offset = $el.offset();
			direcao = (tela - offset.left) < limiteMenu ? 'dropdown-menu-left' : 'dropdown-menu-right';
		$el.find('.dropdown-menu').addClass(direcao);
	});
}

jQuery(document).ready(function($) {
	normalizarDirecaoSubmenu();
});
</script>
</body>
</html>

  • 1

    @Here on the site you may not be able to see the correct operation but, you can save the local code and test with different screen sizes.

  • i tested yours apparently works with js, but I wanted a solution in CSS using Nth-Child or with js even but using the 5th TAG <li class="dropdown"> as limiter making the change from MESA. With CSS and Nth-Child I usually do this and in this case it is not working because there must be some conflict in CSS.. I decided temporarily using two menus I will wait for more answers while I do a test on a clean page to confirm later why Nth-Child does not want to work

  • Blz, CSS-only solutions are way cooler ...

Browser other questions tagged html css bootstrap dropdown

You are not signed in. Login or sign up in order to post.