1

Bom criei uma div chamada 'notification'. Onde eu irei colocar um texto e no fim dele tem um menu. Tudo esta funcionando bem, porém quando o texto e muito grande e a tela e pequena, o botão do menu fica sobre o texto, e ele não fica alinhado no centro vertical. Alguém sabe como corrigir isso?

Em alguns casos a div 'notification' não tera o menu.

$(document).ready(function() {

  // Abre Sidenav
  $(".overflow-menu").click(function() {
    $(this).find("ul").animate({
      height: 'toggle'
    }, 'fast');
  });
});
/*====================================================================================================================*/

/* Over-Flow Menu */

/*====================================================================================================================*/

.container-head .overflow-menu .material-icons {
  padding-right: 20px;
}
.container-head .overflow-menu {
  vertical-align: middle;
  display: table-cell;
  vertical-align: middle;
  width: 24px;
  position: relative;
  cursor: pointer;
}
.notification .overflow-menu {
  margin-right: 5px;
  float: right;
  margin-top: -4px;
  display: table-cell;
  vertical-align: middle;
  width: 24px;
  position: relative;
  cursor: pointer;
}
.overflow-menu ul {
  padding: 0;
  position: absolute;
  width: 260px;
  display: none;
  margin-left: -196px;
  overflow: hidden;
  border-radius: 0px 0px 4px 4px;
  top: 50px;
}
.notification .overflow-menu ul {
  text-align: left;
  font-style: normal;
  top: 22px;
  margin-left: -220px;
}
.overflow-menu li {
  padding-left: 10px;
  line-height: 40px;
  cursor: pointer;
  color: #FFFFFF;
  background: #484848;
}
.overflow-menu li:hover {
  background: #0091FF;
}
/*====================================================================================================================*/

/* Notification */

/*====================================================================================================================*/

.notification {
  background: #0091FF;
  padding: 15px;
  color: #FFFFFF;
  font-style: italic;
  text-a
}
lign:center;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Notification -->
<div class="notification">
  <b>título</b> texto kjh jkkj k hk gh jghjgjk g jh jhgk hjg gkj hgj hg jhgj kjhgg jkhg jhg jg jhg j gjh gj g jhg j

  <!-- Over-Flow Menu -->
  <div class='overflow-menu'>
    <i class="material-icons">more_vert</i>
    <ul>
      <li>OPÇÃO 1</li>
      <li>OPÇÃO 2</li>
      <li>OPÇÃO 3</li>
    </ul>
  </div>
</div>

3
  • 1
    Olá, não consegui perceber como é que quer que o botão reaja às varias alternativas. sem texto, com pouco texto, com muito texto. Commented 29/12/2016 às 11:09
  • Foi isso o que eu fiquei na dúvida também. Commented 29/12/2016 às 11:13
  • Desculpa vou tentar explicar melhor, quero que o botão do menu fique sempre a direita e alinhado verticalmente. E quando o teto for muito grande ele não pode ficar debaixo do menu. Só isso. A estrutura tem que ficar exatamente igual a da pergunta, abre ele em um monitor grande que vcs verão como eu quero que fique. Entendeu melhor? Commented 29/12/2016 às 11:18

3 Respostas 3

2

Mudando apenas a ordem do HTML que esta escrito resolve o problema.

$(document).ready(function() {

  // Abre Sidenav
  $(".overflow-menu").click(function() {
    $(this).find("ul").animate({
      height: 'toggle'
    }, 'fast');
  });
});
/*====================================================================================================================*/

/* Over-Flow Menu */

/*====================================================================================================================*/

.container-head .overflow-menu .material-icons {
  padding-right: 20px;
}
.container-head .overflow-menu {
  vertical-align: middle;
  display: table-cell;
  vertical-align: middle;
  width: 24px;
  position: relative;
  cursor: pointer;
}
.notification .overflow-menu {
  margin-right: 5px;
  float: right;
  margin-top: -4px;
  display: table-cell;
  vertical-align: middle;
  width: 24px;
  position: relative;
  cursor: pointer;
}
.overflow-menu ul {
  padding: 0;
  position: absolute;
  width: 260px;
  display: none;
  margin-left: -196px;
  overflow: hidden;
  border-radius: 0px 0px 4px 4px;
  top: 50px;
}
.notification .overflow-menu ul {
  text-align: left;
  font-style: normal;
  top: 22px;
  margin-left: -220px;
}
.overflow-menu li {
  padding-left: 10px;
  line-height: 40px;
  cursor: pointer;
  color: #FFFFFF;
  background: #484848;
}
.overflow-menu li:hover {
  background: #0091FF;
}
/*====================================================================================================================*/

/* Notification */

/*====================================================================================================================*/

.notification {
  background: #0091FF;
  padding: 15px;
  color: #FFFFFF;
  font-style: italic;
  text-a
}
lign:center;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
<!-- Notification -->
<div class="notification">
  <!-- Over-Flow Menu -->
  <div class='overflow-menu'>
    <i class="material-icons">more_vert</i>
    <ul>
      <li>OPÇÃO 1</li>
      <li>OPÇÃO 2</li>
      <li>OPÇÃO 3</li>
    </ul>
  </div>
  <b>título</b>  texto kjh jkkj k hk gh jghjgjk g jh jhgk hjg gkj hgj hg jhgj     kjhgg jkhg jhg jg jhg j gjh gj g jhg j
</div>

3
  • Boa solução mesmo. Commented 29/12/2016 às 11:25
  • Perfeito hahahahahaha. E possível fazer o 'overflow-menu' se abrir abaixo da 'notification'? Percebi que ele esta suando o botão do menu como referencia. Commented 29/12/2016 às 11:30
  • Teria que mudar bastante coisa no html e css pra fazer isto visto que, pra saber o tamanho do texto tem que colocar ele em um container ou colocar o <i> acima do texto como eu fiz e o UL a baixo porem deixaria de ser um overflow-menu genérico. Commented 29/12/2016 às 11:40
0

Não entendi tão bem o que você precisa, mas segue algo que fiz pensando no que eu entendi.

Fiz com float:right e left.

$(document).ready(function() {

  // Abre Sidenav
  $(".overflow-menu").click(function() {
    $(this).find("ul").animate({
      height: 'toggle'
    }, 'fast');
  });
});
/*====================================================================================================================*/

/* Over-Flow Menu */

/*====================================================================================================================*/

.container-head .overflow-menu .material-icons {
  padding-right: 20px;
}
.container-head .overflow-menu {
  vertical-align: middle;
  display: table-cell;
  vertical-align: middle;
  width: 24px;
  position: relative;
  cursor: pointer;
}
.notification .overflow-menu {
  margin-right: 5px;
  margin-top: -4px;
  display: table-cell;
  vertical-align: middle;
  width: 24px;
  float: right;
  cursor: pointer;
}
.overflow-menu ul {
  padding: 0;
  position: absolute;
  width: 260px;
  display: none;
  margin-left: -196px;
  overflow: hidden;
  border-radius: 0px 0px 4px 4px;
  top: 50px;
}
.notification .overflow-menu ul {
  text-align: left;
  font-style: normal;
  top: 22px;
  margin-left: -220px;
}
.overflow-menu li {
  padding-left: 10px;
  line-height: 40px;
  cursor: pointer;
  color: #FFFFFF;
  background: #484848;
}
.overflow-menu li:hover {
  background: #0091FF;
}
/*====================================================================================================================*/

/* Notification */

/*====================================================================================================================*/

.notification {
  background: #0091FF;
  padding: 15px;
  color: #FFFFFF;
  font-style: italic;
  display: table;
  position: relative;
}
.notification .not {
  float: left;
  width: 90%;
}
.notification h4 {
  margin: 0;
  margin-bottom: 5px;
  right: 15px;
  top: 15px;
}
.notification .texto {
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Notification -->
<div class="notification">
  <div class="not">
    <h4>Título</h4>
    <div class="texto">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>

  <!-- Over-Flow Menu -->
  <div class='overflow-menu'>
    <i class="material-icons">more_vert</i>
    <ul>
      <li>OPÇÃO 1</li>
      <li>OPÇÃO 2</li>
      <li>OPÇÃO 3</li>
    </ul>
  </div>
</div>

2
  • E quase isso, eu não quero mexer a estrutura criando título. quero ele igual eu postei, o único problema era que o texto ficava debaixo do botão do menu. E o botão não ficava alinhado na vertical. Commented 29/12/2016 às 11:19
  • Então não vai funcionar. A semântica do HTML está incorreta. Você precisa ter um elemento pai do seu texto para ficar do lado do menu. Commented 29/12/2016 às 11:22
0

Proponho ser inserido um parágrafo dentro do elemento notificaion e definir um tamanho para ele, tal que deixei com 90%. Então alterar algumas coisas nas classes .notification .overflow-menu e .notification, onde deixei a a classe .notification display como table para deixar esse elemento e os descendentes em formato de tabela e .notification .overflow-menu com tamanho de 5%. Assim independente do tamanho do texto, o menu sempre ficará a direita do texto e no centro.

inserir a descrição da imagem aqui

Resultado:

$(document).ready(function() {

  // Abre Sidenav
  $(".overflow-menu").click(function() {
    $(this).find("ul").animate({
      height: 'toggle'
    }, 'fast');
  });
});
/*====================================================================================================================*/

/* Over-Flow Menu */

/*====================================================================================================================*/

.container-head .overflow-menu .material-icons {
  padding-right: 20px;
}
.container-head .overflow-menu {
  vertical-align: middle;
  display: table-cell;
  vertical-align: middle;
  width: 24px;
  position: relative;
  cursor: pointer;
}
.notification .overflow-menu {
  margin-right: 5px;
  display: table-cell;
  vertical-align: middle;
  width: 5%;
  position: relative;
  cursor: pointer;
}
.overflow-menu ul {
  padding: 0;
  position: absolute;
  width: 260px;
  display: none;
  margin-left: -196px;
  overflow: hidden;
  border-radius: 0px 0px 4px 4px;
  top: 50px;
}
.notification .overflow-menu ul {
  text-align: left;
  font-style: normal;
  top: 22px;
  margin-left: -220px;
}
.overflow-menu li {
  padding-left: 10px;
  line-height: 40px;
  cursor: pointer;
  color: #FFFFFF;
  background: #484848;
}
.overflow-menu li:hover {
  background: #0091FF;
}
/*====================================================================================================================*/

/* Notification */

/*====================================================================================================================*/

.notification {
  background: #0091FF;
  padding: 15px;
  color: #FFFFFF;
  font-style: italic;
  text-align:center;
  display: table;
}

.notification p {
  width: 90%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Notification -->
<div class="notification">
  <p>
    <b>Lorem Ipsum</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sem ac eros bibendum dignissim. In dignissim, orci commodo aliquet vestibulum, urna libero varius augue, ut pellentesque libero odio nec arcu. Donec hendrerit gravida sem et venenatis. Maecenas finibus elementum sapien, a faucibus erat lacinia in. Suspendisse volutpat massa nibh, sit amet maximus nulla sagittis ac. Duis maximus libero elementum, iaculis quam vitae, ornare nunc. Quisque efficitur erat justo, sit amet aliquam felis finibus non. Phasellus laoreet dolor ligula, at condimentum enim lacinia ac. 
  </p>
  <!-- Over-Flow Menu -->
  <div class='overflow-menu'>
    <i class="material-icons">more_vert</i>
    <ul>
      <li>OPÇÃO 1</li>
      <li>OPÇÃO 2</li>
      <li>OPÇÃO 3</li>
    </ul>
  </div>
</div>

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 .