1

Estou tentando esconder a barra de menu nav quando entra em um formulario especifico, teria como dar algum exemplo?

inserir a descrição da imagem aqui

Esse é a index do meu formulario:

    @using PagedList.Mvc;
@model PagedList.IPagedList<BlogWeb.Models.Abastecimento>
<!DOCTYPE HTML>

<p>@Html.ActionLink("Novo Abastecimento ", "Form")</p>
@Html.ActionLink("Gerar Relatório Resumo", "PeriodoResumo")

<div>
    <table id="customers">
        <thead>
            <tr>
                <th>Nº do Carro</th>
                <th>Data</th>
                <th>Km</th>
                <th>Produto</th>
                <th>Litro</th>
                <th>Valor Unitario</th>
                <th>Valor Total</th>
                <th>Usuario</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var a in Model)
            {
                <tr>
                    <td>@a.NumCarro.NCarro</td>
                    <td>@a.DtAbastecido</td>
                    <td>@a.Km</td>
                    <td>@a.Produto.NomeProduto</td>
                    <td>@a.Litro</td>
                    <td>@a.VlrUnit</td>
                    <td>@a.TotalGasto</td>
                    <td>@a.Autor.Nome</td>
                    <td>@Html.ActionLink("Remover", "Remove", new { id = a.Id }, new { @class = "icon-cancel" })</td>
                    <td>@Html.ActionLink("Atualizar", "FormUpdate", new { id = a.Id }, new { @class = "icon-edit" })</td>

                </tr>
            }
              @Html.ActionLink("Gerar Relatório por Período","FormData")
       </tbody>
    </table>
</div>
<div class="static">
    Página @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) de @Model.PageCount
</div>
        @{
            if (Model.TotalItemCount != Model.Count)
            {
                    <div class="pagination-lg">

                        @if (Model.HasPreviousPage)
                        {
                            @Html.ActionLink("<<", "Index", new
                       {
                           pagina = 1,
                           sortOrder = ViewBag.CurrentSort,
                           currentFilter = ViewBag.CurrentFilter
                       })
                            @Html.Raw(" ");
                            @Html.ActionLink("< Anterior", "Index", new
                      {
                          pagina = Model.PageNumber - 1,
                          sortOrder = ViewBag.CurrentSort,
                          currentFilter = ViewBag.CurrentFilter
                      })
                        }
                        else
                        {
                            @:<<
                            @Html.Raw(" ");
                            @:< Anterior
                           }

                        @if (Model.HasNextPage)
                        {
                            @Html.ActionLink("Próxima >", "Index", new { pagina = Model.PageNumber + 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
                            @Html.Raw(" ");
                            @Html.ActionLink(">>", "Index", new { pagina = Model.PageCount, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
                        }
                        else
                        {
                            @:Próxima >
                            @Html.Raw(" ")
                            @:>>
                   }
                    </div>

            }
        }

Esse é meu layout:

    <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Ribeira</title>
    <link href="~/Content/Css/normalize.css" rel="stylesheet" />
    <link href="~/Content/Css/blog.css" rel="stylesheet" />
    <link href="~/Content/Css/fontello-codes.css" rel="stylesheet" />
    <link href="~/Content/Css/fontello.css" rel="stylesheet" />
</head>
<body>
    <nav>
        <ul>
            <li>@Html.ActionLink("Home","Index","Home")</li>
            <li>@Html.ActionLink("Post","Index","Post")</li>
            <li>@Html.ActionLink("Usuario", "Index", "usuario")</li>
            <li>@Html.ActionLink("Plano Ação", "Form", "ItemPlanoAcao")</li>
            <li>@Html.ActionLink("Veiculos", "Form", "Veiculo")</li>
            <li>@Html.ActionLink("Rota", "Index", "Rota")</li>
            <li>@Html.ActionLink("Abastecimento", "Index", "Abastecimento")</li>
            <li>@Html.ActionLink("Fornecedores", "Index", "Fornecedores")</li>
            <li>@Html.ActionLink("Compra", "Index", "Compra")</li>
            <li>@Html.ActionLink("Estoque", "Index", "Estoque")</li>
            <li>@Html.ActionLink("Visita", "Index", "Visita")</li>

        </ul>
    </nav>
    <header>
        <h1>
           Ribeira Beer Distribuidora de Bebidas Ltda
        </h1>
        <p>
            Descricao
        </p>
    </header>
    <div class="conteudo"> 
        <main>
            @RenderBody()
        </main>
        @Html.Action("Index","Menu")
    </div>

    <footer>
        Copyright 2017 - RibeiraBeer
    </footer>
    @RenderSection("Scripts",false)
</body>
</html>
1

2 Respostas 2

2

Guilherme, pode usar JavaScript puro. Basta colocar o script em qualquer parte da página onde você queira esconder a nav:

<script>
// dispara a função quando os elementos do DOM foram carregados
document.addEventListener("DOMContentLoaded", function(){
   // seleciona a tag nav e aplica o estilo display: none (fica oculto)
   document.querySelector("nav").style.display = "none";
});
</script>
2
  • Poderia só me da uma explicada o que cada parte do código faz? 29/05/2018 às 14:23
  • opa! Coloquei na resposta. ObG!
    – Meu ovo
    29/05/2018 às 14:25
2

Se for quando entra em outra página você pode esconder essa nav com jquery:

$(document).ready(() => {
  $('#idNav').css('display', 'none');
})
3
  • Colocaria essa linha de embaixo da index ou no inicio? 29/05/2018 às 11:38
  • Coloca no javascript da página que você irá entrar. 29/05/2018 às 11:42
  • Tanto faz no começo ou no fim, quando você entrar na página esse função será executada e esconderá a sua nav. 29/05/2018 às 11:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .