آموزش منو ساید بار در طراحی وب سایت

            body {

            font-family: "Lato", sans-serif;

            }

            

            .sidenav {

            height: 100%;

            width: 160px;

            position: fixed;

            z-index: 1;

            top: 0;

            right: 0;

            background-color: #111;

            overflow-x: hidden;

            padding-top: 20px;

            direction: rtl;

            }

            

            .sidenav a {

            padding: 6px 8px 6px 16px;

            text-decoration: none;

            font-size: 25px;

            color: #818181;

            display: block;

            }

            

            .sidenav a:hover {

            color: #f1f1f1;

            }

            

            .main {

            margin-right: 160px; /* Same as the width of the sidenav */

            font-size: 28px; /* Increased text to enable scrolling */

            padding: 0px 10px;

            direction: rtl;

            }

            

            @media screen and (max-height: 450px) {

            .sidenav {padding-top: 15px;}

            .sidenav a {font-size: 18px;}

            }

            body {

            font-family: "Lato", sans-serif;

            }

            

            .sidenav {

            width: 130px;

            position: fixed;

            z-index: 1;

            top: 20px;

            right: 10px;

            background: #eee;

            overflow-x: hidden;

            padding: 8px 0;

            direction:rtl;

            }

            

            .sidenav a {

            padding: 6px 8px 6px 16px;

            text-decoration: none;

            font-size: 25px;

            color: #2196F3;

            display: block;

            }

            

            .sidenav a:hover {

            color: #064579;

            }

            

            .main {

            margin-right: 140px; /* Same width as the sidebar + left position in px */

            font-size: 28px; /* Increased text to enable scrolling */

            padding: 0px 10px;

            direction:rtl;

            }

            

            @media screen and (max-height: 450px) {

            .sidenav {padding-top: 15px;}

            .sidenav a {font-size: 18px;}

            }