Menu lateral

Front-end

19/07/2014

alguem faz ideia de como posso fazer um menu na lateral igual a esse site:

[url]http://www.maujor.com/index.php[/url]
Claudio Aguiar

Claudio Aguiar

Curtidas 0

Melhor post

Raphael Souza

Raphael Souza

24/07/2014

Boa tarde!

Em primeiro lugar, vejo que utilizar um plugin para isso não é necessário, uma vez que é algo relativamente fácil de se fazer. Segue a estrutura modelo, com um exemplo bem simples do botão para abrir o menu, o efeito de abrir o menu e a div do menu. Utilizarei HTML, CSS e JQUERY para isso. Segue a estrutura por partes.

HTML

<aside id="abre-menu"></aside> <!-- TRIGGER DE CONTROLE DE ABERTURA/FECHAMENTO DO MENU -->
<nav id="menu-lateral"></nav> <!-- AQUI VOCÊ MONTA A ESTRUTURA DO SEU MENU COM UL, DIV, P...O QUE ACHAR MELHOR, OU SEJA, A INFORMAÇÃO QUE SERÁ VISUALIZADA COMO ITEM DE MENU -->



CSS

body {background: pink;} /* COR PARA DIFERENCIAR O BODY */
#menu-lateral {width: 380px; background-color: blue; position: absolute; left:0; top: 0; z-index: 1; display: none;} /* REPARE QUE NÃO SETO O VALOR DA ALTURA, POIS ESSE VALOR SERÁ DE 100% DA ALTURA DO DEVIVE DO USUARIO, OU SEJA, TEMOS QUE PEGAR A ALTURA DO MONITOR DO USUÁRIO E COLOCÁ-LO NESTE ELEMENTO. VEJA NO JQUERY.*/
#abre-menu {width: 50px; height: 50px; background: yellow;} /* AQUI PODE SER UMA IMAGEM OU ICONE, NÃO IMPORTA. SERÁ O PONTO DE CONTROLE DE ABERTURA E FECHAMENTO DO MENU */


JQUERY (NÃO ESQUEÇA DE CHAMÁ-LO NA PÁGINA)

$(document).ready(function(){
				
				var menu = $("#menu-lateral");
				var btnMenu = $("#abre-menu");

				function setAlturaMenu(){
					var y = $(window).height();
					menu.css("height", y+"px");
				}

				setAlturaMenu();

				btnMenu.mouseover(function(e){
					menu.animate({
						"width" : "show"
					});
					$(this).hide();
					e.preventDefault();
				});

				menu.mouseleave(function(e){
					menu.animate({
						"width" : "hide"
					});
					btnMenu.show();
					e.preventDefault();
				});
			});
GOSTEI 1

Mais Respostas

Mirelle Bueno

Mirelle Bueno

19/07/2014

Olá Claudio, tudo bom parceiro?
então nas minhas aplicações eu fazia parecido, em tema de win8( vicio kkkk) , eu fazia de duas formas, não sei se vai te ajudar, mas é uma ideia.
Então a 1 opção era,eu fazia um form fundo e nela vc colocava um panel com a uma cor mais escura e nele vc coloca imagens, ou icones q representavam o novo form direcionado.
2º opção: faz um botão (bitbtn, ou baixe o componente flatyle( muitoo bomm)) e nele vc chama um form justamente proporcional, como no link, ele seria um form fixo.
tendeu?
o modelo" móvel", eu procurei mas não encontrei nada, se vc encontrar poste aqui , beleza?
sucesso!!
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

19/07/2014

poderia postar links de exemplos para ter uma ideia?
GOSTEI 0
Mirelle Bueno

Mirelle Bueno

19/07/2014

Olha o único q eu encontrei parecido foi este link
http://videos.web-03.net/artigos/Joel_Rodrigues/dxNavBar/UsandoDxNavBarDevExpressDelphi5.jpg
é bem fácil, simplesmente fazer um panel e nele colocar seus icones;
eu normalmente utilizo os icones do win8, trazendo uma interface mais dinâmica, dai fica do seu jeito
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

19/07/2014

MIrelle, eu queria web.
GOSTEI 0
Mirelle Bueno

Mirelle Bueno

19/07/2014

Que plataforma vc está utilizando Claudio?
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

19/07/2014

Mirella, web mesmo, estou usando o notepad ++.
GOSTEI 0
Mirelle Bueno

Mirelle Bueno

19/07/2014

ahh entendi, desculpe eu tava falando do c++ ,delphi (kkkkkkkkk), mas enfim web não é muito meu forte , mas antei pesquisando e achei uns menu interessantes para vc colocar no css
http://blog.neweb.co/pt/55-html5-css3-jquery-menu-tutorials/
tem um bem parecido, não sei se ajuda.
Espero ter ajudado!!
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

19/07/2014

vou olhar, obrigado.
GOSTEI 0
Mirelle Bueno

Mirelle Bueno

19/07/2014

Nada, precisar tamo ai!!
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

19/07/2014

gostei de alguns modelos, mas não tem o parecido com o site que citei, mas muito obrigado.
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

19/07/2014

Raphael, irei testar, acho que amanha te informo se deu certo, mas te adianto meu agradecimento. abraço.
GOSTEI 1
Raphael Souza

Raphael Souza

19/07/2014

Raphael, irei testar, acho que amanha te informo se deu certo, mas te adianto meu agradecimento. abraço.


Espero que seja o que procura. =)
abraço.
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

19/07/2014

ainda não testei, vou ver se consigo hoje a noite ou no final de semana. abraço.
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

19/07/2014

a resposta será longa, hehehe.

primeiramente mostrar os arquivos:

[img]http://arquivo.devmedia.com.br/forum/imagem/343846-20140726-150014.jpg[/img]

dentro da pasta js:

[img]http://arquivo.devmedia.com.br/forum/imagem/343846-20140726-150116.jpg[/img]

vamos ao codigo agora:

index.html:


<!DOCTYPE HTML>
	<html lang="pt-br">
<head>
	<aside id="abre-menu"></aside> <!-- TRIGGER DE CONTROLE DE ABERTURA/FECHAMENTO DO MENU -->
	<nav id="menu-lateral"></nav> <!-- AQUI VOCÊ MONTA A ESTRUTURA DO SEU MENU COM UL, DIV, P...O QUE ACHAR MELHOR, OU SEJA, A INFORMAÇÃO QUE SERÁ VISUALIZADA COMO ITEM DE MENU -->
   	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	
	<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
		<script type="text/javascript">			
			$(document).ready(function(){
                 
                var menu = $("#menu-lateral");
                var btnMenu = $("#abre-menu");
 
                function setAlturaMenu(){
                    var y = $(window).height();
                    menu.css("height", y+"px");
                }
 
                setAlturaMenu();
 
                btnMenu.mouseover(function(e){
                    menu.animate({
                        "width" : "show"
                    });
                    $(this).hide();
                    e.preventDefault();
                });
 
                menu.mouseleave(function(e){
                    menu.animate({
                        "width" : "hide"
                    });
                    btnMenu.show();
                    e.preventDefault();
                });
            });
		</script>
 <title>Teste de Menu</title>
 </head>
 <body>


 </body>
 </html>


css


body {background: pink;} /* COR PARA DIFERENCIAR O BODY */
#menu-lateral {
		width: 380px;	background-color: blue; position: absolute; left:0; top: 0; z-index: 1; display: none;
} 
	/* REPARE QUE NÃO SETO O VALOR DA ALTURA, POIS ESSE VALOR SERÁ DE 100% DA ALTURA DO DEVIVE DO USUARIO, OU SEJA, TEMOS QUE PEGAR A ALTURA DO MONITOR DO USUÁRIO E COLOCÁ-LO NESTE ELEMENTO. VEJA NO JQUERY.*/
#abre-menu {
	width: 50px; 
	height: 50px; 
	background: yellow;
} /* AQUI PODE SER UMA IMAGEM OU ICONE, NÃO IMPORTA. SERÁ O PONTO DE CONTROLE DE ABERTURA E FECHAMENTO DO MENU */


está correto?
GOSTEI 0
Raphael Souza

Raphael Souza

19/07/2014

a resposta será longa, hehehe.

primeiramente mostrar os arquivos:

[img]http://arquivo.devmedia.com.br/forum/imagem/343846-20140726-150014.jpg[/img]

dentro da pasta js:

[img]http://arquivo.devmedia.com.br/forum/imagem/343846-20140726-150116.jpg[/img]

vamos ao codigo agora:

index.html:


<!DOCTYPE HTML>
	<html lang="pt-br">
<head>
	<aside id="abre-menu"></aside> <!-- TRIGGER DE CONTROLE DE ABERTURA/FECHAMENTO DO MENU -->
	<nav id="menu-lateral"></nav> <!-- AQUI VOCÊ MONTA A ESTRUTURA DO SEU MENU COM UL, DIV, P...O QUE ACHAR MELHOR, OU SEJA, A INFORMAÇÃO QUE SERÁ VISUALIZADA COMO ITEM DE MENU -->
   	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	
	<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
		<script type="text/javascript">			
			$(document).ready(function(){
                 
                var menu = $("#menu-lateral");
                var btnMenu = $("#abre-menu");
 
                function setAlturaMenu(){
                    var y = $(window).height();
                    menu.css("height", y+"px");
                }
 
                setAlturaMenu();
 
                btnMenu.mouseover(function(e){
                    menu.animate({
                        "width" : "show"
                    });
                    $(this).hide();
                    e.preventDefault();
                });
 
                menu.mouseleave(function(e){
                    menu.animate({
                        "width" : "hide"
                    });
                    btnMenu.show();
                    e.preventDefault();
                });
            });
		</script>
 <title>Teste de Menu</title>
 </head>
 <body>


 </body>
 </html>


css


body {background: pink;} /* COR PARA DIFERENCIAR O BODY */
#menu-lateral {
		width: 380px;	background-color: blue; position: absolute; left:0; top: 0; z-index: 1; display: none;
} 
	/* REPARE QUE NÃO SETO O VALOR DA ALTURA, POIS ESSE VALOR SERÁ DE 100% DA ALTURA DO DEVIVE DO USUARIO, OU SEJA, TEMOS QUE PEGAR A ALTURA DO MONITOR DO USUÁRIO E COLOCÁ-LO NESTE ELEMENTO. VEJA NO JQUERY.*/
#abre-menu {
	width: 50px; 
	height: 50px; 
	background: yellow;
} /* AQUI PODE SER UMA IMAGEM OU ICONE, NÃO IMPORTA. SERÁ O PONTO DE CONTROLE DE ABERTURA E FECHAMENTO DO MENU */


está correto?



Bom dia! Vamos lá:

1) Essa parte vai dentro do body

<aside id="abre-menu"></aside> <!-- TRIGGER DE CONTROLE DE ABERTURA/FECHAMENTO DO MENU -->
<nav id="menu-lateral"></nav> <!-- AQUI VOCÊ MONTA A ESTRUTURA DO SEU MENU COM UL, DIV, P...O QUE ACHAR MELHOR, OU SEJA, A INFORMAÇÃO QUE SERÁ VISUALIZADA COMO ITEM DE MENU -->


2) Essa chamada .js está incoerente com o arquivo que você postou.

<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>


Veja que sua chamada é jquery-1.10.1.min.js, sendo que vocês postou anteriormente que o arquivo dentro da pasta js se chama jquery-1.9.1.min.js

No mais, está certo.
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

19/07/2014

pronto, fiz as modificações mas não surtiram efeito.
GOSTEI 0
Raphael Souza

Raphael Souza

19/07/2014

Abra o arquivo no chrome, aperte F12 e vá até a aba Console. Mostra alguma coisa?
Quando vc abre o arquivo index consegue visualizar o quadrado amarelo?
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

19/07/2014

resumindo aparece isso

[img]http://arquivo.devmedia.com.br/forum/imagem/343846-20140729-134855.jpg[/img]
GOSTEI 0
POSTAR