Float half of Dropdown Menu list to another position

Question

Float half of Dropdown Menu list to another position

Navigation

#1 by (6 votes)
#2 by (2 votes)
#3 by (1 votes)

6

How to do in the sixth cell of Menu Dropdown float to left as in the example below:

Itriedunsuccessfullysomethinglike:

<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>

MenuCode

<divid="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 dropdown bootstrap

asked by anonymous 14.12.2017 / 19:03

3 answers

2

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

<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><scriptsrc="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 -->

18.12.2017 / 17:12

1

I did something similar, that already, only that it determined the direction of the menu according to the size of the screen, the code was more or less as in the example, the menu was not bootstrap nor responsive, I made the example with the bootstrap classes, 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><scriptsrc="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>

19.12.2017 / 03:30

How to remove spaces from a string in Java? What are the advantages of creating dll's in the project and not putting the classes directly in it?

score 6 · Accepted Answer

I imagine that every <li> is a menu button, which also includes a <ul> which is the dropdown menu 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 it 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><linkrel="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 -->