Is there a way to transform these buttons into a sidebar menu instead?

I'm working on an admin home page in HTML that currently displays buttons like "View Personal Information" and "View Expense Claims". I'd like to transform these buttons into a sidebar menu. Can someone guide me on what CSS code I need to add? Your help is much appreciated, thank you!

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel = "stylesheet" type = "text/css" href = "main.css">
  <title>Admin Home Page</title>
</head>

<body>
  <form action="MainpageOptions" method="post">
    <h1>
Admin Home Page
</h1>

    <input type="submit" value="View Personal Information" name="vpi">
    <br>
    <br>
    <input type="submit" value="View Expense Claims" name="vec">
    <br>
    <br>
    <input type="submit" value="View Payslips" name="vps">
    <br>
    <br>
    <input type="submit" value="Change Password" name="cp">
    <br>
    <br>
    <br>
    <br>
    <input type="submit" value="Maintain Employee Information" name="mei"> 
    <br>
    <br>
    <input type="submit" value="Maintain Tax Information" name ="mti"> 
    <br>
    <br>
    <input type = "submit" value="Maintain Payroll Items" name = "mpi"> 
    <br>
    <br>
    <input type = "submit" value = "Maintain Timesheet" name = "mts"> 
    <br>
    <br>
    <input type = "submit" value = "Maintain Employee Expenses" name = "mee"> 
    <br>
    <br>
    <input type = "submit" value = "Run Payroll" name = "rpy"> 
    <br>
    <br>
    <input type = "submit" value = "Generate Reports" name = "grp">
  </form>
</body>

</html>

Answer №1

Check out this link for a live demo.

I recently wrapped the entire menu in a DIV and included the following CSS:

<div id="adminSidebar">
#adminSidebar{float:left;background:lightgrey;}
#adminSidebar input{padding:5px;margin-bottom:5px;width:100%}

Feel free to experiment with the design, but this serves as a basic illustration.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`Jump-start Your Development with jQuery Lightbox Centering`

Recently, I implemented a lightbox effect for images on my website. However, I encountered an issue where the lightbox was not centering properly in the window upon initial click. Instead, the lightbox would appear at the bottom of the page on the first cl ...

I am looking to switch the content between two divs. Specifically, I want to take the content from div 1 and move it to div 2, while moving the

I am facing a challenge involving three divs. One of them is the main div, while the other two are positioned below it and contain different content. I am trying to find a way to swap the content between div one and div two in such a way that the original ...

An unusual visual anomaly (a small line appears) when hovering over a button in the web browser

There is a peculiar issue with some buttons on a web page where a strange line appears on the right side when hovering over the button. This problem only affects the first two out of three buttons, possibly because there is no fourth button to trigger the ...

Forget the function once it has been clicked

I'm looking for a solution to my resizing function issue. When I press a button, the function opens two columns outside of the window, but I want to reset this function when I click on another div. Is there a way to remove or clear the function from m ...

The Heading I am trying to navigate to is partially obscured by the fixed topbar

I admit my code is quite messy, but this is my first project and I'm still figuring out how to properly structure it. I attempted to use margin with h2::before in CSS, and it sort of worked, but it caused other issues with the text layout. I've h ...

How can the Multi-tiered Dropdown Menu be Enhanced?

I am in search of creating a multi-level accordion menu. I have developed this menu ( http://codepen.io/anon/pen/ogdovx ) until now but I am fairly new to jquery and feeling stuck when it comes to advancing it further. How can I enhance this? My requireme ...

Establishing communication between a parent window and a popup window that have distinct domains

I'm currently developing a browser extension using JavaScript. My main tasks include: Sending javascript objects from a webpage located at "foo.com" to a popup page on "bar.com" For example, from "foo.com/some_page/" to "bar.com/another_page.htm ...

The function is not functioning correctly for every element within the array

I am currently developing a shopping cart that populates data from local storage. Here is a snippet of the code: var arrayLength = cartarry.length; for (var i = 0; i < arrayLength; i++) { var id = cartarry[i].id; var name = cartarry[i].name; ...

Can the value of a CSS class be obtained even if it is not being used?

I have an application that pulls data from a database and displays it with associated metadata that dictates the display style. Let's simplify it and say the only metadata is the size of the square it should appear in. For example: dataArray : { ...

What is the best way to establish a minimum width in pixels and a maximum width determined by the variable width of the browser window?

In this scenario: http://jsbin.com/anoyik/edit#preview http://jsbin.com/anoyik/edit#source Is there a way to make the red box's width a minimum of 200px and allow it to expand as the browser window's width increases horizontally? ...

Scrolling CSS Divisions Along the Horizontal Axis

.group { background: #000; margin-left: 25px; margin-right: 25px; padding: 15px; width: inherit; white-space: nowrap; overflow-x: auto; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .item { margin: 3px; backgro ...

Is it possible to send a POST request to PHP without reloading the page

URGENT UPDATE - REQUESTING ASSISTANCE! ISSUE WITH POSTING DATA TO SQL SERVER WITHOUT PAGE REFRESH I have extensively searched online forums for a solution to my problem, but I keep encountering the same issue. My goal is to submit data without reloading t ...

An HTML form featuring various submit buttons for accomplishing different tasks

After searching extensively, I have come across solutions that are similar but not quite right for my specific situation. Here's what currently works for me: <script type="text/javascript"> function performTask1(a, b) { window.open('intern ...

How can I make an HTML button function with a JavaScript script?

When I click a button in an HTML file, it should trigger a function in a JavaScript file to display an alert that says "hey." However, this simple task is not working for me and I am unsure why. Java Script is enabled in my browser (Google Chrome) and I am ...

unable to decrease the dimensions of the image within the next/image component

Why won't the image size change? I've attempted to adjust the width and height in the component and also tried styling with className, but no luck. The image only seems to resize when using a regular img tag. Here is my code: function Header() ...

How can the parent div's height be determined by the child div when using position: absolute?

I am struggling with setting the height of a parent div that contains a nested child div with absolute positioning. The child div has a fixed height of 652px, but I cannot seem to get the parent div to match this height. I have tried adjusting the clear an ...

Retrieve the HTML form field during an AJAX request

My task involves creating dynamic fields with labels based on user input. To clarify: I prompt the user to select a date range, and I want to generate label and input field for each date within that range. To achieve this, I implemented an AJAX function ...

What are the implications of storing data on the browser in the form of a JavaScript array?

Below is the code I have written: var back_arr = [], forward_arr = [], i = 1; $('button').on('click', function(){ var new_value = $('input').val(), old_value = $('.content').html(); i = i + 1; ...

Modifying an image on a website with XML information and jQuery

I'm in the process of revamping my website's HTML structure and switching to using an XML file for content. The jQuery script I have is as follows: <script> function extractSiteName() { var URL = window.location.href; var das ...

having difficulty setting up tabs using uib-tabset

I have been experimenting with dynamically creating tabs using uib-tabset. Each tab is supposed to contain a different form, but the issue I am facing is that the textbox from the first form is being overwritten by the newly generated tab. When I enter d ...