Prior to beginning a new project, I'm interested in exploring the possibility of implementing a sliding sidebar for mobile and tablets. On desktop, however, I envision a fixed sidebar that is part of the main container layout as shown below:
<div class="container">
<div class="col-md-9"> </div>
<div class="col-md-3" id="sidebar"> </div>
</div>
I am uncertain about what approach to take to achieve this effect. Should I use media queries or JQuery, for instance?
Feel free to use this code snippet for your development needs.
Give this a shot:
.content {
background: gray;
min-height: 100vh;
order: 2
}
#sidebar {
background: green;
width: 200px;
}
#sidebar.show {
transform: inherit;
display: block;
background: red;
}
.hambarger {
display: none;
}
@media screen and (max-width: 767px) {
#sidebar {
display:none;
transform: translateX(-100%);
}
.hambarger {
display: inline-block;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid d-flex w-100">
<div class="col content">
<button class="hambarger" onclick="document.getElementById('sidebar').classList.toggle('show')">menu</button>
</div>
<div class="col-md-3" id="sidebar"> </div>
</div>== Appreciate it ==
It seems like you are utilizing Bootstrap for your project, which already includes a navbar component that can achieve what you're looking for!
Check out Bootstap 4v Navbar here
If you prefer to create a custom solution, you can also utilize media queries and CSS or even JQuery:
if (jQuery(window).width() < 900) {
//select the element and apply styling
}
Take a look at this example using Bootstrap 4.3 with some customized CSS. To see the left side alignment, view the snippet in full-screen mode.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidebar {
height: 100vh;
width: 250px;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
.hamburger {
z-index: 999;
font-size: 30px;
cursor: pointer font-size: 30px;
position: fixed;
top: 5px;
left: 5px;
}
@media screen and (max-width: 768px) {
.sidebar {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 0;
}
}
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
</style>I have a problem with displaying HTML content fetched from a PHP script using the jQuery $.post method: $.post('{$site_url}tests/tests/content', params, function (data) { $('#some-div1').html(data[1]); $('#some-div2').htm ...
I am trying to retrieve a variable within an iframe from the parent index.html. Here is the index.html code: <!doctype html> <html lang="en-us> <head> <title>Test</title> </head> <body> <p>Test& ...
Utilizing wordpress along with ajax in a frontend form, I require assistance for managing and uploading the featured image. The main issue revolves around the handling of the featured image. Here is an example of my html structure: <form id="msform" ac ...
I am in need of assistance with implementing an "auto-saving" feature for a textarea. Essentially, I want to save a draft in our database whenever a user is typing in the textarea. For example, imagine a scenario where a user is writing a blog post. Every ...
Currently, I am utilizing the Selenium webdriver for Angular Automated testing. My scenario involves displaying a tooltip icon with an error message if the data provided is invalid. If the data is valid, the tooltip icon does not show up. Although, I have ...
I am currently in search of a web hosting provider for a website I have created. The site features some performance-heavy animations, particularly due to a fullscreen slider with filter and scaling transitions. I need a provider that can ensure optimal per ...
Take a look at this: http://jsfiddle.net/jqs4yy0p/ JS $('div').addClass('switch').on('transitionend', function(e){ alert('end'); }); CSS div { background-color: red; /*transition: background-colo ...
Dear Jason, [Serializable] public class MyModel { public int Id {get;set;} public DateTime date {get;set;} } [HttpPost] public ActionResult SchedulesDropdownIndexChanged(MyModel schedule) { objScheduleModel = new ScheduleModel( ...
I am attempting to assign a function to a variable (req): var req; $('#complete-field').bind('keyup', () => { var url = prefixUrl + escape($('#complete-field').val()); req = function() { if (window.XMLHttpRequest) { ...
Seeking a solution to automate the selection process without writing individual JS scripts for every input. For instance, having 10 double inputs (total of 20 inputs) and utilizing the each() function or other methods by only declaring selectors. Find th ...
Recently, I started learning about selenium and encountered challenges when it comes to selecting elements from dropdown menus. The issue arises when I try to implement the code using PhantomJS - the same code that works perfectly fine with Firefox as WebD ...
I recently posted a similar question on Stack Overflow, but it seems like the responses there disappear quickly and I didn't receive a satisfactory answer. Personally, I find it easier to understand things when they are related directly to my own cod ...
Need help setting background image from the public folder |_public | |_images | |_icon.png |_src |_components |_TheHeader.vue I'm having difficulty trying to set an image as a background in TheHeader.vue using CSS, but the image is located in ...
In my angular2 component, I am utilizing a third-party JavaScript library. The skin CSS of the component attempts to load images using relative URL paths. Since I am following a component-based architecture, I prefer to have all component dependencies enca ...
Is there a way to remove the cursor from a textbox when it is clicked on? I want the cursor to disappear after clicking on the textbox. jQuery(document).ready(function($) { $(function(){ $('#edit-field-date-value-value-datepicker-popup-0&ap ...
Currently, I am in the process of updating my MUI themes using the overrides functionality. This is how my input field looks like: https://i.sstatic.net/OFAGf.png I am looking to increase the space between the label and the input field. Below is the co ...
This solution works, but I am looking for a more professional approach in order to adhere to the principle of "don't repeat yourself." $("document").ready(function(){ $(".child").each(function(index){ $(this).click(func ...
When considering these two methods: <asp:Label ID="Label1" runat="server"><%# DateTime.Now %></asp:Label> and Label1.Text = DateTime.Now.ToString(); Which approach do you prefer and what is your reasoning behind it? ...
I have been struggling since yesterday to make this work. I just can't seem to get these flex items to fill the container equally in width and height. No matter what I try, it's not cooperating. <html> <meta charset="utf-8"> ...
After using a WYSIWYG-editor (WordPress) to generate HTML content, I am seeking a way to display a preview of this HTML by showing only up to 3 lines of text in HTML format. For example: <p>Hello, this is some generated HTML.</p> <ol> ...