Hide Menu tab

Asked

Viewed 116 times

1

I am trying to hide the Nav menu bar when it enters a specific form, would be to give some example?

inserir a descrição da imagem aqui

This is the index of my form:

    @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>

            }
        }

This is my 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>
c# css razor

2 answers

2

If it is when it enters another page you can hide that Nav with jquery:

$(document).ready(() => {
  $('#idNav').css('display', 'none');
})

  • I would put this line below the index or at the beginning?

  • Put in the javascript of the page you will enter.

  • Either at the beginning or at the end, when you enter the page this function will be executed and will hide your Nav.

2


Guilherme, you can use pure Javascript. Just put the script anywhere on the page where you want to hide the 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>

  • Could you just explain to me what each part of the code does?

  • opa! I put in the answer. Obg!

Browser other questions tagged c# css razor

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