Vertical side menu up to the thin page

Asked

Viewed 115 times

1

I need to leave a side menu from the beginning until the end of the page, no matter how many items the menu has, for example, if I have a menu with 3 items the background color of the side menu ends when the Menis end, I need you to go to the end of the page. I’m wearing the Bootstrap.

_Layout

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Teste", "AddApelido", "Apelido")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    <li>@Html.ActionLink("Produto", "Create", "Produtoes")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        @RenderSection("MenuLateral")
    </div>
    <div class="container body-content col-lg-9">
        @RenderBody()
        <hr />
        <div class="row">
            <footer class="col-lg-12">
                <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
            </footer>
        </div>
    </div>

View that will use the menu

@section MenuLateral{
    @RenderPage("~/Views/Shared/_MenuLateralHome.cshtml")
}

@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h3>SIP - Sistema Integrado Pietra Uno</h3>
    <hr />
    <div class="form-group">
        <div class="col-lg-12">

        </div>
    </div>
</div>
html css bootstrap-3

  • Must do something like that?

  • Post what you’ve already done.

  • I edited the question and entered the code, Bruno, this is exactly what I need, a menu that regardless of how many items you have, goes to the end of the page, the way it is, if the menu has 3 items, it is small and ends after the items.

  • Change the class that controls that part of the MENU. Add height: 100%.

  • like this? http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/

  • Exactly that Paul.

Show 1 more comment

3 answers

1

Since you are using the Bootstrap, just use the Affix(). With it you leave a side menu similar to the site’s own Bootstrap.

An example using it would be like this:

    <body data-spy="scroll" data-target="#myScrollspy" data-offset="15">

<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:200px;">
  <h1>Scrollspy & Affix Example</h1>
  <h3>Fixed vertical sidenav on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p>
  <p>The left menu sticks the page after you have scrolled a specified amount of pixels, and the links in the menu are automatically updated based on scroll position.</p>
</div>
<br>

<div class="container">
  <div class="row">
    <nav class="col-sm-3" id="myScrollspy">
      <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#section41">Section 4-1</a></li>
            <li><a href="#section42">Section 4-2</a></li>                     
          </ul>
        </li>
      </ul>
    </nav>
    <div class="col-sm-9">
      <div id="section1">    
        <h1>Section 1</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="section2"> 
        <h1>Section 2</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>        
      <div id="section3">         
        <h1>Section 3</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="section41">         
        <h1>Section 4-1</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>      
      <div id="section42">         
        <h1>Section 4-2</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
    </div>
  </div>
</div>
    </body>

And in the css you fix the menu where you want and as you wish, staying so:

body {
      position: relative;
  }
  .affix {
      top: 20px;
  }
  div.col-sm-9 div {
      height: 250px;
      font-size: 28px;
  }
  #section1 {color: #fff; background-color: #1E88E5;}
  #section2 {color: #fff; background-color: #673ab7;}
  #section3 {color: #fff; background-color: #ff9800;}
  #section41 {color: #fff; background-color: #00bcd4;}
  #section42 {color: #fff; background-color: #009688;}

  @media screen and (max-width: 810px) {
    #section1, #section2, #section3, #section41, #section42  {
        margin-left: 150px;
    }
  }

See a functional example clicking here.

If you want to know more, you can find other examples here.

0

I solved my problem based on the answer of Paulo Mendonça, he put in my comments a link to a side menu that was what I needed, and it was done with Bootstrap, so I took the code and CSS of this example and it worked. Thank you all for your help.

0

To illustrate a menu nav with height: 100%, created in fiddle a simple example how to do 

html, body {
    height: 100%;
}

main {
    display: flex;
    height: 100%;
}

ul {
    list-style: none;
    padding-left: 0;
}

nav {
    background-color: #f1f1f1;
    flex: 0 0 200px;
    position: relative;
}

nav section {
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 1rem;
}

article {
    padding: 1rem;
    overflow-x: auto;
}
<main>
    <nav>
        <section>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>
                <li><a href="#">Item 6</a></li>
                <li><a href="#">Item 7</a></li>
                <li><a href="#">Item 8</a></li>
                <li><a href="#">Item 9</a></li>
                <li><a href="#">Item 10</a></li>
            </ul>
        </section>
    </nav>
    <article>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ipsum aliquid assumenda tempora provident, obcaecati maiores ipsa? Placeat modi iure neque quas ipsa optio! Magni vero laboriosam porro, illum perspiciatis libero harum consectetur nulla voluptatem quae maiores vitae atque, maxime, deleniti est qui quibusdam. Sed delectus, aperiam recusandae quaerat placeat in consequatur beatae enim tempora quia non, similique vero illo eum ratione ea rerum odio, accusamus obcaecati. Blanditiis quaerat consectetur accusantium fugit eligendi, ipsum nobis. Asperiores, unde ab quisquam enim error quam voluptatum eveniet voluptate repellat incidunt. Ullam ipsam, voluptate ea. Quibusdam voluptatem vitae laboriosam cum, molestias, corporis necessitatibus quisquam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore accusantium quisquam possimus, porro et vitae tenetur modi sunt reprehenderit quis laboriosam, exercitationem veritatis nostrum? Fugit dolores aspernatur, exercitationem rem repudiandae, cupiditate reprehenderit necessitatibus rerum cum vel quis voluptatibus voluptates culpa praesentium doloremque tenetur! Ratione labore, eveniet nesciunt. Natus obcaecati eligendi deserunt facere! Id ad vitae aperiam quaerat voluptates labore dignissimos eaque quis temporibus vel et autem ipsa repellat nisi a, voluptas aliquid eveniet perspiciatis in mollitia asperiores! Ullam voluptatum, omnis accusamus vel ducimus, deleniti illum, odit unde iusto dolorem laborum sunt cum veniam fugit aspernatur autem quidem illo cumque, asperiores blanditiis necessitatibus quos recusandae voluptatibus perspiciatis. Veniam cupiditate accusantium blanditiis, voluptatem similique tenetur doloremque corrupti aliquid fugit corporis quas impedit ad nostrum officiis molestiae hic laudantium necessitatibus temporibus doloribus voluptatum cum? Cumque doloribus, incidunt repellat, voluptates ab debitis cupiditate totam, commodi illum similique ipsam architecto. Beatae atque dolores quia totam, aut voluptas veritatis rerum ad qui. Reprehenderit neque autem quam voluptate, magni tenetur, iusto? Praesentium, qui! Voluptates repellendus quam vitae laboriosam, optio soluta vero, et, doloremque ex corrupti dolor nulla qui culpa doloribus architecto facilis? Deserunt, maiores, porro. Dolor quam, velit illum odit praesentium, dignissimos, aut ab itaque laborum molestiae ipsa nam dolores voluptatibus impedit. Consequuntur eligendi deserunt iure quisquam, rem cum distinctio aperiam illo reiciendis accusantium tempora molestiae minima, quidem nesciunt minus commodi, alias odit dolores repellendus! Debitis eaque officiis, sunt id animi repudiandae nisi nesciunt, quis libero consectetur eos quam, eveniet consequatur velit non earum quod iure enim omnis magnam! Quisquam eligendi quis officia veniam harum veritatis sequi numquam vel doloremque nam, molestias cumque debitis nobis quos animi consequatur aut neque vero iure ut maxime perspiciatis, deleniti dolorum. Architecto amet doloribus facere nulla sit dolore soluta aperiam minus est odio distinctio praesentium atque excepturi corporis temporibus optio cupiditate ullam eos consectetur quam, voluptates impedit eaque nam sed. Minima iusto facilis eum tempore quibusdam commodi quae eius placeat obcaecati nesciunt officiis minus, reprehenderit repellendus accusantium porro modi hic quam debitis quasi, dicta, delectus perferendis at maiores aliquam similique. Fuga iusto ducimus accusamus voluptatibus laborum officiis eveniet quas voluptatum neque debitis unde pariatur ipsum temporibus voluptas, magni eos cum, qui nisi. Veritatis obcaecati ipsam similique, sequi minus eum recusandae voluptatum culpa dignissimos doloremque. Ducimus corrupti itaque quos officiis repellat, doloremque ab illo recusandae deserunt inventore. Accusantium accusamus saepe placeat eaque, blanditiis temporibus excepturi consequuntur fugiat hic maiores ea dolorum at impedit, sit porro officiis. Ab nesciunt aspernatur dicta praesentium fuga esse natus voluptatibus consectetur dolore, at obcaecati ratione ut, veniam nemo vel quis ipsa repellat, adipisci suscipit eaque explicabo. Aliquam nemo quod, ut earum at, consequatur, cupiditate ad suscipit delectus voluptatem dolorem ea iusto eaque soluta deserunt explicabo ipsum rerum expedita aspernatur quo. Deserunt quibusdam distinctio in, maiores officia, libero id neque dicta impedit, corporis culpa pariatur. Molestias doloribus tempora ipsam magnam reprehenderit, necessitatibus ut quod aliquid voluptatibus, veritatis? Ipsum debitis, incidunt itaque dolor voluptatem consequuntur dicta, assumenda deserunt iusto porro fugiat delectus quia rerum iure voluptates, sed? Necessitatibus ipsum, corporis voluptatibus, consequatur culpa cum dolore nostrum, inventore harum perferendis fugiat vel, est. Possimus dignissimos esse labore, debitis, aperiam iure iste dicta, doloremque rerum consequatur ex vel sunt magni voluptatibus dolore suscipit odit voluptatem quis atque temporibus. Eaque accusantium impedit unde. Et fugiat voluptate asperiores, unde eos architecto a esse quam nulla beatae repellendus perferendis, ullam expedita error eius, modi recusandae quisquam. Voluptatem dolorem doloremque tenetur quas eligendi ratione vitae quo nostrum possimus quisquam velit impedit recusandae rerum, iure mollitia molestiae laudantium, eos consequuntur deleniti quae illum corporis vero sit. Est ipsa rerum neque. Itaque eveniet quidem, pariatur. Itaque aut ipsum accusamus laborum alias cupiditate sunt. Hic maiores excepturi quisquam? Ad odio adipisci quasi quos reprehenderit unde quaerat perferendis deserunt, deleniti magni tenetur cupiditate inventore assumenda delectus cumque, quia mollitia nemo amet, aliquid, eius neque tempora! Eaque illum, quae ducimus. Aliquid libero veritatis illo blanditiis temporibus debitis possimus doloribus aliquam cum, officia sed quo sapiente deserunt adipisci unde quos voluptate, officiis consequuntur voluptatum nobis pariatur. Libero deserunt accusantium sequi ipsum dolorem officiis veniam consectetur unde, quasi aspernatur est delectus minus expedita iure. Voluptatibus placeat tempora, et iusto libero eius excepturi voluptas quisquam, maxime. Voluptatum repellendus necessitatibus esse, quaerat dignissimos iusto dolor debitis aliquam saepe. Accusantium magnam earum, ad ipsum quo ut? Facere ea amet, quibusdam natus voluptatibus, sed quaerat commodi aliquam dolorem ipsum, nostrum ipsam ab provident. Blanditiis unde vitae ipsa quaerat veritatis maxime, voluptatem ducimus provident excepturi reprehenderit veniam facere, asperiores suscipit iusto! Expedita, eveniet molestiae, et eos sunt obcaecati fugiat doloribus similique, labore, laudantium tempora vero placeat animi reprehenderit. Fuga consectetur sit ratione inventore a vitae, facilis tenetur quia placeat maiores. Inventore officia magnam, recusandae cum laboriosam facilis modi quasi, eos aperiam possimus voluptatem, vitae impedit mollitia perspiciatis et quos sapiente soluta! Saepe nostrum illo consectetur. Ratione repudiandae saepe atque mollitia, itaque dignissimos, deserunt dolorem doloremque tempore quisquam animi corporis iusto tenetur, error odio, sunt est voluptas voluptatibus rem maxime vitae ea inventore repellendus consectetur. Dicta autem quam impedit quia aut maxime, omnis modi distinctio iure, cupiditate soluta tenetur libero quo eum in illum laborum totam nesciunt! Nostrum, aliquid vero sapiente delectus molestiae veritatis expedita sunt. Quasi, in. Quos, dolor? Doloremque, similique corporis? Architecto distinctio dignissimos odit ratione earum! Ipsa repudiandae sed, deserunt at fuga mollitia recusandae vel placeat, qui officia adipisci similique maxime, vitae non! Similique provident officia pariatur ut quibusdam, placeat facere. Ex similique aperiam inventore impedit pariatur sit porro quas nihil minima beatae mollitia repudiandae explicabo facere, doloremque eaque illo. Optio vel earum perspiciatis dolore quia repellat unde autem recusandae, tempore minima laudantium et voluptas ipsam at. Maiores obcaecati eveniet autem quam inventore numquam ut rerum dolor illo officiis laborum minus nulla, iusto, dignissimos eius consectetur rem! Consequuntur cupiditate quaerat laborum quis, veritatis illum numquam ad, assumenda ipsa fuga facilis aspernatur maxime velit totam deserunt enim, atque laudantium asperiores aut, dolorum neque molestias modi corporis. Deleniti deserunt, ipsam quo consequuntur modi hic, mollitia possimus eligendi dignissimos eveniet fugiat est cum sapiente quos repellendus, accusamus accusantium.</p>
    </article>
</main>

Browser other questions tagged html css bootstrap-3

You are not signed in. Login or sign up in order to post.