Добавление левого столбца в представление шаблона проекта MVC Net Core, которое исчезает при прокрутке пользователя вниз

Question

Я создал шаблон проекта MVC Core Net.Я создал таблицу индекса товаров из строительных лесов.

Как добавить столбец слева, как показано в красном поле?Это не боковая панель навигации, а столбец слева от категорий, специфичных для этой страницы.Левый столбец должен исчезнуть, когда пользователь прокручивает страницу вниз.НЕ ДОЛЖНО быть исправлено.

Изображение в левом столбце

@model IPagedList<ElectronicsStore.Models.Product>
@{
    ViewBag.Title = "Products";
    int counter = 0;
}
@using X.PagedList;
@using X.PagedList.Mvc.Core;


<table class="table" >
    <thead>
        <tr>
            <th class="col3">
                @*@Html.DisplayNameFor(model => model.FirstOrDefault().ProductName)*@
            </th>
            <th class="col4">
                @*@Html.DisplayNameFor(model => model.FirstOrDefault().ProductDescription)*@
            </th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        @foreach (var item in ViewBag.OnePageOfProducts)
        {
        <tr>
            <td class="col3">

                    <a href='@Url.Action("Details","Products" , new { id=item.ProductId })'>
                        <img src="~/images/@(item.ImageLocation)"  data-holder-rendered="true" >
                    </a>
                    <div class="caption">

            </td>
            @*<td class="col3">
                <img src="~/images/@(item.ImageLocation)" data-holder-rendered="true" />

            </td>*@
            <td class="col4">

                    <br />
                    @item.ProductName

            </td>
        </tr>
        }
    </tbody>
</table>



@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page }))

c # html css asp.net-mvc asp.net-core

Answer 1

Вы можете использовать меню боковой панели, заданное bootstrap 4, стилистом которого вам нужны, включая js of Bootstrap и jQuery, перейдите по ссылке

ПРИМЕЧАНИЕ: код предназначен только для демонстрации:

см. Это для css, js и других вещей

@model IPagedList<ElectronicsStore.Models.Product>@{
ViewBag.Title = Products";
int counter = 0;
}
@using X.PagedList;
@using X.PagedList.Mvc.Core;


<div id="wrapper">
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        Start Bootstrap
                    </a>
                </li>
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Shortcuts</a>
                </li>
                <li>
                    <a href="#">Overview</a>
                </li>
                <li>
                    <a href="#">Events</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
        <!-- put you code here -->

                <a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">Toggle Menu</a>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>