Jump to content
Fórum Script Brasil
  • 0

Menu responsivo


Ricardo_Soares

Question

Iniciando no php, tenho uma página onde lista um datatable e nela inclui uma outra onde consta somente o menu, o preblema é que quando inclui o menu "include("menu.php") o itens do menu lateral expande mas não recolhe, e quando abro a pg do menu separada do datatable ele funciona perfeitamente. abaixo segue os código. me ajudem a resolver este problema.

1º  menu.php

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="shortcut icon" href="/img/pngwing.com.png">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">

  <title>Escola Bíblica</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="/js/Aula30.js" defer></script>
  <link rel="stylesheet" href="./css/style4.css">
  <link href="../Bootstrap 5/bootstrap-5.3.0-alpha1-examples/bootstrap-5.3.0-alpha1-examples/features/features.css"
    rel="stylesheet">
</head>
<style>
  #icon-grid {
    width: 100%;
    height: auto;
  }

  #menu-superior {
    margin-top: -15px;
    margin-left: -18px;
    width: 100%;
  }

  #corpo-tabela {
    margin-top: -30px;
    margin-left: -18px;
  }

  #tabela {
    width: auto;
    margin-top: -30px;
  }

  #text-corp {
    width: 100%;
  }

  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }

  .b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, 0.1);
    border: solid rgba(0, 0, 0, 0.15);
    border-width: 1px 0;
    box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
      inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
  }

  .b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
  }

  .bi {
    vertical-align: -0.125em;
    fill: currentColor;
  }

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
</style>

<body>
  <div class="wrapper">
    <!-- Sidebar Holder -->
    <nav class="sidebar-header" id="sidebar">
      <div class="sidebar-header">
        <h3>Instituto Servos</h3>
        <strong>EBD</strong>
        <h3>Escola Bíblica Dominical</h3>
      </div>

      <ul class="list-unstyled components">
        <li>
          <a href="#pageSubmenu1" data-toggle="collapse" aria-expanded="false">
            <i class="bi bi-archive"></i>Secretaria</a>
          <ul class="collapse list-unstyled" id="pageSubmenu1">
            <li><a href="form.html">Matrícula</a></li>
            <li><a href="listar_matric.html">Matriculados</a></li>
            <li><a href="#">Financeiro</a></li>
            <li><a href="#">Boletim</a></i></li>
            <li><a href="#">Contato</a></li>
            <li><a href="#">Certificados</a></li>
          </ul>
        </li>

        <li>
          <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">
            <i class="bi bi-person-workspace"></i>Área do Aluno</a>
          <ul class="collapse list-unstyled" id="homeSubmenu">
            <li><a href="indexebd.html">Cadastrar</a></li>
            <li><a href="indexebd.html">Editar</a></li>
            <li><a href="indexteol.html">Resultado</a></li>

          </ul>
        </li>

        <li>
          <a href="#homeSubmenu1" data-toggle="collapse" aria-expanded="false">
            <i class="bi bi-building-fill"></i>Classes</a>
          <ul class="collapse list-unstyled" id="homeSubmenu1">
            <li><a href="pageModel.html">Adulto</a></li>
            <li><a href="indexteol.html">Jovens</a></li>
            <li><a href="indexCapel.html">Adolecentes</a></li>
            <li><a href="#">Infantil</a></li>
          </ul>
        </li>

        <li>
          <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
            <i class="bi bi-book"></i>Revistas</a>
          <ul class="collapse list-unstyled" id="pageSubmenu">
            <li><a href="#">2023</a></li>
            <li><a href="#">2022</a></li>
            <li><a href="#">2021</a></li>
            <li><a href="#">2020</a></li>
            <li><a href="#">2019</a></li>
            <li><a href="#">2018</a></li>
            <li><a href="#">2017</a></li>
            <li><a href="#">2016</a></li>
            <li><a href="#">2015</a></li>
            <li><a href="#">2014</a></li>
            <li><a href="#">2013</a></li>
            <li><a href="#">2012</a></li>
            <li><a href="#">2011</a></li>
            <li><a href="#">2010</a></li>
            <li><a href="#">2009</a></li>
            <li><a href="#">2008</a></li>
            <li><a href="#">2007</a></li>
          </ul>
        </li>
        <li>
          <a href="#pageSubmenu2" data-toggle="collapse" aria-expanded="false">
            <i class="bi bi-book-half"></i>Outros Temas</a>
          <ul class="collapse list-unstyled" id="pageSubmenu2">
            <li><a href="#">Fé</a></li>
            <li><a href="#">Santidade</a></li>
            <li><a href="#">Dinheiro</a></li>
            <li><a href="#">Vestes</a></li>
            <li><a href="#">Relacionamentos</a></li>
            <li><a href="#">Trabalho</a></li>
            <li><a href="#">Obras</a></li>
            <li><a href="#">Pecado</a></li>
            <li><a href="#">Graça</a></li>
            <li><a href="#">Lei</a></li>
            <li><a href="#">Palavra</a></li>
            <li><a href="#">Morte</a></li>
            <li><a href="#">Salvação</a></li>
            <li><a href="#">Juízo</a></li>
            <li><a href="#">Arrebtamento</a></li>
            <li><a href="#">Salmos</a></li>
            <li><a href="#">Torá</a></li>
          </ul>
        </li>
        <li>
          <a href="#">
            <i class="bi bi-link-45deg"></i>
            Portfolio
          </a>
        </li>
        <li>
          <a href="#">
            <i class="bi bi-paperclip"></i>
            FAQ
          </a>
        </li>
        <li>
          <a href="#">
            <i class="glyphicon glyphicon-send"></i>Contato</a>
        </li>
      </ul>

      <ul class="list-unstyled CTAs">
        <li>
          <a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a>
        </li>
        <li>
          <a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
        </li>
      </ul>
    </nav>
    <div id="content">
      <nav class="navbar navbar-default col-11" id="menu-superior">
        <div class="container d-inline-block">
          <div class="navbar-header">
            <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
              <i class="glyphicon glyphicon-align-left"></i>
              <span>Menu Lateral</span>
            </button>
          </div>

          <div class="collapse navbar-collapse me-2 p-1" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right d-lg-inline-block m-1">
              <li><a href="#">Home</a></li>
              <li><a href="#">Cursos</a></li>
              <li><a href="#">Contato</a></li>
              <li><a type="button" data-toggle="modal" data-target="#cadastrarModal">
                  Cadastrar
                </a></li>
              <li><a href="entrar_aluno.html">Sou Aluno</a></li>
              <li><a href="entrar_professor.html">Sou Professor</a></li>
            </ul>
          </div>
        </div>
      </nav>

      <script src="https://code.jquery.com/jquery-3.x.x.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

      <script type="text/javascript">
        $(document).ready(function () {
          $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
          });
        });
      </script>

</body>

</html>

2º código listar_usuarios.php

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="/img/pngwing.com.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">

    <title>Escola Bíblica</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/js/Aula30.js" defer></script>
    <link rel="stylesheet" href="./css/style4.css">
    <link href="../Bootstrap 5/bootstrap-5.3.0-alpha1-examples/bootstrap-5.3.0-alpha1-examples/features/features.css"
        rel="stylesheet">
</head>
<?php

include_once("conexao.php");

if (isset($_FILES["imagem"]) && !empty($_FILES["imagem"])) {
    move_uploaded_file($_FILES["imagem"]["tmp_name"], "./img/" . $_FILES["imagem"]["name"]);
    echo "Update realizado com sucesso!";
}

$result_cursos = "SELECT * FROM usuarios";
$resultado_cursos = mysqli_query($conn, $result_cursos);

?>
<style>
    .nomecoluna {
        display: flex;
        width: auto;
        padding: 0px;
        font-size: 1.5rem;
    }

    .codigo {
        margin-left: 10px;
    }

    img {
        width: 30px;
    }
</style>

<body>
    <?php

    include("menu.php")
        ?>
    <div class="container theme-showcase" role="main">
        <div class="page-header">
            <h1>Listar Usuarios</h1>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped table-hover display" style="width:100%">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Nome</th>
                            <th>E-mail</th>
                            <th>Salário</th>
                            <th>Idade</th>
                            <th>Nível</th>
                            <th>Foto</th>
                            <th>Ação</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php while ($rows_cursos = mysqli_fetch_assoc($resultado_cursos)) { ?>
                            <tr>
                                <td>
                                    <?php echo $rows_cursos['id']; ?>
                                </td>
                                <td>
                                    <?php echo $rows_cursos['nome']; ?>
                                </td>
                                <td>
                                    <?php echo $rows_cursos['email']; ?>
                                </td>
                                <td>
                                    <?php echo $rows_cursos['salario']; ?>
                                </td>
                                <td>
                                    <?php echo $rows_cursos['idade']; ?>
                                </td>
                                <td>
                                    <?php echo $rows_cursos['nivel']; ?>
                                </td>
                                <td><img src="<?php echo $rows_cursos['imagem']; ?>" alt="Imagem do usuário"
                                        style="width: 50px"></td>
                                <td>

                                    <button type="button" class="btn btn-xs btn-primary" data-toggle="modal"
                                        data-target="#myModal<?php echo $rows_cursos['id']; ?>">Visualizar</button>

                                    <button type="button" class="btn btn-xs btn-warning" data-toggle="modal"
                                        data-target="#exampleModal" data-whatever="<?php echo $rows_cursos['id']; ?>"
                                        data-whatevernome="<?php echo $rows_cursos['nome']; ?>"
                                        data-whateveremail="<?php echo $rows_cursos['email']; ?>"
                                        data-whateversalario="<?php echo $rows_cursos['salario']; ?>"
                                        data-whateveridade="<?php echo $rows_cursos['idade']; ?>"
                                        data-whatevernivel="<?php echo $rows_cursos['nivel']; ?>"
                                        data-whateverimagem="<?php echo $rows_cursos['imagem']; ?>">Editar</button>

                                    <button type="button" class="btn btn-xs btn-danger"
                                        onclick="deleteUser(<?php echo $rows_cursos['id']; ?>)">Apagar</button>
                                </td>
                            </tr>
                            <!-- Inicio Modal -->
                            <div class="modal fade" id="myModal<?php echo $rows_cursos['id']; ?>" tabindex="-1"
                                role="dialog" aria-labelledby="myModalLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title text-center" id="myModalLabel">Nome:
                                                <?php echo $rows_cursos['nome']; ?>
                                            </h4>
                                        </div>
                                        <div class="modal-body col-6">
                                            <div class="nomecoluna">id:<p class="codigo">
                                                    <?php echo $rows_cursos['id']; ?>
                                                </p>
                                            </div>
                                            <div class="nomecoluna">Nome:<p class="codigo">Nome:
                                                    <?php echo $rows_cursos['nome']; ?>
                                                </p>
                                            </div>
                                            <div class="nomecoluna">E-mail:<p class="codigo">
                                                    <?php echo $rows_cursos['email']; ?>
                                                </p>
                                            </div>
                                            <div class="nomecoluna">Salário:<p class="codigo">
                                                    <?php echo $rows_cursos['salario']; ?>
                                                </p>
                                            </div>
                                            <div class="nomecoluna">Idade:<p class="codigo">
                                                    <?php echo $rows_cursos['idade']; ?>
                                                </p>
                                            </div>
                                            <div class="nomecoluna">Nível de Acesso:<p class="codigo">
                                                    <?php echo $rows_cursos['nivel']; ?>
                                                </p>
                                            </div>
                                            <div class="nomecoluna">Foto:<p class="codigo"><img
                                                        src="<?php echo $rows_cursos['imagem']; ?>" alt=""></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">Curso</h4>
                </div>
                <div class="modal-body">
                    <form method="POST" action="http://localhost/processa.php" enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Nome:</label>
                            <input name="nome" type="text" class="form-control" id="recipient-name">
                        </div>

                        <div>
                            <label for="recipient-email" class="control-label">E-mail:</label>
                            <input name="email" type="email" class="form-control" id="recipient-email">
                        </div>

                        <div>
                            <label for="recipient-name" class="control-label">Salário:</label>
                            <input name="salario" type="number" class="form-control" id="recipient-salario">
                        </div>

                        <div>
                            <label for="recipient-idade" class="control-label">Idade:</label>
                            <input name="idade" type="text" class="form-control" id="recipient-idade">
                        </div>

                        <div>
                            <label for="recipient-nivel" class="control-label">Nível:</label>
                            <input name="nivel" type="number" class="form-control" id="recipient-nivel">
                        </div>

                        <label>Selecione Imagem</label>
                        <input type="file" name="imagem" accept="image/*" class="form-control">
                        <button type="submit" class="btn btn-primary">Upload Imagem</button>

                        <input name="id" type="hidden" class="form-control" id="id-curso" value="">

                        <button type="button" class="btn btn-success" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-danger">Alterar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Incluir todos os plugins compilados (abaixo) ou incluir arquivos individuais conforme necessário -->
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var recipient = button.data('whatever'); // Extract info from data-* attributes
            var recipientnome = button.data('whatevernome');
            var recipientemail = button.data('whateveremail');
            var recipientsalario = button.data('whateversalario');
            var recipientidade = button.data('whateveridade');
            var recipientnivel = button.data('whatevernivel');
            var recipientimagem = button.data('whateverimagem');
            // Se necessário, você pode iniciar uma solicitação AJAX aqui (e depois fazer a atualização em um callback).
            //Atualiza o conteúdo do modal. Usaremos jQuery aqui, mas você pode usar uma biblioteca de vinculação de dados ou outros métodos.
            var modal = $(this);
            modal.find('.modal-title').text('ID ' + recipient);
            modal.find('#id-curso').val(recipient);
            modal.find('#recipient-name').val(recipientnome);
            modal.find('#recipient-email').val(recipientemail);
            modal.find('#recipient-salario').val(recipientsalario);
            modal.find('#recipient-idade').val(recipientidade);
            modal.find('#recipient-nivel').val(recipientnivel);
            modal.find('#recipient-imagem').val(recipientimagem);
        });
    </script>

    <script type="text/javascript">
        function deleteUser(userId) {
            if (confirm("Deseja realmente apagar este usuário?")) {
                window.location.href = 'apagar.php?id=' + userId;
            }
        }
    </script>

</body>

</html>

3º stylo.css

/*
    DEMO STYLE
*/
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

i, span {
    display: inline-block;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #050505;
    color: #fff;
    transition: all 0.3s;
}
#sidebarCollapse{
    color: #f9f9ff;
    background-color: #050505;
}

#sidebarCollapse:hover{
    background-color: #f78707;
    color: #050505;
}
#sidebar.active {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}

#sidebar.active .sidebar-header h3, #sidebar.active .CTAs {
    display: none;
}

#sidebar.active .sidebar-header strong {
    display: block;
}

#sidebar ul li a {
    text-align: left;
}

#sidebar.active ul li a {
    padding: 20px 10px;
    text-align: center;
    font-size: 0.85em;
}

#sidebar.active ul li a i {
    margin-right:  0;
    display: block;
    font-size: 1.8em;
    margin-bottom: 5px;
}

#sidebar.active ul ul a {
    padding: 10px !important;
}

#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
    top: auto;
    bottom: 5px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #0c0c0c;
}

#sidebar .sidebar-header strong {
    display: none;
    font-size: 1.8em;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #ec680f;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}
#sidebar ul li a:hover {
    color: #f0a80e;
    background: #fff;
}
#sidebar ul li a i {
    margin-right: 10px;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: #353536;
}


a[data-toggle="collapse"] {
    position: relative;
}

a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
    content: '\e259';
    display: block;
    position: absolute;
    right: 20px;
    font-family: 'Glyphicons Halflings';
    font-size: 0.6em;
}
a[aria-expanded="true"]::before {
    content: '\e260';
}


ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #58585a;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #545557;
}

a.article, a.article:hover {
    background: #2d2d30 !important;
    color: #fff !important;
}
.navbar.navbar-default{
    background-color: #2a2a2b;
    color: #999;
}
#bs-example-navbar-collapse-1 ul li{
    background-color: #000000;
}
#bs-example-navbar-collapse-1 ul li a{
    color: #ddd;
}
#bs-example-navbar-collapse-1 a:hover{
    background-color: #f78707;
    color: #050505;
    transition: all 0.3s;

}


/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}


/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        margin-left: -80px !important ;
    }
    a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
        top: auto;
        bottom: 5px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }
    #sidebar.active {
        margin-left: 0 !important;
    }

    #sidebar .sidebar-header h3, #sidebar .CTAs {
        display: none;
    }

    #sidebar .sidebar-header strong {
        display: block;
    }

    #sidebar ul li a {
        padding: 20px 10px;
    }

    #sidebar ul li a span {
        font-size: 0.85em;
    }
    #sidebar ul li a i {
        margin-right:  0;
        display: block;
    }

    #sidebar ul ul a {
        padding: 10px !important;
    }

    #sidebar ul li a i {
        font-size: 1.3em;
    }
    #sidebar {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}
 

obrigado desde já.

 

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Alterei o <head> assim:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="shortcut icon" href="/img/pngwing.com.png">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <!-- -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">

  <title>Escola Bíblica</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!--script src="/js/Aula30.js" defer></script-->
  <link rel="stylesheet" href="style.css"> <!-- -->
<!-- -->
</head>

E também alterei o final do <body>

 

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <!-- -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
      <!--script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script-->

      <script type="text/javascript">
        $(document).ready(function () {
          $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
          });
        });
      </script>

</body>

 

Captura de tela 2024-01-26 234551.png

Captura de tela 2024-01-26 234615.png

Captura de tela 2024-01-26 234639.png

Captura de tela 2024-01-26 234715.png

Edited by Frank K Hosaka
Link to comment
Share on other sites

  • 0

CSS não é a minha praia, eu faço tudo por tentativa e erro desde 2020.

Pelo que eu entendi, quem define a aparência é o arquivo style.css junto com o Bootstrap 3.3.7. Para dar vida ao conjunto, precisei do JQuery 3.3.7.

O Bootstrap está na versão 5.2.3, mas colocar junto com o 3.3.7, isso só da confusão.

Eu não sei de onde veio esse arquivo style.css, mas enfim a minha conclusão de amador é que tem css e js demais, eu tirei o máximo que eu pude para fazer o arquivo funcionar.

Na minha opinião, o correto é trabalhar com um conjunto de css e js, tipo Bootstrap 5.2.3, e esquecer o JQuery e outros estilos particulares, mas eu sou amador. Para testar, usei esses códigos:
 

arquivo Index.php
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="style.css"><!--formata as divs wraper em preto e branco-->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><!--suporte p/ o código no final do body-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
  <title>Escola Bíblica</title> 
</head>

<body>

<div class="wrapper">
  <!-- Sidebar Holder -->
  <nav class="sidebar-header" id="sidebar">
    <div class="sidebar-header">
    <h3>Instituto Servos</h3>
    <strong>EBD</strong>
    <h3>Escola Bíblica Dominical</h3>
    </div>

    <ul class="list-unstyled components">
      <li>
      <a href="#pageSubmenu1" data-toggle="collapse" aria-expanded="false">
      <i class="bi bi-archive"></i>Secretaria</a>
      <ul class="collapse list-unstyled" id="pageSubmenu1">
      <li><a href="form.html">Matrícula</a></li>
      <li><a href="listar_matric.html">Matriculados</a></li>
      <li><a href="#">Financeiro</a></li>
      <li><a href="#">Boletim</a></i></li>
      <li><a href="#">Contato</a></li>
      <li><a href="#">Certificados</a></li>
      </ul>
      </li>
      
  </nav>

  <div id="content">
    <nav class="navbar navbar-default col-11" id="menu-superior">

    <div class="container d-inline-block">
      <div class="navbar-header">
      <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
      <i class="glyphicon glyphicon-align-left"></i>
      <span>Menu Lateral</span>
      </button>
      </div>

      <div class="collapse navbar-collapse me-2 p-1" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right d-lg-inline-block m-1">
          <li><a href="#">Home</a></li>
          <li><a href="#">Cursos</a></li>
          <li><a href="#">Contato</a></li>
          <li><a type="button" data-toggle="modal" data-target="#cadastrarModal">
          Cadastrar
          </a></li>
          <li><a href="entrar_aluno.html">Sou Aluno</a></li>
          <li><a href="entrar_professor.html">Sou Professor</a></li>
        </ul>
      </div>
    </div>
    </nav>

    <script type="text/javascript">
        $(document).ready(function () {
          $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
          });
        });
      </script>

</body>
</html>
  
---------------------------------------------------------------------------------------------------------
arquivo style.css
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
a, a:hover, a:focus {color: inherit;text-decoration: none;transition: all 0.3s;}
body {font-family: 'Poppins', sans-serif;background: #fafafa;}
i, span {display: inline-block;}
.navbar {padding: 15px 10px;background: #fff;border: none;
    border-radius: 0;margin-bottom: 40px;box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);}
.navbar-btn {box-shadow: none;outline: none !important;border: none;}
p {font-family: 'Poppins', sans-serif;font-size: 1.1em;font-weight: 300;
    line-height: 1.7em;color: #999;}
.line {width: 100%;height: 1px;border-bottom: 1px dashed #ddd;margin: 40px 0;}

/*  SIDEBAR STYLE */
.wrapper {display: flex;align-items: stretch;}

#sidebar {min-width: 250px;max-width: 250px;background: #050505;
    color: #fff;transition: all 0.3s;}
#sidebarCollapse{color: #f9f9ff;background-color: #050505;}
#sidebarCollapse:hover{background-color: #f78707;color: #050505;}
#sidebar.active {min-width: 80px;max-width: 80px;text-align: center;}
#sidebar.active .sidebar-header h3, #sidebar.active .CTAs {display: none;}
#sidebar.active .sidebar-header strong {display: block;}
#sidebar ul li a {text-align: left;}
#sidebar.active ul li a {padding: 20px 10px;text-align: center;font-size: 0.85em;}
#sidebar.active ul li a i {margin-right:  0;display: block;font-size: 1.8em;margin-bottom: 5px;}
#sidebar.active ul ul a {padding: 10px !important;}
#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
    top: auto;bottom: 5px;right: 50%;-webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);transform: translateX(50%);}
#sidebar .sidebar-header {padding: 20px;background: #0c0c0c;}
#sidebar .sidebar-header strong {display: none;font-size: 1.8em;}
#sidebar ul.components {padding: 20px 0;border-bottom: 1px solid #ec680f;}
#sidebar ul li a {padding: 10px;font-size: 1.1em;display: block;}
#sidebar ul li a:hover {color: #f0a80e;background: #fff;}
#sidebar ul li a i {margin-right: 10px;}
#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;background: #353536;}
a[data-toggle="collapse"] {position: relative;}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
    content: '\e259';display: block;position: absolute;right: 20px;
    font-family: 'Glyphicons Halflings';font-size: 0.6em;}
a[aria-expanded="true"]::before {content: '\e260';}
ul ul a {font-size: 0.9em !important;padding-left: 30px !important;
    background: #58585a;}
ul.CTAs {padding: 20px;}
ul.CTAs a {text-align: center;font-size: 0.9em !important;
    display: block;border-radius: 5px;margin-bottom: 5px;}
a.download {background: #fff;color: #545557;}
a.article, a.article:hover {background: #2d2d30 !important;
    color: #fff !important;}
.navbar.navbar-default{background-color: #2a2a2b;
    color: #999;}
#bs-example-navbar-collapse-1 ul li{background-color: #000000;}
#bs-example-navbar-collapse-1 ul li a{color: #ddd;}
#bs-example-navbar-collapse-1 a:hover{background-color: #f78707;
    color: #050505;transition: all 0.3s;}

/* CONTENT STYLE */
#content {padding: 20px;min-height: 100vh;transition: all 0.3s;}

/* MEDIAQUERIES */
@media (max-width: 768px) {
    #sidebar {min-width: 80px;max-width: 80px;text-align: center;
        margin-left: -80px !important ;}
    a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
        top: auto;bottom: 5px;right: 50%;-webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);transform: translateX(50%);}
    #sidebar.active {margin-left: 0 !important;}
    #sidebar .sidebar-header h3, #sidebar .CTAs {display: none;}
    #sidebar .sidebar-header strong {display: block;}
    #sidebar ul li a {padding: 20px 10px;}
    #sidebar ul li a span {font-size: 0.85em;}
    #sidebar ul li a i {margin-right:  0;display: block;}
    #sidebar ul ul a {padding: 10px !important;}
    #sidebar ul li a i {font-size: 1.3em;}
    #sidebar {margin-left: 0;}
    #sidebarCollapse span {display: none;}
}

 

Edited by Frank K Hosaka
Link to comment
Share on other sites

  • 0

Aqui eu apresento um código que usa apenas o Bootstrap, a gramática dele não é nada fácil. Tem hora que eu não consigo encontrar o efeito desejado (tipo diminuir a "linha" do Bootstrap), e é aí que eu começo criar o meu CSS personalizado (geralmente no marcador <style></style> ao invés de usar usar um arquivo style.css). O problema de usar outras fontes de estilos é que isso vai gerar conflitos.

Levei um bom tempo para usar o Bootstrap, eu baixava os exemplos e ele não funcionava, até que eu aprendi a criar um link no cdn. Enfim, cada CSS disponível tem os seus truques.

Eu gosto bastante do Bootstrap. O problema é que eu quero estudar o Laravel, mas ele foi projetado para trabalhar com o CSS Tailwind. Em 2023, eu aluguei o servidor tipo compartilhado, lá não havia como trabalhar com o CSS Tailwind. Em 2024, mudei o tipo do servidor para VPS, agora sim vou poder estudar o Laravel mais a fundo.

O exemplo que segue só tem texto, não tem ícone, não tem imagem, não tem fonte. É claro que o Bootstrap trabalha com tudo isso, mas isso eu deixo a seu critério escolher ou não o Bootstrap:

<!doctype html>
<html lang="en" data-bs-theme="auto">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.118.2">
    <title>Escola Bíblica</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </head>
<body>
<main class="d-flex flex-nowrap">
  <div class="flex-shrink-0 p-3" style="width: 280px;">
    <a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
      <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
      <span class="fs-5 fw-semibold">Instituto Servos<br>Escola Bíblica Dominical</span>
    </a>
    <ul class="list-unstyled ps-0">
      <li class="mb-1">
        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
          Secretaria
        </button>
        <div class="collapse show" id="home-collapse">
          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Matrícula</a></li>
            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Matriculados</a></li>
            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Financeiro</a></li>
          </ul>
        </div>
      </li>
      <li class="mb-1">
        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
          Área do Aluno
        </button>
        <div class="collapse" id="dashboard-collapse">
          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Cadastrar</a></li>
            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Editar</a></li>
            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Resultado</a></li>
           </ul>
        </div>
      </li>
      <li class="mb-1">
        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
          Classes
        </button>
        <div class="collapse" id="orders-collapse">
          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Adulto</a></li>
            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Jovens</a></li>
            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Adolescente</a></li>
          </ul>
        </div>
      </li>
      <li class="border-top my-3"></li>
      <li class="mb-1">
        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
          Revistas
        </button>
        <div class="collapse" id="account-collapse">
          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">2024</a></li>
            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">2023</a></li>
            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">2022</a></li>
            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">2021</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</main>
</body>
</html>

 

Edited by Frank K Hosaka
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.8k
×
×
  • Create New...