Guide on setting up sidebar navigation

Question

Guide on setting up sidebar navigation

I am looking to enhance my html page with a sidebar navigation menu. Here is the current code snippet:

    <html>
    <head>
    <title>Admin dashboard</title>
    </head>
      <header style="height:100px; background-color:#666; padding-   top:35px"><h2 style="color:#FFF">Dashboard</h2></header>
     <body>
     <div style="width:100%; height:100px">

       <div style="background-color:#aaa; height:550px;width:200px;float:left;">
       <div><b>Main Menu</b></div>
       HTML<br />
       PHP<br />
       PERL...
       </div>
       <div style="background-color:#eee; height:550px;width:1132px;float:left;">
      <p></p>
      </div>



      <div style="background-color:#b5dcb3;clear:both">
    <center>
     Copyright@GIMT
    </center>
    </div>
    </div>
    </body>
    </html>

I would like to incorporate a sidebar navigation menu into the existing code. This is the part where I want to make the addition:

<div style="background-color:#aaa;  height:550px;width:200px;float:left;">
             <div><b>Main Menu</b></div>
              HTML<br />
                PHP<br />
               PERL...
              </div>

Can anyone guide me on how to achieve this?

html css

Answer 1

Answer №1

Before we dive in, here are a few important notes:

Always include <!DOCTYPE html>.
Your content should always be within the <body> tags. The <header> tag should come after.
Avoid using inline styles.
Utilize CSS positioning for fixed elements and other styling purposes.

Code Snippet

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

header {
  background-color: #666;
  color: #fff;
  line-height: 2.5;
  padding: 10px;
  height: 80px;
}

main {
  padding-left: 220px;
}

aside {
  position: fixed;
  left: 0;
  width: 200px;
  background-color: #aaa;
  top: 100px;
  bottom: 0;
  overflow: auto;
}

<header>
  <h1>Dashboard</h1>
</header>
<main>
  <aside>
    <h3>Main Menu</h3>
    <ul>
      <li>HTML</li>
      <li>PERL</li>
      <li>PHP</li>
    </ul>
  </aside>
</main>

Note: I've included overflow: auto for the sidebar to ensure that if content exceeds the area, scrollbars will appear without affecting the main content's scrollbars.

Code Snippet with Extended Content

$(function () {
  $("aside ul").append(function () {
    return Array.apply(null, {length: 101}).map(Number.call, Number).map((x) => "<li>Item " + x + "</li>").join("");
  });
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

header {
  background-color: #666;
  color: #fff;
  line-height: 2.5;
  padding: 10px;
  height: 80px;
}

main {
  padding-left: 220px;
}

aside {
  position: fixed;
  left: 0;
  width: 200px;
  background-color: #aaa;
  top: 100px;
  bottom: 0;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h1>Dashboard</h1>
</header>
<main>
  <aside>
    <h3>Main Menu</h3>
    <ul>
      <li>HTML</li>
      <li>PERL</li>
      <li>PHP</li>
    </ul>
  </aside>
</main>

Answer 2

Before we dive in, here are a few important notes:

Always include <!DOCTYPE html>.
Your content should always be within the <body> tags. The <header> tag should come after.
Avoid using inline styles.
Utilize CSS positioning for fixed elements and other styling purposes.

Code Snippet

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

header {
  background-color: #666;
  color: #fff;
  line-height: 2.5;
  padding: 10px;
  height: 80px;
}

main {
  padding-left: 220px;
}

aside {
  position: fixed;
  left: 0;
  width: 200px;
  background-color: #aaa;
  top: 100px;
  bottom: 0;
  overflow: auto;
}

<header>
  <h1>Dashboard</h1>
</header>
<main>
  <aside>
    <h3>Main Menu</h3>
    <ul>
      <li>HTML</li>
      <li>PERL</li>
      <li>PHP</li>
    </ul>
  </aside>
</main>

Note: I've included overflow: auto for the sidebar to ensure that if content exceeds the area, scrollbars will appear without affecting the main content's scrollbars.

Code Snippet with Extended Content

$(function () {
  $("aside ul").append(function () {
    return Array.apply(null, {length: 101}).map(Number.call, Number).map((x) => "<li>Item " + x + "</li>").join("");
  });
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

header {
  background-color: #666;
  color: #fff;
  line-height: 2.5;
  padding: 10px;
  height: 80px;
}

main {
  padding-left: 220px;
}

aside {
  position: fixed;
  left: 0;
  width: 200px;
  background-color: #aaa;
  top: 100px;
  bottom: 0;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h1>Dashboard</h1>
</header>
<main>
  <aside>
    <h3>Main Menu</h3>
    <ul>
      <li>HTML</li>
      <li>PERL</li>
      <li>PHP</li>
    </ul>
  </aside>
</main>

Guide on setting up sidebar navigation

Answer №1

Similar questions

"Implementing a feature to apply the 'current' class to a div

Material UI does not support the inline attribute for applying CSS properties

Developing a desktop app using HTML5

Creating a new webpage that automatically populates with multiple images from a server using PHP

When the width of the element is set to 100vw, it disrupts the

Should you create an archive - Retain outcomes or retrieve them whenever needed?

Guide to creating the onclick feature for a dynamic button in Meteor

Tips for merging identical media queries into a single query using SASS

Responsive design with Bootstrap grids

The alignment of the horizontal menu items is off

Unleash the potential of a never-ending expansion for grid cells on Canvas

Live updates for downloads page menu using HTML and Bootstrap

Creating uniform height for dynamic MdBootstrap cards

JavaScript code for validating two passwords is malfunctioning

Could use some assistance in developing a custom jQuery code

Creating PDF files with PDFkit in Node.js while rendering HTML data

Minimum and Maximum Price Input Field

Toggle Class Based on Scroll Movement

Toggling the visibility of a div using JavaScript

unable to adjust the maximum height limit