What is the best way to implement a sliding menu when clicked using HTML and CSS?

In my HTML page, there is a side menu bar displaying a list of dashboards using Django. I want this left-side menu to show only partially when logged in and fully expand after clicking on it.

The HTML code snippet for the sidebar looks like:

<div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
        <li><span style="color:blue; font-weight:bold;">Dashboards</span></li>     
 {% for Dashboard in dashboards %}
<li><a href="{{ Dashboard.d_url }}" target="iframe_a">{{ Dashboard.d_name }}</a></li>
           {% endfor %}
          </ul>
          
        </div>

As I am not well-versed in jQuery, I am wondering if there are ways to achieve this using just CSS and JavaScript. When I open the HTML file, it appears as shown, but I would like it to expand fully upon clicking on an icon.

htmlcssdjangodjango-templatescss-animations

Answer №1

It seems like you are working on implementing a transition effect using CSS, possibly something along the lines of transition: left 1s; or transition: transform 1s. When your button is pressed, it toggles a class to change styles like left or transform: translateX(value);, similar to this example.

Additionally, consider whether this menu will affect the layout of your other content.

This involves a basic transition and layout concept, which may or may not meet your specific needs. For compatibility with older browsers such as IE9, you may want to explore animations using jQuery or jQuery UI.

Answer №2

Take a look at this JavaScript code snippet that is essential for your project

$("#menu-button").bind( "click", function() {
  $('#mobile-menu').toggleClass('open');
  $('#overlay').show(0);

});

$("#overlay").bind( "click", function() {
  $('#mobile-menu').removeClass('open');
  $('#overlay').hide(0);
  //this ensures that clicking outside closes the menu; however, on mobile devices, it may immediately undo the class addition above
});


$('#menu-button').click(function(){
   $(this).find('span').toggleClass('glyphicon-chevron-right glyphicon-chevron-left')
});

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

Creating a interactive navigation bar with External JSON data in HTML and JavaScript

Is there a way to create a dynamic MenuBar by using an external JSON file? How can I write HTML code to fetch and display JSON data dynamically? What is the process for reading a JSON file? //JSON File = Menu.Json {"data": [{"id": "1", "text": "F ...

javascripthtmljsonajax

Showing various records dynamically with AngularJS

I have some AngularJS Code below where I am currently adding four records to roleList. However, I would like to be able to add any number of records to roleList. Is there a way for me to achieve this? $scope.roleList = [ {"companyName": "Company 01" ...

javascriptjqueryhtmlcssangularjs

Achieving uniform cell height distribution in Foundation XY-grid using flexbox

When utilizing the Foundation XY-grid, I encountered an issue with distributing cell heights evenly within a nested grid-y inside a cell using the .auto class on the parent cell. In a scenario with 2 cells in a grid-y, the desired outcome is 50%/50%. This ...

htmlcssflexboxzurb-foundation

@keyframes shimmering-fade

I'm attempting to create a text animation effect (please see video) but I'm struggling to find the solution!! Can someone assist me with this? Should I use JavaScript for a better result? h1.fadeinone { animation: fadeinone 10s;} h1.fadeintwo ...

javascriptjqueryhtmlcsscss-animations

Django - the decision to save a model instance

Having two Django models, ModelA and ModelB, where the latter contains a foreign key relationship to the former. class ModelA(models.Model): item = models.BooleanField(default=True) class ModelB(models.Model): modela = models.ForeignKey(ModelA) ...

pythondjangodjango-models

"DataTransfer object in IE 10 does not contain any information when using drag and drop

I am struggling with my drag and drop upload code in IE 10. The event handlers in my code are as follows: dragCatcher.on('drop', function (e) { e.preventDefault(); e.stopPropagation(); console.log(e.originalEvent.dataTransfer.files); }).on ...

javascriptjqueryhtmldrag-and-drop

Display the image on the webpage only if it is present, otherwise display no image

I want to include an image on my HTML page only if it is present on my computer (meaning I provide a path and it verifies). If the image does not exist, I do not want anything to be displayed. How can I create a function that verifies if the image exists ...

javascriptpythonhtmldjango

Troubleshooting: Replacing onClick() in HTML with JavaScript when addEventListener is not functioning as expected

I've tested several solutions already, but unfortunately, none of them seem to work for me. My Flask application utilizes a combination of HTML and JavaScript to present a few web pages. At the moment, I still have some inline code (which is also pr ...

javascripthtmlevent-listener

My website experiencing issues due to Firefox 23.0.1 altering the CSS and causing disruptions

After setting up a test site for a client to review as part of a proof of concept, I noticed an unexpected white line while checking across different browsers. (loading correctly in all browsers except FF) In Firefox, there appears to be a thin ~10px li ...

htmlcssfirefoxbackground-color

The Bootstrap row fails to align elements side by side as intended

I'm trying to arrange elements in my navigation menu side by side, so I decided to use the row class from Bootstrap 5.0. However, they are still stacking on top of each other. I am currently working on a Flask project and using Jinja to some extent. ...

htmlcssbootstrap-5

Steps to create inactive HTML with a loading GIF displayed

When the sign-up button is clicked, a modal pops up. After inputting data, upon hitting the "sign up" button, I would like the actual popup's HTML content to become inactive and display a loading GIF icon in the center until an AJAX response is receiv ...

javascriptjqueryhtmlcssajax

Include a <button> element in the Angular ng2-pdf-viewer framework

I am looking to showcase a PDF file on my component using ng2-pdf-viewer. One of the requirements is to include a download button that overlaps the PDF file. I have searched for references on how to achieve this but unfortunately, I haven't found any ...

htmlcssangulartypescriptpdf

Unexpected problem with redrawing HTML application in Android WebView

I created a basic nixie clock app using HTML and wrapped it in a WebView for use on Android. It consists of one HTML file, a JS file, a CSS file, and ten digit images. After a few hours, I noticed stripes appearing in the center of the screen where the an ...

androidhtmlcsswebviewdrawable

Learn how to display two different videos in a single HTML5 video player

Seeking a solution to play two different videos in one video element, I have found that only the first source plays. Is jQuery the answer for this problem? HTML Code: <video autoplay loop id="bbgVid"> <source src="style/mpVideos/mpv1.mp4" type ...

javascriptjqueryhtmlvideo

Check out this unexpected margin issue affecting the first element within the Container! Can you please provide an explanation for this anomaly?

Take a moment to check out this fiddle. In Container1 and Container2, the background color is set to #ccc, and h1 and .logo div have margins. While the left and right margins are working properly, the top and bottom margins are not functioning as expected. ...

htmlcssmargin

Automatically updating multiple divs using Jquery for a seamless user experience

I'm currently designing a dashboard for a large display at my workplace. I've successfully set up one div to automatically refresh a PHP request page, but I'm struggling to figure out how to apply this function to another div for a different ...

phpjqueryajaxhtml

Is it possible for individuals on the local network to view the webpage?

Recently, I developed a login page in HTML that prompts users for their username and password. The information is then sent to ABC.php, and upon successful authentication, they are redirected to another website. To make this work, I set up a xampp server. ...

phphtmlwebserver

What is the best way to align social media icons at the center of the footer section?

I've been working on trying to center the social media icons in the footer, but no matter what changes I make in the code, there's been no visible difference. Can anyone offer some assistance? footer { background-color: #FFF; color: white; ...

htmlcssbootstrap-4

"Encountering an issue with AngularJS where the selected ng-model value is

I'm utilizing plain options for the select tag because I only need to display a few options when they meet a certain condition. In order to perform other operations, I require the value of the selected dropdown in the controller. However, the issue is ...

javascriptjavahtmlangularjs

Incorporating a divider into a Material-UI MenuItem causes an additional border

I needed a way to separate the MUI MenuItem using a divider, but it resulted in an extra border around the item where the divider was placed. The highlighted section in the image shows the item that has the divider= true setting and the extra border. Is th ...

cssmaterial-uimenuitem