Jump to content

Menu PHP + Javascript

Labroskas

By Labroskas,
in PHP

 Share

Recommended Posts

Labroskas boolean user

Labroskas

Posted
Posted

Boas, tenho um menu lateral, mas não consigo fazer com que tenha dois sub-menus,

Ex:

-->Base 1

---->Pai 1

------>Filho 1

------>Filho 2

------>Filho 3

---->Pai 2

------>Filho 1

------>Filho 2

-->Base 2

-->Base 3

-->Base 4

Código em HTML:

<body>
<div id='cssmenu'>
	<ul>

		<li><a href="">Base 1</a>
		  <ul>
			<li><a href="">Pai 1</a>
				<ul>
					<li><a href="">Filho 1</a></li>
					<li><a href="">Filho 2</a></li>
					<li><a href="">Filho 3</a></li>
				</ul>
			</li>
			<li><a href="">Pai 2</a>
				<ul>
					<li><a href="">Filho 1</a></li>
					<li><a href="">Filho 2</a></li>
				</ul>
			</li>

		  </ul>
		</li>

		<li><a href="">Base 2</a>

		<li><a href="">Base 3</a>
		<li><a href="">Base 4</a>
	</ul>

</div>

</body>

Código em Javascipt para abrir e fechar menus(é aqui que eu estou enrolado, pq não percebo nada de Javascript):

$( document ).ready(function()
 {
$('#cssmenu > ul > li > a').click(function()
  {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible')))
  {
 $(this).closest('li').removeClass('active');
 checkElement.slideUp('normal');
  }
if((checkElement.is('ul')) && (!checkElement.is(':visible')))
  {
 $('#cssmenu ul ul:visible').slideUp('normal');
 checkElement.slideDown('normal');
  }
if($(this).closest('li').find('ul').children().length == 0)
  {
 return true;
  }
else
  {
 return false;
  }
  });
 });

Será que alguém me pode ajudar neste problema??

Cumps

Link to comment
Share on other sites
Gil Sousa try-catch user

Gil Sousa

Posted
Posted (edited)

Boas,

Um dos problemas que estou a ver com o teu código é no html, esquecestete de fechar os 3 ultimos elementos da lista, falta o "</li>" nos 3 ultimos. Como não tens o CSS nem o teu JS esta comentado é um pouco dificil de perceber o objectivo do teu código mas criei um exemplo de como podes conseguir fazer um menu horizontal com JS

http://jsfiddle.net/sousatg/hkVDB/4/

Se tiveres alguma duvida manda mensagem

Edited by sousatg

http://sousatg.github.io

Link to comment
Share on other sites
Labroskas boolean user

Labroskas

Posted
  • Author
Posted 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<link rel='stylesheet' type='text/css' href='menu_lat.css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='menu_lat.js'></script>
</head>

<body>
<div id='cssmenu'>
	<ul>
	   <li class='active'><a href='index.html'><span>Base</span></a></li>
	   <li class='has-sub'><a href='#'><span>Tabelas Gerais</span></a>
		  <ul>
			 <li><a href='#'><span>Pai 1</span></a>
<ul>
				 <li><a href='#'><span>Filho 1</span></a></li>
				 <li><a href='#'><span>Filho 2</span></a></li>
				 <li class='last'><a href='#'><span>Filho 3</span></a></li>
				</ul>
			 </li>
			 <li><a href='#'><span>Pai 2</span></a>
<ul>
				 <li><a href='#'><span>Filho 11</span></a></li>
				 <li class='last'><a href='#'><span>Filho 22</span></a></li>
				</ul>
			 </li>
		  </ul>
	   </li>
	   <li class='has-sub'><a href='#'><span>Cobranças</span></a>
		  <ul>
			 <li><a href='#'><span>Teste</span></a></li>
			 <li class='last'><a href='#'><span>Registo de Cobrança</span></a></li>
		  </ul>
	   </li>
	   <li class='last'><a href='#'><span>Sair</span></a></li>
	</ul>
</div>

</body>
</html>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
 margin: 0;
 padding: 0;
 border: 0;
 list-style: none;
 font-weight: normal;
 text-decoration: none;
 line-height: 1;
 font-family: 'Open Sans', sans-serif;
 font-size: 12px;
 position: relative;
 }
#cssmenu a {
 line-height: 1.3;
 }
#cssmenu {
 width: 200px;
 background: #fff;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 padding: 3px;
 -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
 -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
 }
#cssmenu > ul > li {
 margin: 0 0 3px 0;
 }
#cssmenu > ul > li:last-child {
 margin: 0;
 }
#cssmenu > ul > li > a {
 font-size: 13px;
 display: block;
 color: #ffffff;
 text-shadow: 0 1px 1px #000;
/*  background: #565656;*/
 background:#A6BEC6;
 background:#425E66
 background: -moz-linear-gradient(#A6BEC6 0%, #425E66 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #A6BEC6), color-stop(100%, #425E66));
 background: -webkit-linear-gradient(#A6BEC6 0%, #425E66 100%);
 background: linear-gradient(#A6BEC6 0%, #425E66 100%);
 border: 1px solid #000;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 }
#cssmenu > ul > li > a > span {
 display: block;
/*  border: 1px solid #666666;*/
 border: 1px solid #39F;
 padding: 10px 10px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 font-weight: bold;
 }
#cssmenu > ul > li > a:hover {
 text-decoration: none;
 }
#cssmenu > ul > li.active {
 border-bottom: none;
 color:#0186BA;
 }
#cssmenu > ul > li.active > a {
 /*background: #97be10;*/
 background:#0186BA;
 background: -moz-linear-gradient(#0186BA 0%, #09F 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0186BA), color-stop(100%, #09F));
 /*color:#79980d:#09F*/
 background: -webkit-linear-gradient(#0186BA 0%, #79980d 100%);
 background: linear-gradient(#0186BA 0%, #09F 100%);
 color: #fff;
 text-shadow: 0 1px 1px #000;
/*  border: 1px solid #79980d;*/
 border: 1px solid #0186BA;
 }

#cssmenu > ul > li.active > a span {
/*  border: 1px solid #97be10;*/
 border: 1px solid #0186BA;
 }
#cssmenu > ul > li.has-sub > a span {
 background:  url(imagens/icon_plus.png) 98% center no-repeat;
 }
#cssmenu > ul > li.has-sub.active > a span {
 background: url(imagens/icon_minus.png) 98% center no-repeat;
 }

#cssmenu > ul > li.sub_1 > a span {
 background: #0F0;
 }

/* Sub menu */

#cssmenu ul ul {
 padding-left:10px;
 padding-top:2px;
 display: none;
 }

#cssmenu ul ul li {
 padding-top:1px;
 padding-bottom:1px;
 border: 2px solid #FFF;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 }

#cssmenu ul ul a {
 display: block;
 color: #595959;
 font-size: 13px;
 font-weight: bold;
 padding-left:3px;
 padding-top:4px;
 padding-bottom:4px;
 border: 2px solid #FFF;
 }

#cssmenu ul ul a:hover {
 display:block;
 padding-left:3px;
 padding-top:4px;
 padding-bottom:4px;
 color:#FFF;
/*  background:#0186BA;*/
 background:#6AD7F7;
 border: 2px solid #39F;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 }

$( document ).ready(function() {
$('#cssmenu > ul > li > a').click(function() {
 $('#cssmenu li').removeClass('active');
 $(this).closest('li').addClass('active');
 var checkElement = $(this).next();
 if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
 }
 if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
 }
 if($(this).closest('li').find('ul').children().length == 0) {
return true;
 } else {
return false;
 }
});
});

Será que assim ajuda mais?? O código que fizeste tb não abre a opção Pai 😞

Cumps, e obrigado

Link to comment
Share on other sites
Gil Sousa try-catch user

Gil Sousa

Posted
Posted

Podias ter colocado esse código no jsfiddle de forma ao teu tópico ser mais legivel. Estas correcto o meu código não funciona para os elements filho do menu pois faltam algumas linhas de CSS, O meu código tem apenas o objectivo de me dar um demo onde podes ver uma versão funcional de uma opção funcional e mais simples do que a que estas a utilizar.

http://sousatg.github.io

Link to comment
Share on other sites
Labroskas boolean user

Labroskas

Posted
  • Author
Posted

Desculpa, mas não sabia como meter o código 😞 mas eu não percebo nada de Javascript, daí ter pedido se alguém me conseguia ajudar com aquilo que tenho já feito, ou como aquilo que fizeste(e muito bem), mas preciso que a Base 1 Abra o Pai 1, que por sua vez vai abrir o Filho 1 ,2, 3...

Dá para me arranjares isso???

Cumps, e obrigado

Link to comment
Share on other sites
Gil Sousa try-catch user

Gil Sousa

Posted
Posted

Desculpa, mas não sabia como meter o código 😞 mas eu não percebo nada de Javascript, daí ter pedido se alguém me conseguia ajudar com aquilo que tenho já feito, ou como aquilo que fizeste(e muito bem), mas preciso que a Base 1 Abra o Pai 1, que por sua vez vai abrir o Filho 1 ,2, 3...

Dá para me arranjares isso???

Cumps, e obrigado

Se o que queres é apenas conseguir o menu sem perceberes o código javascript podes utilizar um plugin ou código já feito para conseguir isso, como por exemplo neste link.

http://cssmenumaker.com/menu/slabbed-accordion-menu

http://sousatg.github.io

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept