How to leave the header of a fixed menu

1

I have the following menu:

How do I do when I click on a link it opens the content under the menu, always leaving it fixed?

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<head>
<style>
div.cont {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: #34495e;
    clear: left;
    text-align: center;
	font-family: Titillium Web, sans-serif;
}
img{
width: 50px;
height: 50px;
}
body, 
.menu,
.sub-menu {
    margin: 0;
    padding: 0;

}
.clearfix:after{
    content: '.';
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
}
.clearfix{
display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
}
.menu,
.sub-menu {
    list-style: none;
    background: #000;
	width: 100%;
}

.sub-menu {
    background: #444;
	
}
.menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #fff;
    font-family: Titillium Web, sans-serif;
    font-size: 11.5px;
    font-weight: 200;
	
}
.menu li {
    position: relative;
}
.menu > li {
    float: left;
	
}
.menu > li:hover {
    background: #444;
	
}
.menu li:hover > .sub-menu {
    display: block;
	
}
.sub-menu {
    display: none;
    position: absolute;
    min-width: 190px;
	
}
.sub-menu li:hover {
    background: #555;
}
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

</style>
</head>
<body>

<div class="cont">

<header>

   <h1>PCI-HELP</h1>
</header>
  </div>
  
  <div class="menu-container">
    <ul class="menu clearfix">
        <li><a href="#">FORÇA VENDAS</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
                <li><a href="#">Clientes</a>
				<li><a href="#">Divisão</a>
				<li><a href="#">Setor</a>
				<li><a href="#">Grupo Faturamento</a>
				<li><a href="#">Tipo Cliente</a>
			   </ul>
		<li><a href="#">CADASTRO</a>	
			<ul class="sub-menu clearfix">
			<li><a href="#">Empresa</a>
			<li><a href="#">Produtos</a>
			<li><a href="#">Fornecedores</a>
			<li><a href="#">Grupo Produto</a>
				 <ul class="sub-menu">
                    <li><a href="#">Família</a></li>
					<li><a href="#">Linha</a></li>
					<li><a href="#">Categoria</a></li>
					<li><a href="#">Aplicação</a></li>
					<li><a href="#">Categoria E-Commerce</a></li>
					<li><a href="#">Sub-Categoria E-Commerce</a></li>
					<li><a href="#">Categoria PCI.APP</a></li>
					<li><a href="#">Sub-Categoria PCI.APP</a></li>
					</ul>
			<li><a href="#">Logística</a>
				 <ul class="sub-menu">
					<li><a href="#">Transportadores</a></li>
					<li><a href="#">Países</a></li>
					<li><a href="#">Municípios</a></li>
					<li><a href="#">Manutenção CEP</a></li>
					<li><a href="#">Fretes</a></li>
					<li><a href="C:\Users\Igor.Carreiro\Desktop\Nova pasta\PCI.HELP\Cadastro\Logistica\Caixa Separação.html">Caixa Separação</a></li>
				 </ul>
			<li><a href="#">Fiscal</a>
				<ul class="sub-menu">
					<li><a href="#">Estados</a></li>
					<li><a href="#">Base Legal</a></li>
					<li><a href="#">Base Legal por UF</a></li>
					<li><a href="#">Transação Fiscal</a></li>
					<li><a href="#">Desmembramento de TRC</a></li>
					<li><a href="#">Imposto por NCM e Estado</a></li>
					<li><a href="#">Imposto por Produto e Estado</a></li>
				 </ul>
			<li><a href="#">Financeiro</a>
				<ul class="sub-menu">
					<li><a href="#">Formas de Pagamento</a></li>
					<li><a href="#">Feriados</a></li>
					<li><a href="#">Bancos</a></li>
				</ul>	
			<li><a href="#">Ocorrência WEB</a>
				<ul class="sub-menu">
					<li><a href="#">Áreas</a></li>
					<li><a href="#">Tipo de Ocorrências</a></li>
				</ul>
			<li><a href="#">Objetivos</a>
			<ul class="sub-menu">
					<li><a href="#">Divisão / Setor</a></li>
					<li><a href="#">Ciclo</a></li>
				</ul>
			</ul>
		<li><a href="#">PLANEJAMENTO</a>
				<ul class="sub-menu clearfix">
				<li><a href="#">Calendário</a></li>
				<li><a href="#">Preços</a></li>
				<li><a href="#">Montagem Kit</a></li>
				<li><a href="#">Ofertas</a>
						 <ul class="sub-menu">
							<li><a href="#">Oferta Produto</a></li>
							<li><a href="#">Oferta Grupo</a></li>
							<li><a href="#">Oferta Atividade</a></li>
							<li><a href="#">Oferta Catálogo</a></li>
							<li><a href="#">Oferta Valor</a></li>
						</ul>	
				<li><a href="#">Material de Apoio</a></li>
				<li><a href="#">Troca Frete</a></li>
				<li><a href="#">Cota Produto</a></li>
				<li><a href="#">Transferência</a>
					<ul class="sub-menu">
						<li><a href="#">Transferência de Divisão</a></li>
						<li><a href="#">Transferência de Setor</a></li>
						<li><a href="#">Transação de Indicante</a></li>
					</ul>	
				</ul>
		<li><a href="#">PEDIDOS</a>
			<ul class="sub-menu clearfix">
				<li><a href="#">Pedido Venda</a></li>
				<li><a href="#">Pendências</a></li>
				<li><a href="#">Reorder</a></li>
				<li><a href="#">Picking List</a></li>
			</ul>
			
		<li><a href="#">FATURAMENTO</a>	
			<ul class="sub-menu clearfix">
				<li><a href="#">Pré-Faturamento</a>
					<ul class="sub-menu">
						<li><a href="#">Conciliação de Pedidos</a></li>
						<li><a href="#">Envio de Pedidos</a></li>
						<li><a href="#">Acompanhamento</a></li>
						<li><a href="#">Log Pré-Faturamento</a></li>
					</ul>
				<li><a href="#">Liberação de Pedidos</a>
					<ul class="sub-menu">
						<li><a href="#">Agendada</a></li>
						<li><a href="#">Manual</a></li>
						<li><a href="#">Estatística Faturamento</a></li>
						<li><a href="#">Log Faturamento</a></li>
						<li><a href="#">Modelo Log</a></li>
					</ul>
				<li><a href="#">Operações</a></li>
				<li><a href="#">Notas Diversas</a></li>
				<li><a href="#">Configurações NFe</a></li>
				<li><a href="#">Notas de Débito</a>
					<ul class="sub-menu">
						<li><a href="#">Motivos</a></li>
						<li><a href="#">Emitir / Cancelar</a></li>
						<li><a href="#">Relatórios</a></li>
					</ul>
			</ul>
		<li><a href="#">FINANCEIRO</a>	
			<ul class="sub-menu clearfix">	
				<li><a href="#">Lanc. Futuros</a></li>
				<li><a href="#">Contas a Receber</a>
					<ul class="sub-menu">
						<li><a href="#">Gerenciamento de Títulos</a></li>
						<li><a href="#">Arquivo CNAB Remessa</a></li>
						<li><a href="#">Arquivo CNAB Retorno</a></li>
						<li><a href="#">Ocorrência Financeiras</a></li>
					</ul>
				<li><a href="#">Contas a Pagar</a>
					<ul class="sub-menu">
						<li><a href="#">Gerenciamento de Títulos</a></li>
						<li><a href="#">Arquivo CNAB Remessa</a></li>
						<li><a href="#">Arquivo CNAB Retorno</a></li>
						<li><a href="#">Ocorrência Financeiras</a></li>
					</ul>
				<li><a href="#">Cobrança</a>
					<ul class="sub-menu">
						<li><a href="#">Agências de Cobrança</a></li>
						<li><a href="#">Regras de Parcelamento de Dívidas</a></li>
						<li><a href="#">Limite de Negociação por Usuário</a></li>
						<li><a href="#">Renegociação de Dívidas</a></li>
						<li><a href="#">Modelo Carta de Cobrança</a></li>
						<li><a href="#">Gestão Carta de Cobrança</a></li>
					</ul>
			</ul>
		<li><a href="#">ESTOQUE</a>
			<ul class="sub-menu clearfix">	
				<li><a href="#">Áreas</a></li>
				<li><a href="#">Destinos</a></li>
				<li><a href="#">Locais</a></li>
				<li><a href="#">Movimentação</a>
					<ul class="sub-menu">
						<li><a href="#">Entrada / Retorno</a></li>
						<li><a href="#">Saída</a></li>
						<li><a href="#">Histórico</a></li>
					</ul>
				<li><a href="#">Inventário</a>
					<ul class="sub-menu">
						<li><a href="#">Contagem</a></li>
						<li><a href="#">Digitação</a></li>
					</ul>
			</ul>
		<li><a href="#">RELATÓRIOS</a>	
			<ul class="sub-menu clearfix">
				<li><a href="#">Listagens</a></li>
				<li><a href="#">Faturamento</a></li>
				<li><a href="#">Estoque</a></li>
				<li><a href="#">Exportação</a></li>
				<li><a href="#">Gerencias</a>
					<ul class="sub-menu">
						<li><a href="#">Acompanhamento de Pedidos</a></li>
						<li><a href="#">Rankings</a></li>
						<li><a href="#">Indicações</a></li>
						<li><a href="#">Análise de Produtos</a></li>
					</ul>
			</ul>
			
		<li><a href="#">DASHBOARDS</a>
		<li><a href="#">GERADOR BI</a>
		<li><a href="#">INCENTIVOS</a>
			<ul class="sub-menu clearfix">
				<li><a href="#">Parâmetros</a>
				<li><a href="#">Metas</a></li>
				<li><a href="#">Brindes</a></li>
				<li><a href="#">Apuração</a></li>
			</ul>
		<li><a href="#">VANTAGENS</a>
			<ul class="sub-menu clearfix">	
				<li><a href="#">Milhagem</a>
					<ul class="sub-menu">
						<li><a href="#">Parâmetros</a></li>
						<li><a href="#">Resgate</a></li>
					</ul>	
				<li><a href="#">Fidelidade</a>
					<ul class="sub-menu">
						<li><a href="#">Anistia</a></li>
						<li><a href="#">Premiação</a></li>
					</ul>
					</ul>	
	</ul>	
</body>
</html>
    
asked by anonymous 30.10.2017 / 20:05

1 answer

2

You can use load of jQuery to load pages html into the conteudo class.

Ex:

$(document).on('click', 'a.click', function(){
  $('.conteudo').html('')
  $('.conteudo').load('suaPagina.html')
})
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<head>
<style>
div.cont {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: #34495e;
    clear: left;
    text-align: center;
	font-family: Titillium Web, sans-serif;
}
img{
width: 50px;
height: 50px;
}
body, 
.menu,
.sub-menu {
    margin: 0;
    padding: 0;

}
.clearfix:after{
    content: '.';
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
}
.clearfix{
display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
}
.menu,
.sub-menu {
    list-style: none;
    background: #000;
	width: 100%;
}

.sub-menu {
    background: #444;
	
}
.menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #fff;
    font-family: Titillium Web, sans-serif;
    font-size: 11.5px;
    font-weight: 200;
	
}
.menu li {
    position: relative;
}
.menu > li {
    float: left;
	
}
.menu > li:hover {
    background: #444;
	
}
.menu li:hover > .sub-menu {
    display: block;
	
}
.sub-menu {
    display: none;
    position: absolute;
    min-width: 190px;
	
}
.sub-menu li:hover {
    background: #555;
}
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

</style>
</head>
<body>

<div class="cont">

<header>

   <h1>PCI-HELP</h1>
</header>
  </div>
  
  <div class="menu-container">
    <ul class="menu clearfix">
        <li><a href="#">FORÇA VENDAS</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
                <li><a href="#" class="link">Clientes</a>
				<li><a href="#" class="link">Divisão</a>
				<li><a href="#" class="link">Setor</a>
				<li><a href="#" class="link">Grupo Faturamento</a>
				<li><a href="#" class="link">Tipo Cliente</a>
			   </ul>
		<li><a href="#">CADASTRO</a>	
			<ul class="sub-menu clearfix">
			<li><a href="#">Empresa</a>
			<li><a href="#">Produtos</a>
			<li><a href="#">Fornecedores</a>
			<li><a href="#">Grupo Produto</a>
				 <ul class="sub-menu">
                    <li><a href="#">Família</a></li>
					<li><a href="#">Linha</a></li>
					<li><a href="#">Categoria</a></li>
					<li><a href="#">Aplicação</a></li>
					<li><a href="#">Categoria E-Commerce</a></li>
					<li><a href="#">Sub-Categoria E-Commerce</a></li>
					<li><a href="#">Categoria PCI.APP</a></li>
					<li><a href="#">Sub-Categoria PCI.APP</a></li>
					</ul>
			<li><a href="#">Logística</a>
				 <ul class="sub-menu">
					<li><a href="#">Transportadores</a></li>
					<li><a href="#">Países</a></li>
					<li><a href="#">Municípios</a></li>
					<li><a href="#">Manutenção CEP</a></li>
					<li><a href="#">Fretes</a></li>
					<li><a href="C:\Users\Igor.Carreiro\Desktop\Nova pasta\PCI.HELP\Cadastro\Logistica\Caixa Separação.html">Caixa Separação</a></li>
				 </ul>
			<li><a href="#">Fiscal</a>
				<ul class="sub-menu">
					<li><a href="#">Estados</a></li>
					<li><a href="#">Base Legal</a></li>
					<li><a href="#">Base Legal por UF</a></li>
					<li><a href="#">Transação Fiscal</a></li>
					<li><a href="#">Desmembramento de TRC</a></li>
					<li><a href="#">Imposto por NCM e Estado</a></li>
					<li><a href="#">Imposto por Produto e Estado</a></li>
				 </ul>
			<li><a href="#">Financeiro</a>
				<ul class="sub-menu">
					<li><a href="#">Formas de Pagamento</a></li>
					<li><a href="#">Feriados</a></li>
					<li><a href="#">Bancos</a></li>
				</ul>	
			<li><a href="#">Ocorrência WEB</a>
				<ul class="sub-menu">
					<li><a href="#">Áreas</a></li>
					<li><a href="#">Tipo de Ocorrências</a></li>
				</ul>
			<li><a href="#">Objetivos</a>
			<ul class="sub-menu">
					<li><a href="#">Divisão / Setor</a></li>
					<li><a href="#">Ciclo</a></li>
				</ul>
			</ul>
		<li><a href="#">PLANEJAMENTO</a>
				<ul class="sub-menu clearfix">
				<li><a href="#">Calendário</a></li>
				<li><a href="#">Preços</a></li>
				<li><a href="#">Montagem Kit</a></li>
				<li><a href="#">Ofertas</a>
						 <ul class="sub-menu">
							<li><a href="#">Oferta Produto</a></li>
							<li><a href="#">Oferta Grupo</a></li>
							<li><a href="#">Oferta Atividade</a></li>
							<li><a href="#">Oferta Catálogo</a></li>
							<li><a href="#">Oferta Valor</a></li>
						</ul>	
				<li><a href="#">Material de Apoio</a></li>
				<li><a href="#">Troca Frete</a></li>
				<li><a href="#">Cota Produto</a></li>
				<li><a href="#">Transferência</a>
					<ul class="sub-menu">
						<li><a href="#">Transferência de Divisão</a></li>
						<li><a href="#">Transferência de Setor</a></li>
						<li><a href="#">Transação de Indicante</a></li>
					</ul>	
				</ul>
		<li><a href="#">PEDIDOS</a>
			<ul class="sub-menu clearfix">
				<li><a href="#">Pedido Venda</a></li>
				<li><a href="#">Pendências</a></li>
				<li><a href="#">Reorder</a></li>
				<li><a href="#">Picking List</a></li>
			</ul>
			
		<li><a href="#">FATURAMENTO</a>	
			<ul class="sub-menu clearfix">
				<li><a href="#">Pré-Faturamento</a>
					<ul class="sub-menu">
						<li><a href="#">Conciliação de Pedidos</a></li>
						<li><a href="#">Envio de Pedidos</a></li>
						<li><a href="#">Acompanhamento</a></li>
						<li><a href="#">Log Pré-Faturamento</a></li>
					</ul>
				<li><a href="#">Liberação de Pedidos</a>
					<ul class="sub-menu">
						<li><a href="#">Agendada</a></li>
						<li><a href="#">Manual</a></li>
						<li><a href="#">Estatística Faturamento</a></li>
						<li><a href="#">Log Faturamento</a></li>
						<li><a href="#">Modelo Log</a></li>
					</ul>
				<li><a href="#">Operações</a></li>
				<li><a href="#">Notas Diversas</a></li>
				<li><a href="#">Configurações NFe</a></li>
				<li><a href="#">Notas de Débito</a>
					<ul class="sub-menu">
						<li><a href="#">Motivos</a></li>
						<li><a href="#">Emitir / Cancelar</a></li>
						<li><a href="#">Relatórios</a></li>
					</ul>
			</ul>
		<li><a href="#">FINANCEIRO</a>	
			<ul class="sub-menu clearfix">	
				<li><a href="#">Lanc. Futuros</a></li>
				<li><a href="#">Contas a Receber</a>
					<ul class="sub-menu">
						<li><a href="#">Gerenciamento de Títulos</a></li>
						<li><a href="#">Arquivo CNAB Remessa</a></li>
						<li><a href="#">Arquivo CNAB Retorno</a></li>
						<li><a href="#">Ocorrência Financeiras</a></li>
					</ul>
				<li><a href="#">Contas a Pagar</a>
					<ul class="sub-menu">
						<li><a href="#">Gerenciamento de Títulos</a></li>
						<li><a href="#">Arquivo CNAB Remessa</a></li>
						<li><a href="#">Arquivo CNAB Retorno</a></li>
						<li><a href="#">Ocorrência Financeiras</a></li>
					</ul>
				<li><a href="#">Cobrança</a>
					<ul class="sub-menu">
						<li><a href="#">Agências de Cobrança</a></li>
						<li><a href="#">Regras de Parcelamento de Dívidas</a></li>
						<li><a href="#">Limite de Negociação por Usuário</a></li>
						<li><a href="#">Renegociação de Dívidas</a></li>
						<li><a href="#">Modelo Carta de Cobrança</a></li>
						<li><a href="#">Gestão Carta de Cobrança</a></li>
					</ul>
			</ul>
		<li><a href="#">ESTOQUE</a>
			<ul class="sub-menu clearfix">	
				<li><a href="#">Áreas</a></li>
				<li><a href="#">Destinos</a></li>
				<li><a href="#">Locais</a></li>
				<li><a href="#">Movimentação</a>
					<ul class="sub-menu">
						<li><a href="#">Entrada / Retorno</a></li>
						<li><a href="#">Saída</a></li>
						<li><a href="#">Histórico</a></li>
					</ul>
				<li><a href="#">Inventário</a>
					<ul class="sub-menu">
						<li><a href="#">Contagem</a></li>
						<li><a href="#">Digitação</a></li>
					</ul>
			</ul>
		<li><a href="#">RELATÓRIOS</a>	
			<ul class="sub-menu clearfix">
				<li><a href="#">Listagens</a></li>
				<li><a href="#">Faturamento</a></li>
				<li><a href="#">Estoque</a></li>
				<li><a href="#">Exportação</a></li>
				<li><a href="#">Gerencias</a>
					<ul class="sub-menu">
						<li><a href="#">Acompanhamento de Pedidos</a></li>
						<li><a href="#">Rankings</a></li>
						<li><a href="#">Indicações</a></li>
						<li><a href="#">Análise de Produtos</a></li>
					</ul>
			</ul>
			
		<li><a href="#">DASHBOARDS</a>
		<li><a href="#">GERADOR BI</a>
		<li><a href="#">INCENTIVOS</a>
			<ul class="sub-menu clearfix">
				<li><a href="#">Parâmetros</a>
				<li><a href="#">Metas</a></li>
				<li><a href="#">Brindes</a></li>
				<li><a href="#">Apuração</a></li>
			</ul>
		<li><a href="#">VANTAGENS</a>
			<ul class="sub-menu clearfix">	
				<li><a href="#">Milhagem</a>
					<ul class="sub-menu">
						<li><a href="#">Parâmetros</a></li>
						<li><a href="#">Resgate</a></li>
					</ul>	
				<li><a href="#">Fidelidade</a>
					<ul class="sub-menu">
						<li><a href="#">Anistia</a></li>
						<li><a href="#">Premiação</a></li>
					</ul>
					</ul>	
	</ul>	
    
    <section class="conteudo">
        Conteudo inicial
    </section>
    
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    
</body>
</html>

On pages HTML you do not need to have the entire structure, just the formatted content.

    
30.10.2017 / 20:34