1
Well I created a div called 'notification'. Where I will put a text and at the end of it has a menu. Everything is working fine, but when the text is too big and the screen is small, the menu button is on the text, and it is not aligned in the vertical center. Someone knows how to fix it?
In some cases the div notification will not have the 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>
Hello, I couldn’t understand how you want the button to react to the various alternatives. no text, little text, lots of text.
– Tiago Gomes
That’s what I was wondering too.
– Diego Souza
Sorry I’ll try to explain better, I want the menu button to always be right and aligned vertically. And when the ceiling is too big, it can’t stay under the menu. That’s it. The structure has to be exactly the same as the question, open it on a large monitor that you will see as I want it to be. Understood better?
– Hugo Borges