Menu Responsivo Dropdown - CSS3/Javascript

[thiagosvl]

Meu site está trabalhando com um menu responsivo, e a ideia é adicionar um dropdown para alguns itens do menu.

Com o código que fiz até agora, o menu funciona, mas todas as LI são carregadas, e não apenas as que eu quero..

 

Gostaria da ajuda para fazer com que os <ul> dentro dos <li> só aparecessem caso eu clicasse..

 

HTML:

<div class="rmm">                <ul>                         <li><a href='#link'>link</a>                        <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->                                <?php while($row = mysqli_fetch_array($sqlDois)) { ?>                                        <li>                                                <a href="link.php?gid=<?php echo $row['grupo_id']; ?>">                                                        <?php echo $row['grupo_orixas']; ?>                                                </a>                                        </li>                                <?php } ?>                                             </ul>                    </li>                    <li><a href='#link'>linklink</a>                        <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->                                <li><a href="link.php">linklink</a></li>                                <li><a href="link.php">link</a></li>                                <li><a href="link.php">link</a></li>                                <li><a href="link.php">link</a></li>                        </ul>                    </li>                    <li><a href='link.php'>link</a></li>                    <li><a href='#link'>Aprendizado</a>                        <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->                                <li><a href="textos.php">Textos</a></li>                                <li><a href="dicionario.php">Dicionario</a></li>                        </ul>                    </li>                    <li><a href='fotos.php'>Fotos</a></li>                    <li><a href='link.php'>link</a></li>                                     <li><a href='#link'>Pontos link</a>                        <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->                                <?php while($row = mysqli_fetch_array($sql)) { ?>                                        <li>                                                <a href="pontos.php?gid=<?php echo $row['grupo_id']; ?>">                                                        <?php echo $row['grupo_id']; ?>                                                </a>                                        </li>                                <?php } ?>                                             </ul>                    </li>                 </ul>

Segue o CSS

.rmm {	display:none;	position:relative;	width:100%;	padding:0px;	text-align: center;	line-height:19px !important;    padding-bottom:3px;}.rmm * {	-webkit-tap-highlight-color:transparent !important;	font-family:Arial;}.rmm a {	color:white;	text-decoration:none;}.rmm .rmm-main-list, .rmm .rmm-main-list li {	margin:0px;	padding:0px;}.rmm ul {	display:block;	width:auto !important;	margin:0 auto !important;	overflow:hidden;	list-style:none;}/* sublevel menu - in construction */.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {	display:block !important;	height:100% !important;	width:100% !important;}/* */.rmm .rmm-main-list li {	display:inline;	padding:padding:0px;	margin:0px !important;}.rmm-toggled {	display:none;	width:100%;	position:relative;	overflow:hidden;}.rmm-button:hover {	cursor:pointer;}.rmm .rmm-toggled ul {	display:none;	margin:0px !important;	padding:0px !important;}.rmm .rmm-toggled ul li {	display:block;	margin:0 auto !important;}/* GRAPHITE STYLE */.rmm.graphite .rmm-main-list li a {	display:inline-block;	padding:8px 30px 8px 30px;	margin:0px -3px 0px -3px;	font-size:15px;	text-shadow:1px 1px 1px #333333;	background-color:#444444;	border-left:1px solid #555555;	background-image:url('../rmm-img/graphite-menu-bg.png');	background-repeat:repeat-x;}.rmm.graphite .rmm-main-list li a:hover {	background-image:url('../rmm-img/graphite-menu-bg-hover.png');}.rmm.graphite .rmm-main-list li:first-child a {-webkit-border-top-left-radius: 6px;-webkit-border-bottom-left-radius: 6px;-moz-border-radius-topleft: 6px;-moz-border-radius-bottomleft: 6px;border-top-left-radius: 6px;border-bottom-left-radius: 6px;}.rmm.graphite .rmm-main-list li:last-child a {-webkit-border-top-right-radius: 6px;-webkit-border-bottom-right-radius: 6px;-moz-border-radius-topright: 6px;-moz-border-radius-bottomright: 6px;border-top-right-radius: 6px;border-bottom-right-radius: 6px;}.rmm.graphite .rmm-toggled {	width:100%;	background-color:#0260a9;	min-height:36px;}.rmm.graphite .rmm-toggled-controls {	display:block;	height:36px;	color:white;	text-align:left;	position:relative;	background-image:url('../rmm-img/graphite-menu-bg.png');	background-repeat:repeat-x;}.rmm.graphite .rmm-toggled-title {	position:relative;	top:9px;	left:15px;	font-size:16px;	color:white;	text-shadow:1px 1px 1px black;}.rmm.graphite .rmm-button {	display:block;	position:absolute;	right:15px;	top:8px;}.rmm.graphite .rmm-button span {	display:block;	margin-top:4px;	height:2px;	background:white;	width:24px;}.rmm.graphite .rmm-toggled ul li a {	display:block;	width:100%;	background-color:#0260a9;	text-align:center;	padding:10px 0px 10px 0px;	border-top:1px solid white;}/* borda no primeiro LI menu mobile css */.rmm .primeiroLiMenuMobile {    border-top:1px solid white;}.rmm.graphite .rmm-toggled ul li a:active {	background-color:#07a5f2;	border-bottom:1px solid #444444;	border-top:1px solid #444444;}/* SAPPHIRE STYLE */.rmm.sapphire .rmm-main-list li a {	display:inline-block;	padding:8px 30px 8px 30px;	margin:0px -3px 0px -3px;	font-size:15px;	background-color:#537b9f;	border-left:1px solid #3e587b;	background-image:url('../rmm-img/sapphire-menu-bg.png');	background-repeat:repeat-x;}.rmm.sapphire .rmm-main-list li a:hover {	background:#3e597b;}.rmm.sapphire .rmm-main-list li:first-child a {-webkit-border-top-left-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-bottomleft: 5px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;}.rmm.sapphire .rmm-main-list li:last-child a {	-webkit-border-top-right-radius: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-topright: 5px;-moz-border-radius-bottomright: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;}.rmm.sapphire .rmm-toggled {	width:100%;	background-color:#537b9f;	min-height:36px;}.rmm.sapphire .rmm-toggled-controls {	display:block;	height:36px;	color:white;	text-align:left;	position:relative;	background-image:url('../rmm-img/sapphire-menu-bg.png');	background-repeat:repeat-x;}.rmm.sapphire .rmm-toggled-title {	position:relative;	top:9px;	left:15px;	font-size:16px;	color:white;}.rmm.sapphire .rmm-button {	display:block;	position:absolute;	right:9px;	top:7px;	width:20px;	padding:0px 7px 0px 7px;	border:1px solid #3e587b;	background-image:url('../rmm-img/sapphire-menu-bg.png');	background-position:top;}.rmm.sapphire .rmm-button span {	display:block;	margin:4px 0px 4px 0px;	height:2px;	background:white;	width:20px;}.rmm.sapphire .rmm-toggled ul li a {	display:block;	width:100%;	background-color:#537698;	text-align:center;	padding:10px 0px 10px 0px;	border-top:1px solid white;}.rmm.sapphire .rmm-toggled ul li a:active {	background-color:#3c5779;	border-bottom:1px solid #3c5779;	border-top:1px solid #3c5779;}.rmm.sapphire .rmm-toggled ul li:first-child a { 	border-top:1px solid #3c5779 !important;} @[member=MEDIA] screen and (min-width: 0px) and (max-width:976px) {    .rmm {	display:block;}    }

Segue o JAVASCRIPT (de terceiros):

function responsiveMobileMenu() {			$('.rmm').each(function() {					$(this).children('ul').addClass('rmm-main-list');	// mark main menu list					var $style = $(this).attr('data-menu-style');	// get menu style				if ( typeof $style == 'undefined' ||  $style == false )					{						$(this).addClass('graphite'); // set graphite style if style is not defined					}				else {						$(this).addClass($style);					}						/* 	width of menu list (non-toggled) */						var $width = 0;				$(this).find('ul li').each(function() {					$width += $(this).outerWidth();				});							// if modern browser						if ($.support.leadingWhitespace) {				$(this).css('max-width' , $width*1.05+'px');			}			// 			else {				$(this).css('width' , $width*1.05+'px');			}			 	});}function getMobileMenu() {	/* 	build toggled dropdown menu list */		$('.rmm').each(function() {					var menutitle = $(this).attr("data-menu-title");				if ( menutitle == "" ) {					menutitle = "Menu";				}				else if ( menutitle == undefined ) {					menutitle = "Menu";				}				var $menulist = $(this).children('.rmm-main-list').html();				var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span> </span><span> </span><span> </span></div></div>";				$(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");		});}function adaptMenu() {		/* 	toggle menu on resize */		$('.rmm').each(function() {			var $width = $(this).css('max-width');			$width = $width.replace('px', ''); 			if ( $(this).parent().width() < $width*1.05 ) {				$(this).children('.rmm-main-list').hide(0);				$(this).children('.rmm-toggled').show(0);			}			else {				$(this).children('.rmm-main-list').show(0);				$(this).children('.rmm-toggled').hide(0);			}		});		}$(function() {	 responsiveMobileMenu();	 getMobileMenu();	 adaptMenu();	 	 /* slide down mobile menu on click */	 	 $('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){	 	if ( $(this).is(".rmm-closed")) {		 	 $(this).find('ul').stop().show(300);		 	 $(this).removeClass("rmm-closed");	 	}	 	else {		 	$(this).find('ul').stop().hide(300);		 	 $(this).addClass("rmm-closed");	 	}			});	});	/* 	hide mobile menu on resize */$(window).resize(function() { 	adaptMenu();});

Obs.: Removi os espaços dos códigos para que não ficasse tão cumprido.

 

Como já dito, gostaria que os <ul> e seus respectivos <li> só aparecem quando eu clicasse sobre tal <li>

Ex: 

<ul>   <li><a href="#">LINK</a></li>   <li><a href="#">LINK</a></li>   <li><a href="#">LINK</a>      <ul>         <li><a href="#">SUBMENULINK</a></li>         <li><a href="#">SUBMENULINK2</a></li>      </ul>   </li></ul>

Conto com a ajuda de vocês.

Desde já, agradeço.

[vitorss]

Iniciamos as <li> em hide, você deve setar uma class referenciar, criamos um event onclick, que atribuimos .show para a classe