4

I want to create a mega menu that list items are left and when hover contents show right side. I use below html and css codes. html code:

<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 code:

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;
}

my problem is when one of the mega submenu has many content left items height is less than right contents. which css and html code i should add to set height of mega-menu base on it's contents?

Hossein
  • 65
  • 1
  • 5

1 Answers1

1

Is this what you need?

$( "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>
ikiK
  • 6,328
  • 4
  • 20
  • 40
  • thank you. this is right. is there anyway to solve problem with css without jquery? – Hossein Jun 14 '20 at 17:38
  • 1
    @Hossein I believe there is no way whatsoever to solve with pure CSS, as it calculates high dynamically based on content. I guess it could be written with pure JS... If i really must, bit short on time this moment. – ikiK Jun 14 '20 at 17:40
  • @Hossein You can reed here how to change element with CSS if other is hovered, but there are conditions that your markup does not meet i believe as I added outside div. Also you would need have fixed sizes in order for something like this would work. JS is your best friend for stuff like this in my opinion.https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered – ikiK Jun 14 '20 at 17:54