Building a smooth slide-in side panel using only HTML & CSS

@satusanyang

26.9K followers · usually 618 views a post

Views

2.3K

Likes

Comments

Why it worked

The video provides a practical, step-by-step tutorial on a common web design element, appealing to developers and designers looking to enhance their projects with clean, modern, and interactive UI components. The emphasis on using only HTML and CSS, without JavaScript, makes it accessible and demonstrates efficient coding practices.

Summary

This video demonstrates how to build a sleek, responsive slide-in side panel using only HTML and CSS. The tutorial covers structuring the panel with a toggle checkbox and label, adding various settings like dark mode toggles, font size selectors, accent color pickers, and animation controls. It also includes styling for quick links and a close button, emphasizing clean design and smooth transitions without JavaScript.

On-screen text

Building a smooth slide-in side panel using only HTML & CSSnPerfect for quick settings or hidden menus, clean, modern, and responsive!nDAY 23 ISnA FUN ONE.nWE'RE CREATING AnSLEEK SLIDE-INnSIDE PANEL.nTODAY WE'RE BUILDINGnSOMETHING REALLY COOL.nA BEAUTIFUL PANELnTHAT SMOOTHLY APPEARSnOF THE SCREEN.nIT'S PERFECT FORnQUICK SETTINGS,nTHEME CONTROLS, ORnEVEN A HIDDENnMENU THAT KEEPSnYOUR DESIGN CLEANnAND MINIMAL.nTHE BEST PART?nALL USING ONLYnHTML AND CSS.nNO JAVASCRIPT NEEDED.nRIGHT IN ANDnSTART BUILDING OURnSLEEK AND INTERACTIVEnSIDE PANEL.nNOW LET'S CREATEnTHE PANEL ITSELF.nWE'LL WRAP EVERYTHINGnAND A SIDEnTAG THAT'S PERFECTnFOR CONTENT THATnSITS ALONGSIDE THEnMAIN PAGE,nLIKE MENUS ORnSETTINGS. I'LL GIVEnIT A CLASSnCALLED SIDE PANEL,nWHICH WE'LL USEnLATER TO STYLEnAND ANIMATE IT.nIT MORE ACCESSIBLE.nWE'LL ALSO INCLUDEnROLE EQUALS DIALOGUEnAND ARIOMODAL EQUALS TRUTH.nNEXT, WE'LL STARTnADDING SOME QUICKnSETTING OPTIONS INSIDEnOUR PANEL.nTHE FIRST ONEnIS A SIMPLEnDARK MODE TOGGLE.nI'M USING AnUSERS CAN EASILYnTHEME ON OR OFF.nBELOW THAT, WE'LLnCREATE ANOTHER SETTINGnFOR FONT SIZE.nTHIS ONE USESnA SELECT DROP DOWN,nGIVING THE USERnA FEW SIZEnOPTIONS TO CHOOSEnFROM SMALL,nMEDIUM, OR LARGE.nTHESE KINDS OFnPANEL FEEL MOREnINTERACTIVE AND CUSTOMIZABLE.nNOW LET'S STYLEnA FEW MOREnSETTING OPTIONS TOnFEEL COMPLETE.nFIRST, WE'LL INCLUDEnAN ACCENT COLOR PICKER,nWHICH LETS USERSnCHOOSE THEIR FAVORITEnHIGHLIGHT COLOR.nANIMATIONS TOGGLE,nPERFECT FOR TURNINGnMOTION EFFECTS ONnOR OFF.nAND FINALLY, AnNOTIFICATION SWITCH.nTHIS ONE REPRESENTSnALERTS OR UPDATESnWITHIN YOUR SITE.nTHESE DETAILS MAKEnYOUR SETTINGS PANELnLOOK MORE DYNAMICnAND REALISTIC.nEVEN WITH JUSTnHTML AND CSS,nADDING A SECTIONnLIKE THIS GIVESnA PROFESSIONAL TOUCHnTO YOUR DESIGN.nTHIS SECTION DEFINESnCSS VARIABLES INSIDEnTHE COLON ROOT SELECTOR,nWHICH ACTS LIKEnA GLOBAL PLACEnTO STORE COLORSnFOR OUR ENTIREnPROJECT.nNEXT, WE STYLEnTHE BODY WITHnZERO MARGIN TOnREMOVE DEFAULT SPACING.nWE'RE USING THEnPOPPINS FONT FORnA CLEAN, MODERN LOOK ANDnADDING A SMOOTHnVERTICAL GRADIENT FROMnDEEP NAVY TOnDARK BLUE.nCREATES CONTRAST,nOF PADDING GIVESnTHE LAYOUT ROOMnTO BREATHE.nTHE PANEL TOGGLEnCHECKBOX IS HIDDEN.nIT'S JUST USEDnTO CLOSE THE PANEL.nNOW LET'S STYLEnOUR OPEN ANDnCLOSE PANEL BUTTONS.nWE'RE GIVING ITnA BEAUTIFULnDIAGONAL GRADIENT BACKGROUNDnTHAT BLENDS TURQUOISEnA FRESH,nMODERN FEEL. THEnTEXT COLOR ISnDEEP NAVYnSO IT CONTRASTSNICELY AGAINST THEnBRIGHT BACKGROUND.nAND FINALLY, WEnUSE OUR ACCENTnGRADIENT AS THEnBORDER IMAGE SOURCE,nWHICH GIVES THEnBUTTON A SUBTLEnGOWING EDGE THATnTIES IN PERFECTLYnWITH THE OVERALL THEME.nNOW LET'S MOVEnON TO STYLINGnOUR SIDE PANEL,nTHE MAIN SECTIONnTHAT SLIDES INnFROM THE RIGHT.nWE'LL START BYnSETTING ITS POSITIONnTO FIXED,nSO IT STAYSnUSERS SCROLL THE PAGE.nTHE PANEL ISnINITIALLY PLACED OFFnSCREEN BY SETTINGnRIGHT TO NEGATIVE 90%,nAND WHEN ACTIVATEDnIT WILL SLIDEnSMOOTHLY INTO VIEW.nWE ALIGN ITnTO THE VERY TOP,nMAKE IT FULLnHEIGHT, AND GIVEnIT A WIDTHnOF 380 PIXELS,nMAX WIDTH. OF 90%,nSO IT STILLnLOOKS GREAT ONnSMALLER SCREENS.nWILL ADD 28nPIXELS OF PADDINGnCONTENT NICELY SPACEDnAND READABLE.nTHE OVERFLOWY PROPERTYnIS SET TO AUTO,nALLOWING SCROLLING WHENnTHE CONTENT BECOMESnLONGER THAN THEnPANEL ITSELF.nFOR THE BACKGROUND,nWE'RE USING AnVERTICAL GRADIENTnTHAT FADES FROMnA DEEP NAVYnTO A SLIGHTLY LIGHTER SHADE.nTHE BORDER SLICEnAND WIDTH MAKEnTHE GRADIENT WRAPS CLEANLY AROUNDnTHE EDGES,nWHILE A SOLIDnBORDER STYLE KEEPSnIT SHARP AND DEFINED.nWE'LL ADD WHITE TEXT FOR CONTRAST,nPADDING TO MAKEnTO CLICK,nAND SLIGHTLY ROUNDEDnCORNERS FOR AnSOFTER LOOK.nSETTING IT ASnAN INLINE BLOCK LET ITnNEATLY UNDER OUR CONTENT,nWITH SOME MARGINnCREATE SPACE.nHERE, WE'RE MAKINGnSLIDE INTO VIEWnWHEN THE CHECKnBOX IS CHECKED.nBY SETTING THEnRIGHT POSITION TO ZERO,nTHE PANEL SMOOTHLYnMOVES FROM OFF-SCREEN TO FULLY VISIBLE,nCREATING THAT CLEANnSLIDE IN ANIMATIONnALL WITHOUT USINGnANY JAVASCRIPT.nNOW LET'S STYLEnEACH SETTING ITEM.nWE'RE ADDING SOMEnVERTICAL SPACING WITH MARGINnAND USING FLEXBOXnTO POSITION THEnLABELS AND INPUTSnSIDE BY SIDE.nA SUBTLE BOTTOMnBORDER HELPS SEPARATEnEACH OPTION,nAND THE LITTLEnPADDING GIVES THEnLAYOUT ROOM TO BREATHE.nNOW LET'S STYLEnTHE INPUTS INSIDEnOUR SETTING ITEMS.nWE'RE GIVING THEMnBACKGROUND TO MATCHnTHE PANEL THEMEnAND REMOVING ANYnDEFAULT BORDERS FORnA CLEANER LOOK.nA SIX PIXELnBORDER RADIUS KEEPSnTHE EDGES SMOOTH,nWHILE WHITE TEXTnENSURES EVERYTHING ISnEASY TO READ.nFINALLY, A BITnOF PADDING ADDSnBREATHING ROOM,nAND SETTING THEnCURSOR TO POINTERnMAKES THEM FEEL INTERACTIVE.nNOW, LET'S STYLEnTHE QUICK LINK SECTION INSIDE OUR PANEL.nWE'LL REMOVE THEnDEFAULT LIST STYLEnALONG WITH ANYnPADDING OR MARGINSnTO KEEP EVERYTHINGnCLEAN AND ALIGNED.nEACH LIST ITEMnGETS VERTICAL SPACING FOR SEPARATION,nTHEMSELVES USE OURnACCENT COLOR WITHnNO UNDERLINES.nFINALLY, WE ADD AnSMOOTH TRANSITION SOnTHE HOVER ANIMATIONnFEELS NATURAL WHEN HOVERED.nTHE BUTTON FILLSnWITH OUR ACCENT COLOR,nSWITCHES THE TEXTnTO A DARKnSHADE FOR READABILITY,nAND SCALES UPnJUST A BIT,nGIVING IT A CLEAN,nINTERACTIVE FEEL THATnCOMPLETES THE DESIGN.nFINALLY, WE'LL MAKEnTHE DESIGN RESPONSIVEnFOR SMALLER SCREENS.nWE'LL SLIGHTLY REDUCEnTHE PADDING ANDnFONT SIZE OFnBOTH BUTTONSnAND MAKE THEnPANEL TAKE UP 90% OFnTHE WIDTH,nENSURING IT LOOKSnCLEAN AND FITSnCOMFORTABLY ON MOBILE DEVICES.nAND THAT WRAPSnUP DAY 23.nWE JUST BUILTnA SLEEK,nFULLY RESPONSIVE SLIDEnIN SIDE PANEL,nALL WITH PUREnHTML AND CSS.nYOU CAN USE THIS ON YOUR OWN PROJECTS FORnQUICK SETTINGS,nMENUS, OR EVENnCUSTOM DASHBOARDS.nIF YOU FOUND THIS HELPFUL,nDON'T FORGET TO LIKE,nSUBSCRIBE,nAND STAY TUNEDnFOR DAY 24.nWE'VE GOT ANOTHERnAWESOME DESIGN COMING UP!

Original caption

How to Build a Sleek Slide-in Side Panel with HTML & CSS (Day 23) #HTMLCSS #WebDesign #FrontendDevelopment #codewithaysha

More from @satusanyang

Their other posts in the index, biggest breakout first.

Transcript

Welcome back coders! Day 23 is going to be a fun one. We're creating a sleek slide-in side panel. Today we're building something really cool. A beautiful panel that smoothly appears off the screen. It's perfect for quick settings, theme controls, or even a hidden menu that keeps your design clean and minimal. The best part? All using only HTML and CSS. No JavaScript needed. Right in and start building our sleek and interactive side panel. Now let's create the panel itself. We'll wrap everything and a side tag that's perfect for content that sits alongside the main page, like menus or settings. I'll give it a class called side panel, which we'll use later to style and animate it. It more accessible. We'll also include role equals dialog and ariomodal equals truth. Next, we'll start adding some quick setting options inside our panel. The first one is a simple dark mode toggle. I'm using a users can easily theme on or off. Below that, we'll create another setting for font size. This one uses a select drop down, giving the user a few size options to choose from small, medium, or large. These kinds of panel feel more interactive and customizable. Now let's style a few more setting options to feel complete. First, we'll include an accent color picker, which lets users choose their favorite highlight color. Animations toggle, perfect for turning motion effects on or off. And finally, a notification switch. This one represents alerts or updates within your site. These details make your settings panel look more dynamic and realistic. Even with just HTML and CSS, adding a section like this gives a professional touch to your design. This section defines CSS variables inside the colon root selector, which acts like a global place to store colors for our entire project. Next, we style the body with zero margin to remove default spacing. We're using the Poppins font for a clean, modern look and adding a smooth vertical gradient from deep navy to dark blue. Creates contrast, of padding gives the layout room to breathe. The panel toggle checkbox is hidden. It's just used to close the panel. Now let's style our open and close panel buttons. We're giving it a beautiful diagonal gradient background that blends turquoise a fresh, modern feel. The text color is deep navy so it contrasts nicely against the bright background. And finally, we use our accent gradient as the border image source, which gives the button a subtle glowing edge that ties in perfectly with the overall theme. Now let's move on to styling our side panel, the main section that slides in from the right. We'll start by setting its position to fixed, so it stays users scroll the page. The panel is initially placed off screen by setting right to negative 90%, and when activated it will slide smoothly into view. We align it to the very top, make it full height, and give it a width of 380 pixels, max width. Of 90%, so it still looks great on smaller screens. Will add 28 pixels of padding content nicely spaced and readable. The overflowy property is set to auto, allowing scrolling when the content becomes longer than the panel itself. For the background, we're using a vertical gradient that fades from a deep navy to a slightly lighter shade. The border slice and width make the gradient wraps cleanly around the edges, while a solid border style keeps it sharp and defined. We'll add white text for contrast, a bit of padding to make the buttons easy to click, and slightly rounded corners for a softer look. Setting it as an inline block let it sit neatly under our content, with some margin create space. Here, we're making slide into view when the checkbox is checked. By setting the right position to zero, the panel smoothly moves from off-screen to fully visible, creating that clean slide in animation all without using any JavaScript. Now let's style each setting item. We're adding some vertical spacing with margin and using flexbox to position the labels and inputs side by side. A subtle bottom border helps separate each option, and the little padding gives the layout room to breathe. Now let's style the inputs inside our setting items. We're giving them background to match the panel theme and removing any default borders for a cleaner look. A six pixel border radius keeps the edges smooth, while white text ensures everything is easy to read. Finally, a bit of padding adds breathing room, and setting the cursor to pointer makes them feel interactive. Now, let's style the quick link section inside our panel. We'll remove the default list style along with any padding or margins to keep everything clean and aligned. Each list item gets vertical spacing for separation, the links themselves use our accent color with no underlines. Finally, we add a smooth transition so the hover animation feels natural when hovered. The button fills with our accent color, switches the text to a dark shade for readability, and scales up just a bit, giving it a clean, interactive feel that completes the design. Finally, we'll make the design responsive for smaller screens. We'll slightly reduce the padding and font size of both buttons and make the panel take up 90% of the width, ensuring it looks clean and fits comfortably on mobile devices. And that wraps up day 23. We just built a sleek, fully responsive slide in side panel, all with pure HTML and CSS. You can use this on your own projects for quick settings, menus, or even custom dashboards. If you found this helpful, don't forget to like, subscribe, and stay tuned for day 24. We've got another awesome design coming up!