Move body along side menu

Asked

Viewed 89 times

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:

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

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>

2 answers

1


With jQuery, use the events mouseenter and mouseleave to change the body’s left margin (margin-left) using .animate() when the mouse passes over to div#lateral.

Since you’re using a 500-pixel breakpoint down to convert the menu to mobile mode, put the animation inside a if conditioning it to rotate only if the width of the screen is greater than 500px.

$(function(){
   $("#lateral").on("mouseenter mouseleave", function(e){
      if(window.innerWidth > 500){
         $("body").stop().animate({
            "margin-left": (e.type == "mouseenter" ? 375 : 55) + "px"
         });
      }
   });
});
@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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<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 -->
<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>
    <tr>
    <td><?php echo $linha['NOME_CLIENTE']; ?></td>
    <td><?php echo $linha['TELEFONE_CLIENTE']; ?></td>
    <td><?php echo $linha['ID_CLIENTE']; ?></td>
    </tr>
</thead>
</table>

1

I made a class called .ativa, and put a transition in div with the content I called div .contudo. So when you make one mouseenter() in the menu div I add this class . active in na div conteudo and when you do the mouseleave() I withdraw that class

inserir a descrição da imagem aqui

Follow the image code above

OBS: This error in the console is because of your script not from my :D

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    @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;
    }
    .conteudo {
        transition: margin-left 0.5s ease;
    }
    .ativa {
        margin-left: 320px;
    }
</style>
</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 -->

    <div class="conteudo">
        <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>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/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();
        });

        $("#lateral").mouseenter(function(event){
            $('.conteudo').addClass("ativa");
        });
        $("#lateral").mouseleave(function(event){
            $('.conteudo').removeClass("ativa");
        });
    </script>

</body>

</html>


Only with CSS

If you want to do only with CSS, without JS or jQuery you can just make a rule like this:

.conteudo {
    margin-left: 0;
    transition: margin-left 0.5s ease;
}
#lateral:hover + .conteudo {
    margin-left: 320px;
}

Follows the code

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    @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;
    }
    .conteudo {
        margin-left: 0;
        transition: margin-left 0.5s ease;
     
    }
    #lateral:hover + .conteudo {
        margin-left: 320px;
    }
</style>
</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>
    <div class="conteudo">
        <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>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/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>

Browser other questions tagged

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