Skip to content
Advertisement

Moving menu items into another div when window is resized?

enter image description here

How to create this type of table HTML with HTML, CSS, javascript.

Advertisement

Answer

window.onresize = resize;
resize();
function resize() {
var content = document.getElementsByClassName('table-row'); 
[...content].forEach(items => {

    let numW = 0;
    let numA = 0;

[...items.children[1].children].forEach(item => {
    item.outHTML = '';
    items.children[0].appendChild(item);
});

const teleA = items.children[0].offsetWidth,
    aaChildren = items.children[0].children;
    
    [...aaChildren].forEach(item3 => {
       numW += item3.offsetWidth;

    if (numW > teleA) {
        item3.outHTML = '';
        items.children[1].appendChild(item3);
    }
});
})
}
.receiver li{ background-color: #f00;}
li{
    margin:0;
    display:inline-block;
    list-style:none;
    padding:5px 15px;
    line-height:30px;
    border-right:solid 1px #000;
}
   <div class="table-content">
                <div class="table-content-top">
                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                    <div class="table-row">
                        <ul class="teleporter teleportera">
                            <li>MFR Product</li>
                            <li>DIST Product</li>
                            <li>GTIN</li>
                            <li>Brand</li>
                            <li>Description</li>
                            <li>Cost</li>
                            <li>Status</li>
                            <li>State</li>
                            <li>Comments</li>
                            <li>Item Id</li>
                            <li>Pack</li>
                            <li>Size</li>
                            <li>Size UOM</li>
                            <li>D/C/F</li>
                            <li>Gross</li>
                            <li>HI*</li>
                            <li>TI*</li>
                            <li>Cube</li>
                            <li>Kosher</li>
                            <li>Cost UOM</li>
                            <li>Halal</li>
                            <li>Category</li>
                        
                            <li>Actions</li>
                        </ul>
                        <ul class="receiver receivera"></ul>
                    </div>

                </div>
            </div>
4 People found this is helpful
Advertisement