0
I am creating a code, where it has a side menu that when passing the mouse over this menu it expands to the side.
But the problem I’m facing is that when the menu expands to the side, it’s covering a portion of the page content.
Similar to the images below:
I would like to leave the dynamic code, that the moment the user hovers over the menu, it expands, but the body moves along with the menu to the side.
Below is the code I’m using.
CSS
@charset "UTF-8";
*, html, body {
margin:0;
padding:0;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* regra para o clear float */
.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}
body {
margin-left:55px; /*espaço à esquerda para a barra vertical vísivel do menu */
font: 62.5%/1.2 Verdana, Helvetica, Arial, sans-serif;
}
#lateral {
padding:0 50px 0 0;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
font-size:1.2em;
background:rgb(44,62,80);
background-image: -moz-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
background-image: -webkit-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
background-image: -o-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79) );
background-image: -ms-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
background-image: linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
height:100%;
overflow:hidden;
width:370px;
position:fixed;
top:0;
left:-320px;
}
#lateral:hover:before, #lateral:focus:before {
left:-500px
}
#lateral:hover, #lateral:focus, #lateral:active {
overflow-y:scroll;
-moz-transform: translate(320px, 0);
-webkit-transform: translate(320px, 0);
-o-transform: translate(320px, 0);
transform: translate(320px, 0);
padding-right:0;
}
#menu {
font-style:italic;
position:relative;
font-size:1.0em;
margin:1em 0 1em -1em;
padding:0;
}
#menu {padding:0; margin:0;}
#menu a:hover {
color:rgb(255, 0, 0);
background-color:rgba(255,255,255,0.2);
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
@media (max-width: 500px) {
body {margin-left:0;background-size:100% 28em!important;}
#lateral {
padding:0;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
font-size:1.2em;
height:100%;
overflow:auto;
width:100%;
position:static;
top:0;
left:0;
}
#lateral:before {
z-index:1000;
width:0;
text-align:center;
content: "";
font-size:0;
color:white;
position:static;
top:0;
left:0;
display:inline-block;
}
#lateral:hover, #lateral:focus {
overflow:scroll;
-moz-transform: none;
-webkit-transform: none;
-o-transform:none;
transform:none;
}
}
.cor{
background-color:white;
font-weight: bolder;
font-size: 15px;
}
a{
display: block;
}HTML
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<div id="lateral">
<div id="menu">
<ul class="collapsible popout">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>Entrada</div>
<div class="collapsible-body cor"><a href="cliente.php"> Cadastro </a></div>
<div class="collapsible-body cor"><a href="#">TESTE</a></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>SEGUNDO</div>
<div class="collapsible-body cor"><a href="#">TESTE</a></div>
<div class="collapsible-body cor"><a href="#">TESTE</a></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>TERCEIRO</div>
<div class="collapsible-body cor"><a href="#">TESTE</a></div>
<div class="collapsible-body cor"><a href="#">TESTE</a></div>
</li>
</ul>
</div> <!-- /#menu -->
</div> <!-- /#lateral -->
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.collapsible').collapsible();
});
</script>
</body>
</html>Client.php ( Table screen )
<?php
include_once 'home.html';
include_once 'conexao.php';
?>
<body>
<Button class='cor' onclick="window.location='cadastrocliente.php'"> Novo Cliente </button>
<table border="" class="display" width="50%">
<thead>
<tr>
<th>NOME</th>
<th>TELEFONE</th>
<th>Ação</th>
</tr>
<?php
$sql = "SELECT * FROM tb_cliente";
$res = mysqli_query($con,$sql);
if($res){
while($linha = mysqli_fetch_array($res)){
?>
<tr>
<td><?php echo $linha['NOME_CLIENTE']; ?></td>
<td><?php echo $linha['TELEFONE_CLIENTE']; ?></td>
<td><?php echo $linha['ID_CLIENTE']; ?></td>
</tr>
<?php
}
}
?>
</thead>
</table>
</body>