Restore UL size when leaving focus!

Question

Restore UL size when leaving focus!

Asked 4 years, 12 months ago

Viewed 40 times

0

I have the code down below:

$("ul#menu > li").find("label").hover ( function(e) {
		
		e.stopPropagation();
		
		let ul = $(this).parent().find("ul");
		
		ul.css('display', e.type == "mouseenter" ? 'flex' : 'none');
		
	});

ul {
    list-style: none;
}
a {
	text-decoration: none;
    transition: background-color 1s;
}
label {
	display: inline-block;
}

body section#menu > div.internas {
	display: flex;
	justify-content: center;	
}
body section#menu > div.internas > ul {
	display: flex;
}
body section#menu > div.internas > ul > li > * {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	border: 1px solid #CCC;
}
body section#menu > div.internas > ul > li > label {
	cursor: pointer;
	height: 50px;
}
body section#menu > div.internas > ul > li > ul> li > a : hover {
	background: #999;
}
body section#menu > div.internas > ul > li > ul> li > a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 50px;
}
body section#menu > div.internas > ul > li > ul {
	display: none;
	flex-direction: column;
}
body section#menu > div.internas > ul > li > a:hover {
	background: #999;
	color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="menu">
	
	<div class="internas">
		
		<ul id="menu">
		
			<li>
				<label>Cadastrar</label>
				<ul id="menuCadastrar">
					<li><a href="/admin/cadastrar/administradores">Administradores</a></li>
					<li><a href="/admin/cadastrar/cursos">Cursos</a></li>
					<li><a href="/admin/cadastrar/fornecedores">Fornecedores</a></li>
					<li><a href="/admin/cadastrar/tecnicos">Técnicos</a></li>
					<li><a href="/admin/cadastrar/youtubers">Youtubers</a></li>
				</ul>
		    </li>
		
			<li>
				<label>Editar</label>
				<ul id="menuEditar">
					<li><a href="/admin/editar/administradores">Administradores</a></li>
					<li><a href="/admin/editar/cursos">Cursos</a></li>
					<li><a href="/admin/editar/fornecedores">Fornecedores</a></li>
					<li><a href="/admin/editar/tecnicos">Técnicos</a></li>
					<li><a href="/admin/editar/youtubers">Youtubers</a></li>
				</ul>
			</li>
			
		</ul>
		
	</div>
	
</section>

The problem is that, as the code boss, at the pass by the mouse in LI, to UL internal appears. In fact appears!

But I stumble on the fact that while driving with the mouse to the UL intern I leave the LI of UL and lose focus by closing the UL internal!

Any more official tips?

Like you guys do?

EDITION:

I did a test increasing the size of the li but still, as I leave the phocus, she does not respect the size of LI

$("ul#menu > li").find("label").hover ( function(e) {
	
	e.stopPropagation();
	
	let ul = $(this).parent().find("ul");
	
	let qtdeLi = ul.parent().find("li").length;
	
	let altUl = qtdeLi * 50;
	
	$(this).parent().css('height', e.type == "mouseenter" ? altUl : 50);
	
	ul.css('display', e.type == "mouseenter" ? 'flex' : 'none');
	
});

ul {
    list-style: none;
}
a {
	text-decoration: none;
    transition: background-color 1s;
}
label {
	display: inline-block;
}

body section#menu > div.internas {
	display: flex;
	justify-content: center;	
}
body section#menu > div.internas > ul {
	display: flex;
}
body section#menu > div.internas > ul > li > * {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	border: 1px solid #CCC;
}
body section#menu > div.internas > ul > li > label {
	cursor: pointer;
	height: 50px;
}
body section#menu > div.internas > ul > li > ul> li > a : hover {
	background: #999;
}
body section#menu > div.internas > ul > li > ul> li > a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 50px;
}
body section#menu > div.internas > ul > li > ul {
	display: none;
	flex-direction: column;
}
body section#menu > div.internas > ul > li > a:hover {
	background: #999;
	color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="menu">
	
	<div class="internas">
		
		<ul id="menu">
		
			<li>
				<label>Cadastrar</label>
				<ul id="menuCadastrar">
					<li><a href="/admin/cadastrar/administradores">Administradores</a></li>
					<li><a href="/admin/cadastrar/cursos">Cursos</a></li>
					<li><a href="/admin/cadastrar/fornecedores">Fornecedores</a></li>
					<li><a href="/admin/cadastrar/tecnicos">Técnicos</a></li>
					<li><a href="/admin/cadastrar/youtubers">Youtubers</a></li>
				</ul>
		    </li>
		
			<li>
				<label>Editar</label>
				<ul id="menuEditar">
					<li><a href="/admin/editar/administradores">Administradores</a></li>
					<li><a href="/admin/editar/cursos">Cursos</a></li>
					<li><a href="/admin/editar/fornecedores">Fornecedores</a></li>
					<li><a href="/admin/editar/tecnicos">Técnicos</a></li>
					<li><a href="/admin/editar/youtubers">Youtubers</a></li>
				</ul>
			</li>
			
		</ul>
		
	</div>
	
</section>

After the explanation of the colleague Hugo, including pulling my ear with reason, kkk, I made another attempt.

But, Hugo, please don’t misunderstand me. I don’t like copying ready-made code. I think it’s more important to understand than to copy.

I made another attempt to answer your question but I still have the same problem of losing UL when I left.

  body section#menu > div.internas {
display: flex;
justify-content: center;
}
body section#menu > div.internas > ul {
display: flex;
}
body section#menu > div.internas > ul > li > label {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 50px;
cursor: pointer;
border: 1px solid #CCC;

}
body section#menu > div.internas > ul > li > label:hover {
background: #CCC;
}
body section#menu > div.internas > ul > li > label:hover + ul {
display: flex;
}
body section#menu > div.internas > ul > li > ul  {
display: none;
flex-direction: column;
}
body section#menu > div.internas > ul > li > ul > li > a  {
display: flex;
align-items: center;
height: 50px;
border: 1px solid #CCC;
padding-left: 5px;
}
body section#menu > div.internas > ul > li > ul > li > a:hover  {
background: #CCC;
color: #fff;
}

   <section id="menu">

<div class="internas">
	
	<ul>
	
		<li>
			<label>Cadastrar</label>
			<ul>
				<li><a href="/admin/cadastrar/administradores">Administradores</a></li>
				<li><a href="/admin/cadastrar/cursos">Cursos</a></li>
				<li><a href="/admin/cadastrar/fornecedores">Fornecedores</a></li>
				<li><a href="/admin/cadastrar/tecnicos">Técnicos</a></li>
				<li><a href="/admin/cadastrar/youtubers">Youtubers</a></li>
			</ul>
	    </li>
	
		<li>
			<label>Editar</label>
			<ul>
				<li><a href="/admin/editar/administradores">Administradores</a></li>
				<li><a href="/admin/editar/cursos">Cursos</a></li>
				<li><a href="/admin/editar/fornecedores">Fornecedores</a></li>
				<li><a href="/admin/editar/tecnicos">Técnicos</a></li>
				<li><a href="/admin/editar/youtubers">Youtubers</a></li>
			</ul>
		</li>
		
	</ul>
	
</div>

</section>

Where did I go wrong this time?

Nice that you arrived at a satisfactory result, was worth the strength

– hugocsl

2019/10/07 at 14:24
#tmjjuntosempre, I thank you!

– Carlos Rocha

2019/10/07 at 14:37

2 answers

1

Dude I told you, you need to and study a little CSS. Vc is repeating two IDs equal in two different elements. You are creating classes with unnecessary and meaningless type concatenations body section#menu > div.internas > ul > li > ul

And to finish if problem doesn’t even need jQuery to solve, only with CSS solves, what happens is that you have to give display:flex in the UL of sub-menu when you do :hover in LI father of that UL sub-menu, that’s all.

#menuX > li:hover ul {
    display: flex !important;
}


ul {
    list-style: none;
}

a {
    text-decoration: none;
    transition: background-color 1s;
}

label {
    display: inline-block;
}

body section#menu > div.internas {
    display: flex;
    justify-content: center;
}

body section#menu > div.internas > ul {
    display: flex;
align-items: flex-start;
}

body section#menu > div.internas > ul > li > * {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    border: 1px solid #CCC;
}

body section#menu > div.internas > ul > li > label {
    cursor: pointer;
    height: 50px;
}

body section#menu > div.internas > ul > li > ul > li > a : hover {
    background: #999;
}

body section#menu > div.internas > ul > li > ul > li > a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50px;
}

body section#menu > div.internas > ul > li > ul {
    display: none;
    flex-direction: column;
}

body section#menu > div.internas > ul > li > a:hover {
    background: #999;
    color: #fff;
}

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<section id="menu">

<div class="internas">

    <ul id="menuX">

        <li>
            <label>Cadastrar</label>
            <ul id="menuCadastrar">
                <li><a href="/admin/cadastrar/administradores">Administradores</a></li>
                <li><a href="/admin/cadastrar/cursos">Cursos</a></li>
                <li><a href="/admin/cadastrar/fornecedores">Fornecedores</a></li>
                <li><a href="/admin/cadastrar/tecnicos">Técnicos</a></li>
                <li><a href="/admin/cadastrar/youtubers">Youtubers</a></li>
            </ul>
        </li>

        <li>
            <label>Editar</label>
            <ul id="menuEditar">
                <li><a href="/admin/editar/administradores">Administradores</a></li>
                <li><a href="/admin/editar/cursos">Cursos</a></li>
                <li><a href="/admin/editar/fornecedores">Fornecedores</a></li>
                <li><a href="/admin/editar/tecnicos">Técnicos</a></li>
                <li><a href="/admin/editar/youtubers">Youtubers</a></li>
            </ul>
        </li>

    </ul>

</div>

Browser other questions tagged jquery css css3

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

by Carlos Rocha • 1 point · Answer 1 · 2019-10-07T14:10:43+00:00

With the helping of colleague Hugo, I managed to make my own solution in a way that I can understand.

But for his help, I accepted his answer as satisfactory.

However, I want to leave my collaborating!

* {
    font-family: 'Montserrat';
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
}
body {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: border-box; /*Comprimir(diminuir) as medidas do elemento para não aumentá-lo quando adicinar margin e padding*/
}
body > section {
	display: flex;
	justify-content: center;
	width: 100vw;
}
body > section > div {
	display: flex;
	width: 1200px;
	padding: 10px;
}
ul {
    list-style: none;
}
a {
	text-decoration: none;
    transition: background-color 1s;
}
label {
	display: inline-block;
}
body section#menu > div.internas {
    display: flex;
    justify-content: center;
	padding-bottom: 300px;
}
body section#menu > div.internas > ul {
    display: flex;
}
body section#menu > div.internas > ul > li > label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 50px;
	cursor: pointer;
	border: 1px solid #CCC;
	
}
body section#menu > div.internas > ul > li > label:hover {
	background: #CCC;
}
body section#menu > div.internas > ul > li > ul  {
    display: none;
	flex-direction: column;
}
body section#menu > div.internas > ul > li:hover ul {
	position: absolute;
    display: flex;
	z-index: 100;
}
body section#menu > div.internas > ul > li > ul > li > a  {
	display: flex;
	align-items: center;
	width: 200px;
	height: 50px;
	border: 1px solid #CCC;
	padding-left: 5px;
}
body section#menu > div.internas > ul > li > ul > li > a:hover  {
	background: #CCC;
	color: #fff;
}

<section id="menu">
	
	<div class="internas">
		
		<ul>
		
			<li>
				<label>Cadastrar</label>
				<ul>
					<li><a href="/admin/cadastrar/administradores">Administradores</a></li>
					<li><a href="/admin/cadastrar/cursos">Cursos</a></li>
					<li><a href="/admin/cadastrar/fornecedores">Fornecedores</a></li>
					<li><a href="/admin/cadastrar/tecnicos">Técnicos</a></li>
					<li><a href="/admin/cadastrar/youtubers">Youtubers</a></li>
				</ul>
		    </li>
		
			<li>
				<label>Editar</label>
				<ul>
					<li><a href="/admin/editar/administradores">Administradores</a></li>
					<li><a href="/admin/editar/cursos">Cursos</a></li>
					<li><a href="/admin/editar/fornecedores">Fornecedores</a></li>
					<li><a href="/admin/editar/tecnicos">Técnicos</a></li>
					<li><a href="/admin/editar/youtubers">Youtubers</a></li>
				</ul>
			</li>
			
		</ul>
		
	</div>
	
</section>

Thank you!