What is the best way to implement a seamless left-to-right sliding effect for my side navigation using CSS and Javascript?

I am currently working on creating a CSS and JavaScript side navigation. Below is the code that I have implemented so far:

var nav = document.getElementById('nav');
function show(){
nav.style.display = "block";
}
.side-nav{
background-color:black;
height:100%;
width:250px;
position: absolute;
display:none;
}
#myLink{

color:gray;
text-decoration: none;
display:block;
margin-left:15px;
margin-bottom:10px;
font-size:25px;
transition: .5s;
font-family: 'Marck Script', cursive;
margin-top:10px;

}
#myLink:hover{
  color:white;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css2?family=Marck+Script&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class = "side-nav" id = "nav">
        <div id = "myLinks">

            <a href="#" id="myLink">Home</a>
            <a href="#" id="myLink">Contact</a>
            <a href="#" id="myLink">Blog</a>
            <a href="#" id="myLink">Products</a>

        </div>



    </div>
    <a href="#" onclick="show();">Show nav</a>
    <script src="script.js"></script>

  </body>
</html>

I am seeking advice on how to create a smooth sliding effect from left to right with the side navigation. Can this be achieved using only CSS or do I still need to incorporate JavaScript? Any help would be greatly appreciated! Thank you!

javascripthtmlcss

Answer №1

Are you interested in something like this?

var menu = document.getElementById('menu');
function display(){
menu.classList.toggle("active");
}
.side-menu{
background-color:black;
height:100%;
width:250px;
position: absolute;
display:none;
}
#navLink{

color:gray;
text-decoration: none;
display:block;
margin-left:15px;
margin-bottom:10px;
font-size:25px;
transition: .5s;
font-family: 'Marck Script', cursive;
margin-top:10px;

}
#navLink:hover{
  color:white;
}

.side-nav.active{
   display:block;
   animation:animate 1s linear forwards;
}

@keyframes animate{
   from{
      opacity:0;
       width:0;
   }
   to{
   width:250px;
   opacity:1;
   }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Custom HTML Page</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css2?family=Marck+Script&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class = "side-menu" id = "menu">
      <div id = "navLinks">
        <a href = "#" id = "navLink">Home</a>
        <a href = "#" id = "navLink">About</a>
        <a href = "#" id = "navLink">Services</a>
        <a href = "#" id = "navLink">Contact</a>
      </div>
    </div>
    <a href = "#" onclick = "display();">Show menu</a>
    <script src="script.js"></script>
  </body>
</html>

Answer №2

If utilizing jQuery is your preference, consider incorporating the following code snippet. Additionally, I've included a close button for enhanced functionality.

$( '.show-navigation' ).click( function() {
  $( '#navigation' ).animate( {width: 'toggle'} );
} );
.side-navigation{
  background-color:black;
  height:100%;
  width:250px;
  position: absolute;
  display: none;
}

#myLink{
  color:gray;
  text-decoration: none;
  display:block;
  margin-left:15px;
  margin-bottom:10px;
  font-size:25px;
  transition: .5s;
  font-family: 'Marck Script', cursive;
  margin-top:10px;
}

#myLink:hover{
  color:white;
}

#nav .show-navigation {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css2?family=Marck+Script&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class = "side-navigation" id = "navigation">
      <div id = "myLinks">

      <a href = "#" id = "myLink">Home</a>
      <a href = "#" id = "myLink">Contact</a>
      <a href = "#" id = "myLink">Blog</a>
      <a href = "#" id = "myLink">Products</a>
      <a class="show-navigation" href = "#">Close</a>
      </div>
    </div>
    
    <a class="show-navigation" href = "#">Show navigation</a>
    <script src="script.js"></script>
    
  </body>
</html>

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

Issue with vertical navigation bar

Currently working on creating a vertical navigation bar without any styling. It's challenging to figure out how to align the items properly side by side. You can check out the basic functionality at . When clicking on 'Android', I want the g ...

htmlcss

HTML file selector with multiple file selections - accessing active files

Encountered a problem while using Firefox version 73 on Windows 7: In my code, I am using a multi-file-picker in HTML to upload up to 100 files in parallel: <input type="file" id="files" name="files" multiple> The files are sent to a REST API for ...

htmlfirefoxmultifile-uploaderfilepicker

Utilize jQuery script on every single element

Is there a way to implement a jquery function on elements that are dynamically loaded via ajax? <span class="h">Test</span><br /><br /> <span class="h">Test</span><br /><br /> <span class="h">Test</ ...

javascriptjqueryajaxclick

Tips for sending a JavaScript object to a Java Servlet

I'm facing a challenge with passing a JavaScript object to a Java Servlet. I've experimented with a few approaches, but nothing has worked so far. Below is the code snippet I've been working on: $.ajax({ url: 'TestUrl', d ...

javascriptjavaajaxtomcatservlets

In CodeIgniter, the $this->input->post() function consistently returns an empty value

I'm encountering an issue where the value from an AJAX post always turns out empty. Even after confirming that the value is correct before the post, I'm unable to retrieve it using $this->input->post() HTML <?php if ($product_info-> ...

javascriptphphtmlajaxcodeigniter

In TypeScript, how are angle brackets like methodName<string>() utilized?

Could someone please assist me in understanding why we use angular brackets <> in typescript? For example, I have provided some code below and would appreciate an explanation. export class HomePage { constructor(public navCtrl: NavController) ...

javascriptangularjstypescript

Tips for limiting the .click function to only the initial image in order to prevent loading all images within the container

I am facing a situation where multiple images are being returned into a specific div, which is working as intended. <div class="go" id="container"></div> Upon clicking on an image, it is loaded into a modal popup. However, instead of capturin ...

javascriptjqueryhtml

Execute AngularJS $q.all, regardless of any errors that may occur

Is there a way to ensure $q.all is triggered even if the promises return errors? I'm working on a project where I need to make multiple $http.post requests, sending user-inputted values from text fields. The backend (Django REST framework) has a valu ...

javascriptangularjspromiseangular-promise

Generating an array of keys from duplicated values in Typescript

My data is structured in the following array format: { itemTitle: 'value example', itemType: 'value example', itemDescription: 'value example', itemFamily: 'Asset', }, { itemTitle: 'val ...

javascriptarraystypescript

Get information collectively in node.js

How can I retrieve 10 records from a MongoDB collection using NodeJs, with each batch containing 10 records? ...

javascriptnode.jsmongodb

Date range within a conditional statement

I have encountered this code snippet: function auto_select_param_call_time() { if (today() == date("02.01.2017") || today() == date("03.01.2017")) { auto_click_param("call_time", "Non-working day"); } else { //Do something else ...

javascriptdateif-statement

Can the HTML attributes produced by AngularJS be concealed from view?

Is there a way to hide the Angular-generated attributes such as ng-app and ng-init in the HTML code that is output? I want to present a cleaner version of the HTML to the user. Currently, I am using ng-init to populate data received from the server, but ...

javascripthtmlangularjs

Displaying images in a React app using Node.js

I receive the image from the user as formdata Here is how I structured the Schema for the image The Image has been successfully stored in Monogodb This is my process of fetching image information using Axios I implement code for rendering the image on the ...

javascriptmongodbreact-hooks

Experiencing difficulties managing NodeJS session

I've been attempting to integrate a login feature into my nodejs-based web application. const express = require('express'); const app = express(); const route = express.router; const sessions = require("client-sessions"); app.use(sessions ...

javascriptnode.jsexpresssessionauthentication

My approach to using this style in React involves utilizing the class attribute as follows: "class[attribute]" [Updated version 2]

When trying to customize an element based on its attribute, the process is a bit different in React compared to pure CSS. Here's an example: <div class='something' data-test='4'></div> ... .something[data-test] { bac ...

cssreactjs

PHP pattern matching equivalent to selecting elements based on their position in CSS

Struggling with the logic to identify objects in an array by their position. Seeking a PHP equivalent of nth-child(5n + 1) condition, which targets positions like 0, 5, 10, and so on within a loop. One approach could be to divide by 5 and check for whole ...

phpcssregex

Issue: parsing error, only 0 bytes out of 4344 have been successfully parsed on Node.js platform

I've been attempting to utilize an upload program to transfer my files. The specific code I'm using is as follows: app.post('/photos',loadUser, function(req, res) { var post = new Post(); req.form.complete(function(err, fields, fil ...

javascriptnode.jsmongodbexpressmongoose

The <div> tag fails to comply with the Display: inline CSS property

I need help with a web development issue as I am new to this field. My problem is that I am trying to display three divs next to each other, but despite applying display:inline-block to them, they still appear stacked on top of each other instead of side b ...

htmlcssinlinedisplay

Checking the status of an object using a Jasmine spy call in an Ajax method

Currently, I am unit testing an Angular controller that relies on a Rails Resource factory to manage data exchange with a Rails application. Specifically, POST requests are handled by calling a method on the model, like so: $scope.resource.update().then(s ...

javascriptajaxangularjsunit-testingjasmine

Change the element's color to match the default anchor link

Can CSS be utilized to match an element's color with the default <a> color? If affirmative, what is the method? ...

css