Create a responsive design with a sliding side navigation menu-JS Tutorial-php.cn

Create a responsive design with a sliding side navigation menu

In this tutorial, you will create an expandable side navigation menu using JavaScript and CSS. The final product is shown below:

1.Create tag

First, let’s add some markup to the side menu:

 × About Features Contact Us 
     
  This Side Navigation Menu Looks Good!
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Copy after login

Here you can see we created a side menudivusing thesidenavclass. Next, we added the actual top bar navigation via the

tags, and we used SVG for the side menu icon.

Remember to put all the content of your website into adiv id="main"container so that it slides to the right.

2.Writing JavaScript code

Next, let's add JavaScript that will use theham-iconclass to listen for click events on the hamburger icon, as well as the close button that appears after the side navigation menu slides onto the screen.

document.querySelector("a.ham-icon").addEventListener("click", function(event){ document.getElementById("sideNavigation").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; }); document.querySelector("a.close-btn").addEventListener("click", function(event){ document.getElementById("sideNavigation").style.width = "0"; document.getElementById("main").style.marginLeft = "0"; });

Copy after login

Clicking on the hamburger icon should reveal the side navigation. We do this by setting the width of the navigation to250pxand also adding a left margin of250pxto the main site content.

Clicking the close button should hide the side navigation. To do this, we change the width of the navigation back to 0, while also setting the left margin of the main site content to 0.

3.Using CSS styles

Finally, we need to use some CSS to style the side menu and links on the page. CSS will place all web page elements exactly where we want them. We will also apply some simple animation with the help oftransitionproperties. Let's look at CSS one part at a time.

.sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; padding-top: 4rem; transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); font-family: "Bebas Neue"; } .sidenav a { padding: 0.5rem 1rem; text-decoration: none; color: #bdbdbd; display: block; transition: 0.4s; white-space: nowrap; font-size: 2rem; } .sidenav a:hover { color: white; background: #9e9e9e; }

Copy after login

We set the side navigation'sheightto100%and its initialwidthto0to make it hide. However, the content of the side navigation will remain hidden only if the value of theoverflow-xattribute is set tohidden.

The transition property ensures that changes in side navigation width don't happen suddenly, and the easing feature makes it a bit elastic.

For links within the side navigation, we set the value of thewhite-spaceattribute tonowrapso that the menu text does not overflow multiple lines.

.sidenav .close-btn { position: absolute; top: -1rem; right: 1rem; font-size: 5rem; } .sidenav .close-btn:hover { background: initial; transform: scale(1.2); }

Copy after login

The CSS styling above separates our close button from the other links in the side navigation. We applied absolute positioning to the close button and prevented its background from turning light gray on hover. It also increases in size by 20% when the user hovers over it.

The following CSS will now ensure that the main content position moves in sync with the navigation menu by using the same transition duration and the same easing function. Setting the value of theoverflow-xproperty tohiddenensures that horizontal scroll bars do not appear as content moves.

#main { transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); padding: 20px; width: 100%; } body { overflow-x: hidden; }

Copy after login

We can also add a little rotational movement to the hamburger icon with the help of the following CSS. It rotates the hamburger icon 180 degrees in 0.5 seconds.

a svg { transition: all 0.5s ease; } a svg:hover { transform: rotate(180deg); }

Copy after login

Finally, let’s make the navigation menu responsive by adjusting the spacing and size of the links using the following CSS. It ensures that the menu does not stretch out of scope on screens with less vertical space.

@media screen and (max-height: 480px) { .sidenav { padding-top: 3rem; } .sidenav a { font-size: 1.5rem; } }

Copy after login

At this point your navigation menu should look similar to the following CodePen demo.

4.Remove slideshow

To make the menu appear without slide animation, simply change the CSS propertytransition, as shown in the abbreviated form below:

.sidenav { transition: 0s; } #main { transition: margin-left 0s; }

Copy after login

This will make the changes appear immediately since there is no delay specified intransition. The default value we use is0.5s.

in conclusion

Creating a side menu only requires a few lines of code and does not require the use of many resources. Make your code responsive to different device screen resolutions by modifying your CSS by adding media queries for your specific cases.

To take it a step further, you may want to use a CSS framework like Bootstrap or Bulma to style your menu.

This article has been updated with a contribution from Monty Shokeen. Monty is a full-stack developer who also enjoys writing tutorials and learning new JavaScript libraries.

The above is the detailed content of Create a responsive design with a sliding side navigation menu. For more information, please follow other related articles on the PHP Chinese website!