Submenú en accordion jquery

#1 (**permalink**) 24/10/2014, 06:35

Buenas,

estoy realizando un menú acordeón con jquery y todo bien. El problema me lo da cuando quiero hacer un submenú al clickear sobre el botón edit, es decir, que al pulsar en él me despliege un apartado donde pueda ir un formulario, texto,.... pero que empuje a los elementos inferiores. Mi código es:

Html:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Accordion Menu Demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</head>
<body>

<div class='cssmenu'>
<ul>
<li>
<hgroup>
<h2>eso es</h2>
<h3>klaesojdasdf</h3>
</hgroup>
<a href='#' id="head-desplegable"><span>Home</span></a>
<ul>
<li><a href='#'>Widgets</a></li>
</ul>
</li>

<li><a href='#'><span>SuperAdminuser</span></a>
<ul class="submenu">
<li>Kaxy</li>
<li class="remove"><a href='#'>Remove</a></li>
<li class="edit">
<a href='#'><span>Edit</span></a>
<ul>
<li><a href='#'><span>About</span></a></li>
</ul>
</li>
</ul>
</li>


</ul>
</div>

</body>
</html>

Css

/* 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: 1em;
position: relative;
}
.cssmenu {
width: 940px;
border-bottom: 4px solid #656659;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.cssmenu a {
line-height: 1.3;
}
.cssmenu > ul > li:first-child {
background: #66665e;
border: 1px solid #45463d;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.cssmenu > ul > li:first-child > a {
padding: 15px 10px;
background: url(menu_images/pattern.png) top left repeat;
border: none;
border-top: 1px solid #818176;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
font-family: 'Ubuntu', sans-serif;
text-align: center;
font-size: 1.2em;
font-weight: 300;
text-shadow: 0 -1px 1px #000000;
}
.cssmenu > ul > li:first-child > a > span {
padding: 0;
}
.cssmenu > ul > li:first-child:hover {
background: #66665e;
}

.cssmenu > ul > li {
background: #e94f31;
}
.cssmenu > ul > li:hover {
background: #e84323;

}
.cssmenu > ul > li > a {
font-size: .9em;
display: block;
background: url(menu_images/pattern.png) top left repeat;
color: #ffffff;
border: 1px solid #ba2f14;
border-top: none;
text-shadow: 0 -1px 1px #751d0c;
}
.cssmenu > ul > li > a > span {
display: block;
padding: 12px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.cssmenu > ul > li > a:hover {
text-decoration: none;
}
.cssmenu > ul > li.active {
border-bottom: none;
}
.cssmenu > ul > li.has-sub > a span {
background: url(menu_images/icon_plus.png) 96% center no-repeat;
}
.cssmenu > ul > li.has-sub.active > a span {
background: url(menu_images/icon_minus.png) 96% center no-repeat;
}

.cssmenu ul ul {
display: none;
background: #fff;
border-right: 1px solid #a2a194;
border-left: 1px solid #a2a194;
}
.cssmenu ul ul li {
padding: 0;
border-bottom: 1px solid #d4d4d4;
border-top: none;
background: #f7f7f7;
}
.cssmenu ul ul li:last-child {
border-bottom: none;
}
.cssmenu ul ul a {
padding: 10px 10px 10px 25px;
display: block;
color: #676767;
font-size: .8em;
font-weight: normal;
}
.cssmenu ul ul a:before {
content: '\00BB';
position: absolute;
left: 10px;
color: #e94f31;
}
.cssmenu ul ul a:hover {
color: #e94f31;
}

/*Nuevos estilos*/

hgroup{
width:300px;
height: 110px;
display: inline-block;
padding-left: 40px;

}
#head-desplegable{
background: blue;
width:110px;
height:54px;
display: inline-block;
position: absolute;
right: 30px;
}
h2,h3{
font-size:16px;
}
.submenu{
width:100%;
height:52px;
}
.submenu li:first-child{
float: left !important;
width:680px;
}
.submenu li{
display:inline-block;
float:right;
height: 52px;
width:130px;
}

Jquery

$(document).ready(function(){

$('.cssmenu > ul > li:has(ul)').addClass("has-sub");

$('.cssmenu > ul > li > a').click(function() {
var checkElement = $(this).next();

$('.cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');

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 (checkElement.is('ul')) {
return false;
} else {
return true;
}
});

});

Un saludo

#2 (**permalink**) 27/10/2014, 03:06

O alguien sabe otra forma de hacerlo? ya que me sale el menú acordeón pero no el desplegable del botón. Es decir, alguna forma de poder hacer el acordeón pero luego que en el botón interior, por ejemplo, edit se pulse y salga otro desplegable que empuje a las filas inferiores. Lo estoy intentando y no hay manera, no sé si habrá otra forma más factible.

#3 (**permalink**) 30/10/2014, 12:27

Buenas,

he corregido algo haciendo un cambio de estructura y utilizando un onclick, por si le puede servir a alguien. El problema que tengo ahora y que le estoy dando vueltas es como hacer que se pueda utilizar varias veces esa función en un mismo archivo, para utilizar varios botones que desplieguen (ahora lo he hecho pero repitiendo la misma función con distintos nombres - capa, capauno,... - y que no cacheen, es decir, que no haya que hacer un doble click para que desplieguen. Pregunto porque estoy aún con muy bajo nivel de javascript y me da problemas:

<button onclick="capa()" type="button" class="Accordion-headBt">Add</button>
</div>
<div id="capa" class="estilo1">
contenido
</div>

Función:
<script type="text/javascript">
//<![CDATA[
function capa()
{
var estilo = document.getElementById("capa").className;
if (estilo == "estilo1")
{
document.getElementById("capa").className = "estilo2";
}
else
{
document.getElementById("capa").className = "estilo1";
}

Css:
.estilo1{
width: 0px;
height: 0px;
overflow: hidden;
}
.estilo2{
width: 100%;
height: auto;
overflow: visible;
display:block;
background: #e6e6e6;
clear: both;
}
}
//]]>
</script>

Un saludo!!!