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>
<!--<li><a href='#'><span>Company</span></a>
<ul>
<li><a href='#'>About</a></li>
<li><a href='#'>Location</a></li>
</ul>
</li>
<li><a href='#'><span>Contact</span></a></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