How to leave the header from a fixed menu

Asked

Viewed 540 times

1

I have the following menu:

How do I stop when I click on some link it open the content under the menu, always leaving 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>

html css

1 answer

2


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

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 the pages HTML you don’t need to have the whole structure, only the contents formatted.

Browser other questions tagged html css

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