[英]Accordion menu not expanding parent container when menu is expanded
When I open a menu item that is accordion style in the left side navigation, the menu container will not push the height of the parent container.当我在左侧导航中打开一个手风琴样式的菜单项时,菜单容器不会推动父容器的高度。 I am not sure why this is the case.
我不确定为什么会这样。 I would like to create the effect that when the side-bar height increases, so does the parent container's.
我想创建这样的效果,当侧边栏高度增加时,父容器的高度也会增加。 How can I accomplish this?
我怎样才能做到这一点? Thanks for any help.
谢谢你的帮助。
EDIT: I can post the CSS specific to the menu, but it is fairly long.编辑:我可以发布特定于菜单的 CSS,但它相当长。 Let me know if it is needed.
如果需要,请告诉我。
HTML: HTML:
<div class="content-container">
<div id="side-nav-container">
<div id='cssmenu'>
<ul>
<li><a href='/index'><span>Home</span></a></li>
<li><a href='#'><span>Landscaping</span></a>
<ul>
<li><a href='#'><span>Planters</span></a></li>
<li><a href='#'><span>Walls</span></a></li>
<li><a href='#'><span>Stone Work</span></a></li>
<li><a href='#'><span>Walkways</span></a></li>
<li><a href='#'><span>Stairways</span></a></li>
<li><a href='#'><span>Steps</span></a></li>
<li><a href='#'><span>Water Falls</span></a></li>
<li><a href='#'><span>Ponds</span></a></li>
<li><a href='#'><span>Creek Beds</span></a></li>
<li><a href='#'><span>Pondless Water Features</span></a></li>
<li><a href='#'><span>Enhancement Lighting</span></a></li>
<li><a href='#'><span>Patios</span></a></li>
<li><a href='#'><span>Fireplaces</span></a></li>
</ul>
</li>
<li><a href='#'><span>Lawn Care</span></a>
<ul>
<li><a href='#'><span>Mowing</span></a></li>
<li><a href='#'><span>Fertilization & Weeding</span></a></li>
<li><a href='#'><span>Fall and Spring Cleanup</span></a></li>
<li><a href='#'><span>Shrub Trimming</span></a></li>
</ul>
</li>
<li><a href='#'><span>Irrigation</span></a>
<ul>
<li><a href='#'><span>Installation</span></a></li>
<li><a href='#'><span>Design</span></a></li>
<li><a href='#'><span>Maintenance</span></a></li>
</ul>
</li>
<li><a href='#'><span>Porous Pave</span></a>
<ul>
<li><a href='#'><span>Walkways</span></a></li>
<li><a href='#'><span>Patios</span></a></li>
<li><a href='#'><span>Pools</span></a></li>
<li><a href='#'><span>Playgrounds</span></a></li>
</ul>
</li>
<li><a href='#'><span>Demo Dumpsters</span></a></li>
<li><a href='#'><span>Outdoor Kitchens</span></a>
<ul>
<li><a href='#'><span>Italian Pizza Ovens</span></a></li>
<li><a href='#'><span>Kitchens</span></a></li>
<li><a href='#'><span>BBQs</span></a></li>
</ul>
</li>
<li><a href='#'><span>Products & Rentals</span></a>
<ul>
<li><a href='#'><span>Pond Supplies</span></a></li>
<li><a href='#'><span>Split fire wood splitters</span></a></li>
<li><a href='#'><span>Altoz Precision Mowers</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div id="contact-info">
<p><strong>Phone</strong><br />
(218) 759-2376
</p>
<br />
<p><strong>Email</strong><br />
<a href="mailto:info@tkoutdoors.com">info@tkoutdoors.com</a>
</p>
</div>
<img src="/_images/layout/Request-Quote-Btn.jpg" alt="request a quote" />
</div>
<div id="content">
{tag_pagecontent}
</div>
</div>
Sass:萨斯:
div.content-container{
width: 100%;
height: auto;
margin-top: 1em;
overflow: hidden;
background-color: #FAF8F0;
padding: 0.5em;
position: relative;
#side-nav-container{
width: 215px;
padding: 1em 0.25em;
float: left;
background-color: #F2F0CE;
overflow: hidden;
position: relative;
#contact-info{
padding: 1em 0;
width: 85%;
margin: 0 auto;
}
}
}
Live Site: http://www.tkoutdoors.com直播网站: http : //www.tkoutdoors.com
I see with Firebug that there is an inline stlye height
of 856px
in #side-nav-container
.我在 Firebug 中看到
#side-nav-container
中有一个856px
的内联856px
height
。 Remove that and it should work.删除它,它应该可以工作。
EDIT: The height is being set in the last part of your scripts.js
.编辑:高度是在你的
scripts.js
的最后一部分设置的。
EDIT2: This is your actual scripts.js
: EDIT2:这是您实际的
scripts.js
:
jQuery(document).ready(function () {
$("#nav_1487666 li a").mouseover(function () {
$(this).parent().prev().find("a").css("border-bottom", "none")
}), $("#nav_1487666 li a").mouseout(function () {
$(this).parent().prev().find("a").css("border-bottom", "1px solid #790C0E")
}), $("#cssmenu > ul > li > a").click(function () {
var a = $(this).next();
return $("#cssmenu li").removeClass("active"), $(this).closest("li").addClass("active"), a.is("ul") && a.is(":visible") && ($(this).closest("li").removeClass("active"), a.slideUp("normal")), a.is("ul") && !a.is(":visible") && ($("#cssmenu ul ul:visible").slideUp("normal"), a.slideDown("normal")), 0 == $(this).closest("li").find("ul").children().length ? !0 : !1
}), $(function () {
var a = $("#content").height(),
b = $("#side-nav-container").height();
a > b ? $("#side-nav-container").css("height", a) : $("#content").css("height", b)
})
});
Take a look at the $("#cssmenu > ul > li > a") click function
.看看
$("#cssmenu > ul > li > a") click function
。 You are using slideUp / slideDown to do the accordion effect.您正在使用slideUp / slideDown来制作手风琴效果。 Those functions, have a second parameter which executes when the animation is complete.
这些函数有第二个参数,在动画完成时执行。 So you need to do something like this:
所以你需要做这样的事情:
function menuHeight() {
$('#side-nav-container').height('auto');
$('#content').height('auto');
var a = $("#content").height(),
b = $("#side-nav-container").height();
a > b ? $("#side-nav-container").css("height", a) : $("#content").css("height", b);
}
And on every slideUp/Down:在每次向上/向下滑动时:
a.slideUp("normal", function() {
menuHeight();
})
Remove this:删除这个:
$(function () {
var a = $("#content").height(),
b = $("#side-nav-container").height();
a > b ? $("#side-nav-container").css("height", a) : $("#content").css("height", b)
})
And replace it with:并将其替换为:
menuHeight();
That's all, didn't try it, but it should work.就是这样,没有尝试过,但它应该可以工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.