Problems with the responsiveness of a retractable menu

Question

Problems with the responsiveness of a retractable menu

Navigation

#1 by (1 votes)

1

How can I format correctly so that the menu that is horizontal in its full screen, stand vertically and show the sub-menus correctly? Follow the code below.

<!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%;
}



label[for="bt_menu"]{
	padding: 5px;
	background-color: #222;
	color: #fff;
	font-family: "Aria";
	text-align: center;
	font-size: 30px;
	cursor: pointer;
	width: 50px;
	height: 50px;
}


#bt_menu{
	display: none;
}

label[for="bt_menu"]{
	display: none;
	
}

@media(max-width: 800px){
	label[for="bt_menu"]{
	display: block;
	}
	
	#bt_menu:checked ~ .menu{
		margin-left: 0;
	}
	
	.menu{
		margin-top: -17px;
		margin-left: -100%;
		transition: all .4s;
		
	}
	
	
	.menu ul li{
		width: 100%;
		float: none;
	}
	.menu ul ul{
	position: static;
	overflow: hidden;
	max-height: 0;
	transition: all .4s;
	}
	.menu ul li:hover ul{
		height: auto;
		max-height: 200px;
		
	}
}

</style>
</head>
<body>

<div class="cont">

<header>

   <h1>PCI-HELP</h1>
</header>
<script type="text/javascript">
function clickLink(link){
	document.getElementById("iframeTeste").src = link;
}
</script>

  </div>
  <input type="checkbox" id="bt_menu">
<label for="bt_menu">&#9776;</label>
<nav class="menu">
  <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="#" onclick="clickLink('CaixaSeparacao.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>	
	</nav>
	<div id="teste" >
	<iframe id="iframeTeste" style="position: absolute; border: 0;    margin-top: 72px;    width: 100%;    height: 80%;    z-index:-1;">
	</iframe>
	</div>
</body>
</html>

html css

asked by anonymous 31.10.2017 / 16:52

1 answer

How to delete files from my remote and local HEAD from my git but not delete from my disk? [duplicate] Problem in running the Visual studio debugger

score 1 · Accepted Answer

Igor, check the CodePen that I performed to solve your problem.

You can find it in > CodePen - Header & Vertical menu fixed with navigation tree (CSS Only)

CSS:

div.cont{width:100%;border:1pxsolidgray;position:fixed;}header,footer{padding:12px;color:white;background-color:#34495e;clear:left;text-align:center;font-family:TitilliumWeb,sans-serif;position:fixed;width:100%;height:77px;}img{width:50px;height:50px;}body,.menu,.sub-menu,.sub-menu2{margin:0;padding:0;width:10%;position:absolute;}.clearfix:after{content:'.';display:inline;clear:left;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden;}.clearfix{display:flex;flex-direction:column;justify-content:left;align-items:left;}.menu,.sub-menu,.sub-menu2{list-style:none;background:#000;width:auto;height:100%;position:fixed;margin-top:50px;}.sub-menu{background:#444;}.menua{text-decoration:none;display:block;padding:10px;color:#fff;font-family:TitilliumWeb,sans-serif;font-size:11.5px;font-weight:200;}.menuli{position:relative;}.menu>li{float:left;}.menu>li:hover{background:#444;width:100%;}.menuli:hover>.sub-menu{display:inline-block;margin-top:-100%;margin-left:100%;}.sub-menu{display:none;position:absolute;min-width:190px;height:auto;}.sub-menuli:hover{background:#555;}.sub-menu.sub-menu{top:0;left:100%;}.menuli:hover>.sub-menu2{display:inline-block;margin-top:-50%;margin-left:100%;}.sub-menu2{display:none;position:absolute;min-width:190px;height:auto;}.sub-menu2li:hover{background:#555;}.sub-menu2.sub-menu2{top:0;left:100%;}.sub-menu2{background:#444;}label[for="bt_menu"]{
    padding: 5px;
    background-color: #222;
    color: #fff;
    font-family: "Aria";
    text-align: center;
    font-size: 30px;
    cursor: pointer;
    width: 50px;
    height: 50px;
}
#bt_menu{
    display: none;
}
label[for="bt_menu"]{
      display: none;
}
@media(max-width: 800px){
    label[for="bt_menu"]{
      display: block;
    }
    #bt_menu:checked ~ .menu{
        margin-left: 0;
    }
    .menu{
        margin-top: -17px;
        margin-left: -100%;
        transition: all .4s;

    }
    .menu ul li{
        width: 100%;
        float: none;
    }
    .menu ul ul{
    position: static;
    overflow: hidden;
    max-height: 0;
    transition: all .4s;
    }
    .menu ul li:hover ul{
        height: auto;
        max-height: 200px;
    }
}

HTML:

<header>

   <h1>HEADER FIXED & VERTICAL MENU RELATIVE</h1>
</header>
<div class="cont">


<script type="text/javascript">
function clickLink(link){
    document.getElementById("iframeTeste").src = link;
}
</script>

  </div>
  <input type="checkbox" id="bt_menu">
<label for="bt_menu">&#9776;</label>
<nav class="menu">
  <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-menu2">
                    <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-menu2">
                    <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="#" onclick="clickLink('CaixaSeparacao.html')">Caixa Separação</a></li>
                 </ul>
            <li><a href="#">Fiscal</a>
                <ul class="sub-menu2">
                    <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-menu2">
                    <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-menu2">
                    <li><a href="#">Áreas</a></li>
                    <li><a href="#">Tipo de Ocorrências</a></li>
                </ul>
            <li><a href="#">Objetivos</a>
            <ul class="sub-menu2">
                    <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-menu2">
                            <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-menu2">
                        <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-menu2">
                        <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-menu2">
                        <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-menu2">
                        <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-menu2">
                        <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-menu2">
                        <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-menu2">
                        <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-menu2">
                        <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-menu2">
                        <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-menu2">
                        <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-menu2">
                        <li><a href="#">Parâmetros</a></li>
                        <li><a href="#">Resgate</a></li>
                    </ul>   
                <li><a href="#">Fidelidade</a>
                    <ul class="sub-menu2">
                        <li><a href="#">Anistia</a></li>
                        <li><a href="#">Premiação</a></li>
                    </ul>
                    </ul>   
    </ul>   
    </nav>

    </div>