我想创建一个大型菜单,其中的菜单项位于左侧,悬停内容显示在右侧。我用下面的HTML和CSS代码。html代码:
<ul class="mega-menu">
<li class="has-mega-menu"><a href=""><span class="material-icons icon">laptop</span>digital</a>
<ul class="mega-submenu">
<li><a href="">phone</a></li>
<li><a href="">mobile accessory</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
</ul>
</li>
<li class="has-mega-menu"><a href=""><span class="material-icons icon">home</span>home requirement</a>
<ul class="mega-submenu">
<li><a href="">tv</a></li>
<li><a href="">Furniture</a></li>
<li><a href="">Refrigerator</a></li>
</ul>
</li>
<li class="has-mega-menu"><a href=""><span class="material-icons icon">work</span>clothes</a>
<ul class="mega-submenu">
<li><a href="">Shirt</a></li>
<li><a href="">T-shirt</a></li>
<li><a href="">jacket</a></li>
</ul>
</li>
</ul>
CSS代码:
ul{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
.mega-menu{
position: relative;
padding: 0;
background-color: #e5e7f7;
/*border: 1px solid red;*/
}
.has-mega-menu>a{
display: block;
width: 250px;
padding: 0.6rem 0.5rem;
color: #3c3227;
box-sizing: border-box;
}
.has-mega-menu>a .icon{
vertical-align: -4px;
margin-right: 4px;
}
.mega-submenu{
display:none;
position: absolute;
top: 0;
/*bottom: 0;*/
min-height: 100%;
left:250px;
right: 0;
background-color: #ecf1f7;
/*border: 1px solid green;*/
}
.has-mega-menu:hover .mega-submenu{
display: block;
}
我的问题是,大型子菜单之一中的许多内容左侧项目的高度小于右侧内容。我应该添加哪些CSS和HTML代码以根据其内容设置巨型菜单的高度?
这是您需要的吗?
$( "li.has-mega-menu" ).hover(
function() {
var menuhight = $( this ).find( ".mega-submenu" ).height();
console.log(menuhight);
$( "#menu" ).css( "min-height", menuhight+"px" );
}, function() {
$( "#menu" ).css( "min-height", "100%");
}
);
ul{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
#menu {
background-color: #e5e7f7;
}
.mega-menu{
position: relative;
padding: 0;
background-color: #e5e7f7;
/*border: 1px solid red;*/
}
.has-mega-menu>a{
display: block;
width: 250px;
padding: 0.6rem 0.5rem;
color: #3c3227;
box-sizing: border-box;
}
.has-mega-menu>a .icon{
vertical-align: -4px;
margin-right: 4px;
}
.mega-submenu{
display:none;
position: absolute;
top: 0;
/*bottom: 0;*/
min-height: 100%;
left:250px;
right: 0;
background-color: #ecf1f7;
/*border: 1px solid green;*/
}
.has-mega-menu:hover .mega-submenu{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<ul class="mega-menu">
<li class="has-mega-menu"><a href=""><span class="material-icons icon">laptop</span>digital</a>
<ul class="mega-submenu">
<li><a href="">phone</a></li>
<li><a href="">mobile accessory</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
</ul>
</li>
<li class="has-mega-menu"><a href=""><span class="material-icons icon">home</span>home requirement</a>
<ul class="mega-submenu">
<li><a href="">tv</a></li>
<li><a href="">Furniture</a></li>
<li><a href="">Refrigerator</a></li>
</ul>
</li>
<li class="has-mega-menu"><a href=""><span class="material-icons icon">work</span>clothes</a>
<ul class="mega-submenu">
<li><a href="">Shirt</a></li>
<li><a href="">T-shirt</a></li>
<li><a href="">jacket</a></li>
</ul>
</li>
</ul>
</div>
$( "li.has-mega-menu" ).hover(
function() {
var menuhight = $( this ).find( ".mega-submenu" ).height();
//console.log(menuhight);
$( "#menu" ).css( "min-height", menuhight+"px" );
}, function() {
$( "#menu" ).css( "min-height", "100%");
}
);
ul{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
#menu {
background-color: #e5e7f7;
}
.mega-menu{
position: relative;
padding: 0;
background-color: #e5e7f7;
/*border: 1px solid red;*/
}
.has-mega-menu>a{
display: block;
width: 250px;
padding: 0.6rem 0.5rem;
color: #3c3227;
box-sizing: border-box;
}
.has-mega-menu>a .icon{
vertical-align: -4px;
margin-right: 4px;
}
.mega-submenu{
display:none;
position: absolute;
top: 0;
/*bottom: 0;*/
min-height: 100%;
left:250px;
right: 0;
background-color: #ecf1f7;
/*border: 1px solid green;*/
}
.has-mega-menu:hover .mega-submenu{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<ul class="mega-menu">
<li class="has-mega-menu"><a href=""><span class="material-icons icon">laptop</span>digital</a>
<ul class="mega-submenu">
<li><a href="">phone</a></li>
<li><a href="">mobile accessory</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
<li><a href="">computer</a></li>
</ul>
</li>
<li class="has-mega-menu"><a href=""><span class="material-icons icon">home</span>home requirement</a>
<ul class="mega-submenu">
<li><a href="">tv</a></li>
<li><a href="">Furniture</a></li>
<li><a href="">Refrigerator</a></li>
</ul>
</li>
<li class="has-mega-menu"><a href=""><span class="material-icons icon">work</span>clothes</a>
<ul class="mega-submenu">
<li><a href="">Shirt</a></li>
<li><a href="">T-shirt</a></li>
<li><a href="">jacket</a></li>
</ul>
</li>
</ul>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句