Jump to content
Vitor Correa

Como fazer com que o menu do meu documento apareça em todas as páginas sem ter que ficar copiando e colando?

Recommended Posts

Olá, estou criando uma página em html e estou tendo dificuldade em achar uma solução para esse problema, como faço para que o menu fique fixo em todas as páginas desse site sem que seja necessário refazer todo o código? Segue abaixo o código do meu menu e do css:

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./../css/header.css">
	<title></title>
</head>
<body>
	<header>
		<img src="./../img/fundo.png">
		<nav>
			<ul>
				<li><a href="sla.html" class="active">Início</a></li>
				<li><a href="pps.html">Teste</a></li>
				<li><a href="#">Teste</a></li>
				<li><a href="#">Teste</a></li>
				<li><a href="#">Teste</a></li>
			</ul>
		</nav>
	</header>
</body>
</html>
img {
	width: 100px;
}
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	font-weight: bold;
}
li {
	float: left;
	border-right: 0px solid #333;
}
li: last-child {
	border-right: none;
}
li a {
	display: block;
	padding: 10px 15px;
	color: white;
	text-align: center;
	text-decoration: none;
}
li a:hover:not(.active){
	background-color: #111;
}
.active {
	background-color: #FF0000;
	float: right;
	color: #111;
}

 

Share this post


Link to post
Share on other sites

@Vitor Correa

 

Você pode usar o PHP para isso, extrair o código do menu que será usado em todas as páginas e colocar ele apenas em um arquivo PHP, dessa forma a manutenção do seu código será mais fácil e não terá repetições de códigos.

 

Crie o arquivo: menu.php com o código do menu e depois em cada página faça a chamada com o INCLUDE ou REQUIRE

 

<body>
	<?php require 'menu.php'; ?:
</body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Bruno Goedert Dalmolin
      Fala devs Beleza? Estou com uma duvida em como eu movimento meu menu para o canto, pois ele fica travado no centro. Os dados são os seguintes: 
      do HTML:
       
      <header>
          <ul id="Menu">
              <li><a href="SmartAce-Home.html">Home</a></li>
              <li><a href="">Sobre</a></li>
              <li><a href="">Contato</a></li>
          </ul>
      </header>
       
      do CSS:
       
      @charset "UTF-8";
      body {
          margin: 0;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background: #112c38;
      }
      ul#Menu {
          
          text-align: center;
          margin: 0;
          padding: 0;
          display: flex;
          top: -10;
      }
      ul#Menu li{
          list-style: none;
          margin: 0 20px;
          transition: 0.5s;
      }
      ul#Menu li a{
          position: relative;
          text-decoration: none;
          padding: 5px;
          font-size: 18px;    
          font-family: sans-serif;
          color: #fff;
          text-transform: uppercase;
          transition: 0.5s;
      }
      ul#Menu:hover li a {
          transform: scale(1.4);
          opacity: .2;
          filter: blur(5px);
      }
      ul#Menu li a:hover {
          transform: scale(2);
          opacity: 1;
          filter: blur(0);
      }
      ul#Menu li a:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #ff497c;
          transition: transform 0.5s;
          transform-origin: right;
          transform: scaleX(0);
          z-index: -1;
      }
      ul#Menu li a:hover:before {
          transition: transform 0.5s;
          transform-origin: left;
          transform: scaleX(1);
      }
    • By Jefferson andre
      Ola, preciso passar uma informação via menu para o php buscar no mysql, mas não sei como proceder em enviar a informação do menu.
       
      Tenho algumas series escolares e preciso pegar a escolha do usuário via menu e então buscar o conteúdo letivo no mysql
       
      Alguém pode me dizer como proceder por favor
       
      Segue o menu:
      <style type="text/css"> <!-- .style1 { font-size: 9px; font-weight: bold; } .style14 {font-family: "Times New Roman", Times, serif; font-size: 12px; color: #FFFFFF; } .style7 {color: #FFFFFF} .style9 { font-family: "Times New Roman", Times, serif; font-size: 12px; } #Layer_topo7 { position:absolute; left:665px; top:115px; width:120px; height:22px; z-index:10; } #Layer_topo_6 { position:absolute; left:835px; top:115px; width:140px; height:22px; z-index:10; } #Layer_topo_5 { position:absolute; left:950px; top:120px; width:70px; height:22px; z-index:10; } .style15 {font-family: "Times New Roman", Times, serif; font-size: 12px; color: #FFFFFF; font-weight: bold; } #Layer_topo_3_menu { position:absolute; width:130px; height:69px; z-index:9999; left: 1057px; top: 115px; } --> </style> <title>Plataforma de cursos</title><div id="Layer_topo7"> <div align="right" class="style7"> <div align="left"> <nav> <ul class="menu"> <li class="style14"><span class="style15"><a href="#" class="style15"><strong>Series disponiveis</strong></a></span><a href="" class="style15"> do aluno</a> <ul> <li><a href="5_serie.php">5 serie - 6 ano</a></li> <li><a href="6_serie.php">6 serie - 7 ano</a></li> <li><a href="7_serie.php">7 serie - 8 ano</a></li> <li><a href="8_serie.php">8 serie - 9 ano</a></li> <li class="separador"></li> <li><a href="1_ano_medio.php">1 ano do ensino medio</a></li> <li><a href="2_ano_medio.php">2 ano do ensino medio</a></li> <li><a href="3_ano_medio.php">3 ano do ensino medio</a></li> </ul> </li> </ul> </nav> </div> </div> </div> <div id="Layer_topo_6"> <div align="right" class="style7"> <div align="left"> <nav> <ul class="menu"> <li class="style14"><span class="style15"><a href="#" class="style15"><strong>Precisando de ajuda ?</strong></a></span><a href="" class="style15"></a> <ul> <li><a href="#">Duvidas frequentes</a></li> <li><a href="formulario.php">Fale conosco</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Novidades</a></li> <li><a href="#">Procurar no site</a></li> <li class="separador"></li> <li><a href="#">Sobre o site</a></li> </ul> </li> </ul> </nav> </div> </div> </div> <div id="Layer_topo_3_menu"> <div align="right" class="style7"> <div align="left"> <nav> <ul class="menu"> <li class="style14"><span class="style15"><a href="#" class="style15"><strong>&Aacute;rea do aluno</strong></a></span><a href="" class="style15"> do aluno</a> <ul> <li><a href="#">Acessar os videos</a></li> <li><a href="cadastro_aluno.php">Matricule-se</a></li> </ul> </li> </ul> </nav> </div> </div> </div>  
    • By gui127
      Oi, sou novo por aqui. Queria saber como eu posso fazer um menu de links e informações com abas usando imagens, tipo esse:


    • By Gabriel Barros Santana
      Oi, estou com uma duvida. Estava criando um meno de categorias para um site e-commerce na tray.
      Porém estou lutando para editar na plataforma da tray. Tenho um menu horizontal com os subníveis vertical porém queria editar para alterar o estilo e conteúdo mas a tray ta sendo bem estranha para mim alguma ajuda ? 
       
      Queria mudar desse menu hover normal de lista do site "JP" pra esse mais dinâmico com um caixa maior e com foto de produtos como exemplo do site "casas bahia".
       


    • By MayraAmaral
      HTML
       
      <!DOCTYPE hmtl>
      <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">
          <title>DaHora Software</title>
          <link rel="stylesheet" href="css/styles.css">
          
          <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
          <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
          <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet">
          
          
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
          <script type="text/javascript">
          jQuery(document).ready(function(){
          jQuery("#subirTopo").hide();
          jQuery('a#subirTopo').click(function () {
                   jQuery('body,html').animate({
                     scrollTop: 0
                   }, 800);
                  return false;
             });
          jQuery(window).scroll(function () {
                   if (jQuery(this).scrollTop() > 200) {
                      jQuery('#subirTopo').fadeIn();
                   } else {
                      jQuery('#subirTopo').fadeOut();
                   }
               });
          });
          </script>

      </head>
          
      <body>
          <header>
              
              <input type="checkbox" id="btn-menu">
              <label for="btn-menu"><img src="img/menu_icon_verde.png" width="30" height="30"></label>
                  
              <div class="logo">
                  <a href="#"><img src="img/logo.png" width="250" height="150"></a>
              </div>
              
                  <nav class="menu"> 
                      <ul>
                          <li><a href="#empresa">NOSSA EMPRESA</a></li>
                          <li><a href="#cursos">CURSOS</a></li>
                          <li><a href="#sites">SITES</a></li>
                          <li><a href="#sistemas">SISTEMAS</a></li>
                          <li><a href="#contato">FALE CONOSCO</a></li>
                      </ul>
                  </nav>
              
          </header>
          
          <div class="empresa">
              <h1 id="empresa"> NOSSA EMPRESA </h1>
          
          </div>
          
          <div class="cursos">
              <h1 id="cursos"> CURSOS </h1>
          
          </div>
          
          <div class="sites">
              <h1 id="sites"> SITES </h1>
          
          </div>
          
          <div class="sistemas">
              <h1 id="sistemas"> SISTEMAS </h1>
          
          </div>
          
          <div class="contato">
              <h1 id="contato"> FALE CONOSCO </h1>
          
          </div>
          
          <footer>
              <a id="subirTopo"> <img src="img/seta.png"” alt=”some text”  width="100" height="100">
                  </a>
          </footer>
      </body>
      </html>
       
      CSS
       
      *{
          margin: 0;
          padding: 0;
      }
      body{
          font-family: 'Poppins', sans-serif;
      }
      header{
          width: 100%;
          height: 150px;
          background-color: black;
      }
      #btn-menu{
          display: none;
      }
      header label{
          display: none;
          width: 30px;
          height: 30px;
          padding: 10px;
          border-right: 1px solid green;
      }
      header label:hover{
          cursor: pointer;
          background: rgba(0,0,0,0.3);
      }
      .menu ul{
          margin: 0;
          list-style: none;
          padding: 0;
          display: flex;
          justify-content: flex-end;
          align-items: flex-end;
          
      }
      .titulo li a{
          font-family: 'Alfa Slab One', cursive;
          font-size: 50pt;
          text-decoration: none;
          color: darkgreen;
          padding: 50px 50px;
      }
      .menu li{
          border-right: 1px solid #fff;
      }
      .menu li a{
          display: block;
          padding: 15px 20px;
          color: #fff;
          text-decoration: none;
          font-family: 'Alfa Slab One', cursive;
          font-size: 12pt;
      }
      . menu li:hover{
           background: rgba(0,0,0,0.3);
      }
      a img{
          display: inline-flex;
      }
      @media (max-width:768px){
          header label{
              display: block;
          }
          
          .menu{
              position: absolute;
              background-color: #000;
              width: 70%;
              margin-left: -70%;
              transition: all 0.5s;
          }
          
          .menu ul{
              flex-direction: column;
          }
          
          .menu li{
              border-top: 1px solid #fff;
          }
          .logo a{
              justify-content: center;
              align-items: center;
              display: inline-flex;
          }
          
          header{
          height: 50px;
          background-color: black;
          }
          
          #btn-menu:checked - .menu {
              margin-right: 70px;
          }
      }
      /*
      a{
          margin: 20px;
          color: #fff;
          text-decoration:none; 
          font-family: font-family: 'Staatliches', sans-serif;
          font-size: 18pt;
      }
      */
      .empresa{
          background-color: #fff;
          width: auto;
          height: 500px;
          display: flex;
          padding: 0px 50px;
      }
      .cursos{
          background-color: #8FBC8F;
          width: auto;
          height: 500px;
          padding: 0px 50px;
      }
      .sites{
          background-color: #fff;
          width: auto;
          height: 500px;
          padding: 0px 50px;
      }
      .sistemas{
          background-color: #8FBC8F;
          width: auto;
          height: 500px;
          padding: 0px 50px;
      }
      .contato{
          background-color: #fff;
          width: auto;
          height: 500px;
          padding: 0px 50px;
      }

      footer{
          background-color: #000000;
          width: auto;
          height: 200px;
          padding: 0px 50px;
      }
      #subirTopo {
          background-repeat: no-repeat;
          bottom: 20px;
          right: 20px;
          cursor: pointer;
          padding: 0px;
          position: fixed;
      }
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.