Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Navegação pelo teclado e fixação menu dropdown

Por capoot, Julho 10, 2017 em Desenvolvimento frontend

Recommended Posts

capoot 0

Denunciar post

Postado Julho 10, 2017

Prezados(as)

Já pesquisei bastante na rede, mas não obtive êxito. Criei todo um site com banco de dados, para um arquivo geral. Porém faltam-me resolver 2 problemas.

1- Criei um menu dropdown, e preciso que consiga-se navegar pelo menu, usando as setas do teclado. Usei esse script, mas não deu certo:

<html>

<script type="text/javascript">
var lis = document.getElementsByTagName('li');
for (var i = 0, li; li = lis[i]; i++){
li.onfocus = function(){
var ul = this.getElementsByTagName('ul')[0];
if (ul)
ul.style.display = 'block';
}
li.onblur = function(){
var ul = this.getElementsByTagName('ul')[0];
if (ul)
ul.style.display = '';
}
}
</script>

</html>

2- Sendo esse menu dropdown, não sei se teria como, gostaria que ao passar o mouse e um submenu ele ficasse selecionado sem que sumisse ao tirar o mouse de cima desse submenu.

Muito obrigado a todos que poderem ajudar.

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ir para a lista de tópicos Desenvolvimento frontend

- PHP+Codeigniter - Adicionar Registro Plano de Contas
  
  Por violin101, 20 horas em PHP
- Javascript - Passar Parâmetros para uma Função.
  
  Por violin101, Outubro 28 em Javascript
- PHP - Consulta MySql para prazo de dias
  
  Por violin101, Sunday às 17:10 em PHP

Conteúdo Similar
- Menu dinâmico com submenu e diferentes níveis
  Por Ilano
  
  Olá pessoal,
  
  Utilizo Visual Studio para desenvolver minhas aplicações web e estou tendo problemas ao montar meus submenus. O menu normal está sendo montado direitinho mas, quando preciso montar os submenus não dá certo. Já pesquisei pela web e o máximo que consegui foi a montagem de um menu normal. Alguém poderia me dar uma dica de como melhorar meu código para que finalmente consiga montar um menu com vários níveis de submenus? Abaixo segue todo o código.
  
  Aqui está minha tabela:
  CREATE TABLE [dbo].[MENUS]( [ID] [int] NOT NULL, [PARENTEID] [int] NULL, [NOME] [varchar](100) NOT NULL, [DESCRICAO] [varchar](100) NOT NULL, [ARQUIVO] [varchar](100) NULL, [TARGETMENU] [varchar](10) NULL, [NIVEL] [int] NULL, [ORDENAR] [int] NOT NULL, CONSTRAINT [PK_MENUS] PRIMARY KEY CLUSTERED ( [ID] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO ALTER TABLE [dbo].[MENUS] WITH CHECK ADD CONSTRAINT [MENUS_fk] FOREIGN KEY([PARENTEID]) REFERENCES [dbo].[MENUS] ([ID]) GO ALTER TABLE [dbo].[MENUS] CHECK CONSTRAINT [MENUS_fk] GO
  Aqui segue os inserts:
  
  (Nenhum nome de coluna) INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 1, NULL,'Auxiliares', 'Cadastro de auxiliares', '#', '_self', 1,1); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 2, NULL,'Cursos', 'Cadastro de cursos e editais', '#', '_self', 2,1); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 3, NULL,'Matricula', 'Cadastro de matrículas', '#', '_self', 3,1); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 4, NULL,'Seguranca', 'Cadastros de segurança', '#', '_self', 4,1); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 5, NULL,'Marketing', 'Cadastro de marketing', '#', '_self', 5,1); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 6, NULL,'Ferramentas', 'Cadastro de ferramentas', '#', '_self', 6,1); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 7, 1, 'Benefícios', 'Cadastro de benfícios do edital', 'cadBeneficios.aspx', '_self', 1,1); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 8, 1, 'Cargos', 'Cadastro de cargos', 'cadCargos.aspx', '_self', 1,2); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 9, 1, 'Países', 'Cadastro de países', 'cadPaises.aspx', '_self', 1,3); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 10, 1, 'Estados', 'Cadastro de estados', 'cadEstados.aspx', '_self', 1,4); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 11, 1, 'Macrorregião', 'Cadastro de macrorregiões', 'cadMacroregiao.aspx', '_self', 1,5); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 12, 1, 'Cidades', 'Cadastro de cidades', 'cadCidades.aspx', '_self', 1,6); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 13, 1, 'Escolaridade', 'Cadastro de escolaridades', 'cadEscolaridade.aspx', '_self', 1,7); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 14, 1, 'Estado civil', 'Cadastro de estado civil', 'cadEstadoCivil.aspx', '_self', 1,8); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 15, 1, 'Expectativas', 'cadastro de expectativas', 'cadExpectativas.aspx', '_self', 1,9); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 16, 1, 'Fonte de recursos', 'Cadastro de fontes de recursos', 'cadFonteRecursos.aspx', '_self', 1,10); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 17, 1, 'Lotação', 'Cadastro de lotação', 'cadLotacao.aspx', '_self', 1,11); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 18, 1, 'Modalidades', 'Cadastro de modalidades', 'cadModalidades.aspx', '_self', 1,12); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 19, 2, 'Motivos', 'Cadastro de motivos', 'cadMotivos.aspx', '_self', 2,4); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 20, 1, 'Necessidades especiais', 'Cadastro de necessidades especiais', 'cadNecessidadesEspeciais.aspx', '_self', 1,14); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 21, 1, 'Pré-requisitos', 'Cadastro de pré-requisitos', 'cadPrerrequisitos.aspx', '_self', 1,15); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 22, 1, 'Profissões', 'Cadastro de profissões', 'cadProfissoes.aspx', '_self', 1,16); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 23, 1, 'Projetos', 'Cdastro de projetos', 'cadProjetos.aspx', '_self', 1,17); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 24, 1, 'Setor beneficiado', 'Cdastro de setores beneficiados', 'cadSetorBeneficiado.aspx', '_self', 1,18); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 25, 2, 'Eixos', 'Cadastro de eixos', 'cadEixos.aspx', '_self', 2,1); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 26, 2, 'Cursos', 'Cadastro de cursos', 'cadCursos.aspx', '_self', 2,2); INSERT INTO MENUS (ID, PARENTEID, NOME, DESCRICAO, ARQUIVO, TARGETMENU, NIVEL, ORDENAR) VALUES ( 27, 2, 'Editais', 'Cadastro de editais', 'cadEdital.aspx', '_self', 2,3); Aqui tem o objeto objMenus.vb
  
  Imports System.Data.SqlClient Namespace DETI Public Class objMenu Private Db As classDatabase.DbSql Private Cm As SqlCommand Private Fn As New Funcoes.classFuncao ' DeclaMENUo das variaveis Private vlID As Integer Private vlNOME As String Private vlDESCRICAO As String Private vlARQUIVO As String Private vlTARGETMENU As String Private vlPARENTEID As Integer Private vlNIVEL As Integer Private vlORDENAR As Integer ' DeclaMENUo das propriedades Property ID() Get Return vlID End Get Set(ByVal Value) vlID = Value End Set End Property Property NOME() Get Return vlNOME End Get Set(ByVal Value) vlNOME = Value End Set End Property Property DESCRICAO() Get Return vlDESCRICAO End Get Set(ByVal Value) vlDESCRICAO = Value End Set End Property Property ARQUIVO() Get Return vlARQUIVO End Get Set(ByVal Value) vlARQUIVO = Value End Set End Property Property TARGETMENU() Get Return vlTARGETMENU End Get Set(ByVal Value) vlTARGETMENU = Value End Set End Property Property PARENTEID() Get Return vlPARENTEID End Get Set(ByVal Value) vlPARENTEID = Value End Set End Property Property NIVEL() Get Return vlNIVEL End Get Set(ByVal Value) vlNIVEL = Value End Set End Property Property ORDENAR() Get Return vlORDENAR End Get Set(ByVal Value) vlORDENAR = Value End Set End Property ' DeclaMENUo dos procedimentos Public Function Inserir() Dim pParametro As String = DBNull.Value.ToString If vlPARENTEID > 0 Then pParametro = " AND A.PARENTEID = " & vlPARENTEID Try Cm = New SqlCommand ' Gera o código Db = New classDatabase.DbSql Db.NomeTabela = "MENUS" vlID = Db.Chave("ID") Db = Nothing With Cm.Parameters .AddWithValue("@ID", vlID) If vlPARENTEID > 0 Then .AddWithValue("@PARENTEID", vlPARENTEID) Else .AddWithValue("@PARENTEID", DBNull.Value) .AddWithValue("@NOME", Trim(vlNOME)) If Trim(vlDESCRICAO) <> DBNull.Value.ToString Then .AddWithValue("@DESCRICAO", Trim(vlDESCRICAO)) Else .AddWithValue("@DESCRICAO", DBNull.Value) If Trim(vlARQUIVO) <> DBNull.Value.ToString Then If Right(Trim(vlARQUIVO), 5) <> ".aspx" Then .AddWithValue("@ARQUIVO", Trim(vlARQUIVO) & ".aspx") Else .AddWithValue("@ARQUIVO", Trim(vlARQUIVO)) Else If Trim(vlARQUIVO) = DBNull.Value.ToString Then .AddWithValue("@ARQUIVO", "#") End If End If If Trim(vlTARGETMENU) <> DBNull.Value.ToString Then .AddWithValue("@TARGETMENU", Trim(vlTARGETMENU)) Else .AddWithValue("@TARGETMENU", "_self") .AddWithValue("@NIVEL", vlNIVEL) .AddWithValue("@ORDENAR", vlORDENAR) End With If Busca(" A.NOME = '" & Trim(vlNOME) & "' AND A.ARQUIVO = '" & Trim(vlARQUIVO) & "' " & pParametro) Then Return "REGISTRO JÁ CADASTRADO!" Else ' Cria uma instância do objeto de conexao com o banco de dados ' e preenche os dados necessarios para realizar as operacoes Db = New classDatabase.DbSql Db.NomeTabela = "MENUS" Return Db.Salvar(Cm) End If Catch ex As Exception Return "OCORREU UM ERRO AO TENTAR INCLUIR UM NOVO REGISTRO:" & ex.Message Finally Cm = Nothing Db = Nothing End Try End Function Public Function Alterar() As String Dim pParametro As String = DBNull.Value.ToString If vlPARENTEID > 0 Then pParametro = " AND A.PARENTEID = " & vlPARENTEID Try Cm = New SqlCommand With Cm.Parameters If vlPARENTEID > 0 Then .AddWithValue("@PARENTEID", vlPARENTEID) Else .AddWithValue("@PARENTEID", DBNull.Value) .AddWithValue("@NOME", Trim(vlNOME)) If Trim(vlDESCRICAO) <> DBNull.Value.ToString Then .AddWithValue("@DESCRICAO", Trim(vlDESCRICAO)) Else .AddWithValue("@DESCRICAO", DBNull.Value) If Trim(vlARQUIVO) <> DBNull.Value.ToString And Trim(vlARQUIVO) <> "#" And Trim(vlARQUIVO) <> "#.aspx" Then If Right(Trim(vlARQUIVO), 5) <> ".aspx" Then .AddWithValue("@ARQUIVO", Trim(vlARQUIVO) & ".aspx") Else .AddWithValue("@ARQUIVO", Trim(vlARQUIVO)) Else If Trim(vlARQUIVO) = DBNull.Value.ToString Then .AddWithValue("@ARQUIVO", "#") End If End If If Trim(vlTARGETMENU) <> DBNull.Value.ToString Then .AddWithValue("@TARGETMENU", Trim(vlTARGETMENU)) Else .AddWithValue("@TARGETMENU", "_self") .AddWithValue("@NIVEL", vlNIVEL) .AddWithValue("@ORDENAR", vlORDENAR) End With If Busca(" A.ID <> " & vlID & pParametro & " AND A.NOME = '" & Trim(vlNOME) & "' AND A.ARQUIVO = '" & Trim(vlARQUIVO) & "' ") Then Return "REGISTRO JÁ CADASTRADO!" Else ' Cria uma instância do objeto de conexao com o banco de dados ' e preenche os dados necessarios para realizar as operacoes Db = New classDatabase.DbSql Db.NomeTabela = "MENUS" Return Db.Salvar(Cm, "ID", vlID) End If Catch ex As Exception Return "Erro:" & ex.Message Finally Cm = Nothing Db = Nothing End Try End Function Public Function Excluir() As String Try ' Cria uma instância do objeto de conexao com o banco de dados ' e preenche os dados necessarios para realizar as operacoes Db = New classDatabase.DbSql Db.NomeTabela = "MENUS" Return Db.Excluir("ID", vlID) Catch ex As Exception Return "OCORREU UM ERRO AO TENTAR EXCLUIR ESTE REGISTRO: " & ex.Message Finally Db = Nothing End Try End Function Public Function Consultar(ByVal pParametro As String, ByVal pOrdem As String) As Data.DataSet Dim SQL As New System.Text.StringBuilder SQL.Append(" SELECT A.ID, PARENTEID = ISNULL(A.PARENTEID, 0), A.NOME, A.DESCRICAO, ") SQL.Append(" A.ARQUIVO, A.ORDENAR, ORDEMPARENTE = B.ORDENAR, PARENTE = B.NOME, ") SQL.Append(" CONTAR = ROW_NUMBER() OVER(PARTITION BY A.PARENTEID ORDER BY A.PARENTEID ASC), ") SQL.Append(" LINKARQUIVO = CASE WHEN B.ARQUIVO Is NULL And A.PARENTEID Is NULL THEN '' ") SQL.Append(" WHEN LTRIM(RTRIM(B.ARQUIVO)) IS NULL AND A.PARENTEID IS NULL THEN 'http://localhost:1219/' + A.ARQUIVO ") SQL.Append(" WHEN LTRIM(RTRIM(B.ARQUIVO)) = '' AND A.PARENTEID IS NULL THEN '' ") SQL.Append(" ELSE 'http://localhost:1219/' + ISNULL(B.NOME + '/', '') + ISNULL(A.ARQUIVO, '#') END, ") SQL.Append(" A.TARGETMENU, A.NIVEL, ") SQL.Append(" SELECIONA_TARGET = CASE A.TARGETMENU WHEN '_blank' THEN 'True' ELSE 'False' END, ") SQL.Append(" PARENTE = ISNULL(B.NOME, '') ") SQL.Append(" FROM MENUS A ") SQL.Append(" LEFT JOIN MENUS B ON (B.ID = A.PARENTEID) ") If Trim(pParametro) <> "" Then SQL.Append(" WHERE " & pParametro & "") If Trim(pOrdem) <> "" Then SQL.Append(" ORDER BY " & Trim(pOrdem)) Else SQL.Append(" ORDER BY A.PARENTEID, CONTAR ") Try ' Cria uma instância do objeto de conexao com o banco de dados ' e preenche os dados necessarios para realizar as operacoes Db = New classDatabase.DbSql Return Db.Consultar(SQL.ToString) Catch ex As Exception Return Nothing Finally Db = Nothing End Try End Function Public Function ConsultarTopo(ByVal pParametro As String) As Data.DataSet Dim SQL As New System.Text.StringBuilder SQL.Append(" SELECT TOP " & vlID & " ID ") SQL.Append(" FROM MENUS ") If Trim(pParametro) <> "" Then SQL.Append(" WHERE " & pParametro & " ") SQL.Append(" ORDER BY NOME ") Try ' Cria uma instância do objeto de conexao com o banco de dados ' e preenche os dados necessarios para realizar as operacoes Db = New classDatabase.DbSql Return Db.Consultar(SQL.ToString) Catch ex As Exception Return Nothing Finally Db = Nothing End Try End Function Public Function ConsultaGenerica(ByVal pSQL As String) As Data.DataSet Dim SQL As New System.Text.StringBuilder SQL.Append(pSQL) Try ' Cria uma instância do objeto de conexao com o banco de dados ' e preenche os dados necessarios para realizar as operacoes Db = New classDatabase.DbSql Return Db.Consultar(SQL.ToString) Catch ex As Exception Return Nothing Finally Db = Nothing End Try End Function Public Function ExecutaSQLGenerica(ByVal pSQL As String) As String Dim Sql As New System.Text.StringBuilder Sql.Append(pSQL) Try 'Cria uma instância do objeto de conexao com o banco de dados ' e preenche os dados necessarios para realizar as operacoes Db = New classDatabase.DbSql Return Db.ExecutaSql(pSQL) Catch ex As Exception Return Nothing Finally Db = Nothing End Try End Function 'Função para retornar verdadeiro quando estação encontrada Private Function Busca(ByVal pParametro As String) As Boolean Dim Ds As Data.DataSet Ds = Consultar(pParametro, "") If Ds.Tables(0).Rows.Count <> 0 Then Return True Else Return False End If End Function End Class End Namespace
  Em seguida, a página HTML:
  
  <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="inicio_MasterPage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../bootstrap/js/bootstrap.min.js"></script> <script src="../bootstrap/js/jquery.3.6.0.min.js"></script> <script src="../Scripts/ckeditor/ckeditor.js"></script> <link href="../bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="../bootstrap/meuMenu.css" rel="stylesheet" /> <link href="../bootstrap/css/panel-tabs.css" rel="stylesheet" /> <link href="../bootstrap/css/meu-menu.css" rel="stylesheet" /> <link href="../Scripts/ckeditor/contents.css" rel="stylesheet" /> <script src="../CPF_CNPJ.js"></script> <script src="../Funcoes.js"></script> <style> .cssUsuario { background-color:transparent; background-image:url("../bootstrap/images/user.svg"); background-position:left; background-repeat:no-repeat; padding-left:22px; text-align:left; height:20px; width:auto; border:0px none; border-collapse:collapse; cursor:pointer; } .cssFilial { background-color:transparent; background-image:url("../bootstrap/images/filial.svg"); background-position:left; background-repeat:no-repeat; padding-left:22px; text-align:left; height:20px; width:auto; border:0px none; border-collapse:collapse; cursor:pointer; } .cssEmail { background-color:transparent; background-image:url("../bootstrap/images/email.svg"); background-position:left; background-repeat:no-repeat; padding-left:22px; text-align:left; height:20px; width:auto; border:0px none; border-collapse:collapse; cursor:pointer; } .visible { display:block; } .invisible { display:none; } </style> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div><asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="True"></asp:ScriptManager></div> <div> <ajaxToolkit:ModalPopupExtender ID="mpeFilial" runat="server" PopupControlID="panTrocaFilial" BackgroundCssClass="ajaxModal" TargetControlID="BtnTrocaFilialOculto" CancelControlID="BtnCancela" DropShadow="true"> </ajaxToolkit:ModalPopupExtender> </div> <div style="display:none;"> <asp:Button ID="BtnTrocaFilialOculto" runat="server" Text="Confirma" /> </div> <div> <asp:Panel ID="panTrocaFilial" runat="server" CssClass="alert alert-info" style="padding:10px !important; display:none;" > <div class="row"> <div class="col-sm-12"> <div><h5>TROCA DE FILIAL</h5></div> <div> <asp:UpdatePanel ID="upLbFiliais" runat="server"> <ContentTemplate> <asp:ListBox ID="lbFiliais" runat="server" CssClass="form-control small" DataTextField="FANTASIA" DataValueField="ID" style="height:200px !important;"></asp:ListBox> </ContentTemplate> </asp:UpdatePanel> </div> <div style="margin-top:10px;"> <div class="row"> <div class="col-sm-6"> <asp:UpdatePanel ID="upConfirmaTrocaUser" runat="server"> <ContentTemplate> <asp:Button ID="BtnConfirma" runat="server" CssClass="btn btn-success small" style="margin-right:5px;" Text="Confirma" /> </ContentTemplate> </asp:UpdatePanel> </div> <div class="col-sm-6"> <asp:Button ID="BtnCancela" runat="server" CssClass="btn btn-secondary small" style="margin-right:5px;" Text="Cancela" /> </div> </div> </div> </div> </div> </asp:Panel> </div> <div class="container-fluid"> <div class="row" style="background-color:greenyellow !important;"> <div class="col-sm-12"> <h3>Início</h3> </div> </div> <div class="row" style="background-color:greenyellow !important;"> <div class="col-sm-12"> <div> <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List" CssClass="navbar-nav mr-auto" StaticMenuItemStyle-CssClass="nav-item" > <DynamicHoverStyle CssClass="dropdown-menu" /> <DynamicMenuItemStyle CssClass="dropdown-item" VerticalPadding="5px" /> <DynamicMenuStyle CssClass="dropdown-menu" VerticalPadding="5px" /> <StaticHoverStyle CssClass="dropdown-menu" /> <StaticMenuItemStyle CssClass="dropdown-item" VerticalPadding="5px" ></StaticMenuItemStyle> </asp:Menu> </div> </div> </div> <div class="row" style="margin-bottom:20px !important; padding-bottom:10px; background-color:greenyellow;"> <div class="col-sm-4"> <asp:UpdatePanel ID="upUsuarioLogado" runat="server"> <ContentTemplate> <asp:Button ID="mpBtnUsuario" runat="server" /> </ContentTemplate> </asp:UpdatePanel> </div> <div class="col-sm-4"> <asp:UpdatePanel ID="upFilialLogado" runat="server"> <ContentTemplate> <asp:Button ID="mpBtnFilial" runat="server" /> </ContentTemplate> </asp:UpdatePanel> </div> <div class="col-sm-4"> <asp:UpdatePanel ID="upEmailLogado" runat="server"> <ContentTemplate> <asp:Button ID="mpBtnEmail" runat="server" /> </ContentTemplate> </asp:UpdatePanel> </div> </div> <div class="row"> <div class="col-sm-12"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder> </div> </div> </div> </form> </body> </html>
  E, finalmente, o código VB
  
  Imports System.Data Imports System.Data.DataSet Imports System.Data.SqlClient Imports System.Linq Imports System.IO Imports System.Collections.Generic Imports System.Web.UI Imports System.Web.UI.Control Partial Class inicio_MasterPage Inherits System.Web.UI.MasterPage Private Menu As New DETI.objMenu Private MenuPerfil As New DETI.objPerfisMenus Private Menus As DataTable = New DataTable() Private Usuario As New DETI.objUsuarios Private Fn As New Funcoes.classFuncao Private Sub getMenu() Dim Ds As DataSet = New DataSet() Dim dt As DataTable = New DataTable() Dim pItem As Integer = 0 'Ds = Menu.Consultar(" A.ID IN (SELECT X.MENUID FROM PERFISMENUS X WHERE X.PERFILID = " & Session("sPerfilID") & ") ", "") Ds = Menu.Consultar("", "") Menu1.Items.Add(New MenuItem("<span style='padding:1px 5px 1px 5px;'>Home</span>", 0, "", Fn.PegaDominioDaAplicacao & "/inicio/index.aspx")) If Not ds Is Nothing Then If ds.Tables(0).Rows.Count > 0 Then dt = ds.Tables(0) Dim drowpar As DataRow() = dt.[Select]("PARENTEID = " & 0) For Each dr As DataRow In drowpar Menu1.Items.Add(New MenuItem("<span style='padding:1px 5px 1px 5px;'>" & dr("NOME").ToString() & "</span>", dr("ID").ToString(), "", dr("LINKARQUIVO").ToString())) pItem = dr("ID") Next For Each dr As DataRow In dt.[Select]("PARENTEID > " & 0) Dim mnu As MenuItem = New MenuItem("<span style='padding:1px 5px 1px 5px;'>" & dr("NOME").ToString() & "</span>", dr("ID").ToString(), "", dr("LINKARQUIVO").ToString()) Menu1.FindItem(dr("NIVEL").ToString()).ChildItems.Add(mnu) Next If pItem > 0 Then pItem = pItem + 1 End If End If Menu1.Items.Add(New MenuItem("<span style='padding:5px;'>Sair</span>", pItem, "", Fn.PegaDominioDaAplicacao & "/index.aspx")) End Sub Private Sub IdentificaUsuario() Dim Ds As Data.DataSet Ds = Usuario.ConsultaGenerica(" SELECT A.USUARIOID, B.LOGIN, B.EMAIL, C.FANTASIA " & " FROM USUARIOSFILIAIS A " & " INNER JOIN USUARIOS B ON (B.ID = A.USUARIOID) " & " INNER JOIN FILIAL C ON (C.ID = A.FILIALID) " & " WHERE A.USUARIOID = " & Session("sUsuario") & " AND A.FILIALID = " & Session("sFilial") & " AND B.PERFILID = " & Session("sPerfilID")) mpBtnUsuario.Text = "" If Not Ds Is Nothing Then If Ds.Tables(0).Rows.Count > 0 Then mpBtnUsuario.CssClass = "cssUsuario visible" mpBtnUsuario.Text = Ds.Tables(0).Rows(0)("LOGIN") mpBtnFilial.CssClass = "cssFilial visible" mpBtnFilial.Text = Ds.Tables(0).Rows(0)("FANTASIA") mpBtnEmail.CssClass = "cssEmail visible" mpBtnEmail.Text = Ds.Tables(0).Rows(0)("EMAIL") getMenu() Else If Ds.Tables(0).Rows.Count = 0 Then mpBtnUsuario.CssClass = "invisible" mpBtnFilial.CssClass = "invisible" mpBtnEmail.CssClass = "invisible" Response.Redirect("../index.aspx") End If End If Else If Ds Is Nothing Then Response.Redirect("../index.aspx") End If End If End Sub Private Sub inico_MasterPage_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then If Session("sUsuario") Is Nothing Then Response.Redirect("../index.aspx") Else If Not Session("sUsuario") Is Nothing Then If Session("sUsuario") > 0 Then IdentificaUsuario() Else If Session("sUsuario") = 0 Then Response.Redirect("../index.aspx") End If End If End If End If End If End Sub Protected Sub mpBtnFilial_Click(sender As Object, e As EventArgs) Handles mpBtnFilial.Click Dim Ds As Data.DataSet Ds = Usuario.ConsultaGenerica(" SELECT B.ID, B.FANTASIA " & " FROM USUARIOSFILIAIS A " & " INNER JOIN FILIAL B ON (B.ID = A.FILIALID) " & " WHERE B.ATIVO = 'True' " & " AND A.USUARIOID = " & Session("sUsuario")) lbFiliais.DataSource = Ds lbFiliais.DataBind() If Not Ds Is Nothing Then If Ds.Tables(0).Rows.Count > 0 Then mpeFilial.Show() End If End If End Sub Protected Sub BtnConfirma_Click(sender As Object, e As EventArgs) Handles BtnConfirma.Click If lbFiliais.SelectedIndex > -1 Then Session("sFilial") = lbFiliais.SelectedValue Usuario.ExecutaSQLGenerica(" UPDATE USUARIOS " & " SET ULTIMOFILIALID = " & lbFiliais.SelectedValue & " WHERE ID = " & Session("sUsuario")) IdentificaUsuario() mpeFilial.Hide() Else If lbFiliais.SelectedIndex = -1 Then End If End If End Sub End Class
  Desde já agradeço a atenção.
  
  Obrigado,
  
  Ilano.
- Transformar menu de um nível em dois com Javascript
  Por Sherlock02
  
  Olá, Eu preciso criar um menu com dois níveis utilizando Javascript.
  O código está assim:
  <div id="menu"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div>
  Eu preciso transformá-lo em um segundo nível e inserir texto no estilo "Parent 1" no primeiro nível, dessa maneira:
  <div id="menu"> <ul> <li>Parent 1 <ul class="sub-menu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </li> </ul> </div>
- Fixar menu lateral e barra css grid
  Por Sapinn
  
  Opa galera tudo beleza? Então criei um layout de um dashboard com css grid e eu gostaria de fixar o menu lateral na esquerda e a barra que está em cima e quando eu rolasse para baixo a unica coisa que mexesse fosse o conteúdo da direita. Já tentei usar o position fixed mas ele quebra a página, tentei usar o position: sticky mas ele não funciona. Alguém sabe como resolver isso ?
- Auxilio Menu Drop
  Por AlexandrePrezzi
  
  Preciso de uma ajuda....
  
  Tenho um código que gera um botao dropdown e dentro dele gera um segundo nivel....
  
  <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } </style> </head> <body> <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">HTML</a></li> <li><a tabindex="-1" href="#">CSS</a></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Segundo <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Primeiro <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">3nd level dropdown</a></li> <li><a tabindex="-1" href="#">4nd level dropdown</a></li> </ul> </li> </ul> </div> </div> <script> $(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script> </body> </html> o que acontece
  
  Se eu clico em "Primeiro" abre um menu de subitens ao lado .... quando eu clico de novo ele fecha (ate ai ok)
  
  Mas supondo que eu clique em "Primeiro" (abre ao lado) ... mas sem clicar pra fechar eu clico em "Segundo" (abre o submenu ao lado mas sem fechar o primeiro).
  e isso acaba deixando empilhado..
  
  Gostaria q quando tu clica em Segundo (caso o primeiro esteja expandido ele feche) e vice-versa.
  
  Na imagem coloquei o q esta acontecendo.....
- Menu hamburguer a direta
  Por Sapinn
  
  Tenha um menu hamburguer que abre a esquerda mas eu gostaria que ele abrisse a direita(O menu ficaria retrátil a direita ) para meu site se adequar a responsividade
  
  codigo do menu que fica a esquerda
  
  <!DOCTYPE html>
  <html>
  <head>
     <meta charset="utf-8">
     <title>Menu vertical reponsivo com html e css</title>
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
  <style>
  *{
     margin:0;
     padding:0;
  }
  .menuMobileVertical a{
     text-decoration:none;
     color:white;
     display:block;
     padding:20px 5px;
  }
  .menuMobileVertical a:hover{
     background:rgba(176,224,230);
     color:black;
  }
  body{
     font-family:arial;
  }
  input[type="checkbox"]:checked ~ nav{
     transform: translateX(350px);
  }
  .menuMobileVertical ul{
     list-style:none;
     position:absolute;
     top:70px;
     width:100%;
  
  }
  .icone-menu{
     font-size:40px;
  }
  input[type="checkbox"]{
     display:none;
  }
  .menuMobileVertical{
     background:rgba(16,16,16,.5);
     width: 350px;
     height: 100vh;
     left:-350px;
     position: absolute;
     transition:all 0.5s;
  
  }
  label{
     padding:15px;
     position:absolute;
     z-index:1;
  }
  
  </style>
  </head>
  <body>
     <div class="menuMobile">
  <input type="checkbox" id="check">
  <label for="check"><i class="bi bi-list icone-menu"></i></label>
  <nav class="menuMobileVertical">
  <ul>
  <li><a href="">HOME</a></li>
  <li><a href="">LOGIN</a></li>
  <li><a href="">ALUNO</a></li>
  <li><a href="">PROFESSOR</a></li>
  <li><a href="">CONTATO</a></li>
  </ul>
  </nav>
  </div>
  </body>
  </html>

Entrar

Arquivado

Navegação pelo teclado e fixação menu dropdown

Recommended Posts

capoot 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante