To start with, my approach would involve modifying the CSS for improved readability and functionality. I plan to make adjustments by disabling the flexbox to enable wrapping and ensuring that only elements in the first row are visible through setting a restricted height (max-height) along with overflow:hidden. Additionally, I will introduce a clickable element that appears when there are hidden items. This will be achieved using a pseudo-element method to conceal it.
ul {
padding:5px 40px 5px 5px;
box-sizing: border-box;
overflow: hidden;
max-height:55px;
position:relative;
}
li {
display:inline-block;
text-decoration: none;
color: #000000;
font-size: 20px;
text-transform: capitalize;
border: 1px solid black;
margin:10px;
list-style: none;
position:relative;
}
li:last-child::after {
content:"";
position:absolute;
left:102%;
width:100vw;
top:-10px;
bottom:-10px;
background:#fff;
z-index:2;
}
.click {
background:red;
position:relative;
width:40px;
height:40px;
margin-left:auto;
margin-top:-65px;
margin-right:5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item">menu1</li>
<li class="menu-item">menu2</li>
<li class="menu-item">menu3</li>
<li class="menu-item">menu4</li>
<li class="menu-item">menu5</li>
<li class="menu-item">menu6</li>
<li class="menu-item">menu7</li>
<li class="menu-item">menu8</li>
<li class="menu-item">menu9</li>
<li class="menu-item">menu10</li>
<li class="menu-item">menu11</li>
<li class="menu-item">menu12</li>
<li class="menu-item">menu13</li>
<li class="menu-item">menu14</li>
</ul>
<div class="click"></div>
Subsequently, incorporating some JavaScript code is essential to reveal the concealed elements upon clicking the red square icon, creating a dropdown-like effect. The trick here is to identify hidden items by comparing their offsetTop value against a predefined threshold.
var h = 30;
var val = 0;
$('.click').click(function() {
if ($('ul').hasClass('show')) {
$('ul').removeClass('show');
$('ul li.menu-item').removeClass('drop')
return;
}
val = 0;
$('ul li.menu-item').each(function() {
var of = $(this).offset().top - $('ul').offset().top;
if ( of > 20) {
$(this).addClass('drop');
$(this).css('top', 'calc(100% + ' + val + 'px)');
val += h;
}
$('ul').addClass('show');
})
})
ul {
padding: 5px 40px 5px 5px;
box-sizing: border-box;
overflow: hidden;
max-height: 55px;
position: relative;
}
ul.show {
overflow: visible;
}
li {
display: inline-block;
text-decoration: none;
color: #000000;
font-size: 20px;
text-transform: capitalize;
border: 1px solid black;
margin: 10px 8px;
list-style: none;
position: relative;
}
li.drop {
display: block;
position: absolute;
right: 0;
}
li:last-child::after {
content: "";
position: absolute;
left: 102%;
width: 100vw;
top: -10px;
bottom: -10px;
background: #fff;
z-index: 2;
}
li.drop::after {
content: none;
}
.click {
background: red;
position: relative;
width: 40px;
height: 40px;
margin-left: auto;
margin-top: -65px;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item">menu1</li>
<li class="menu-item">menu2</li>
<li class="menu-item">menu3</li>
<li class="menu-item">menu4</li>
<li class="menu-item">menu5</li>
<li class="menu-item">menu6</li>
<li class="menu-item">menu7</li>
<li class="menu-item">menu8</li>
<li class="menu-item">menu9</li>
<li class="menu-item">menu10</li>
<li class="menu-item">menu11</li>
<li class="menu-item">menu12</li>
<li class="menu-item">menu13</li>
<li class="menu-item">menu14</li>
</ul>
<div class="click"></div>
The provided example offers a simplified demonstration with specific hardcoded values that are customizable or can be made dynamic as needed.