MuhammadKhizar7 · November 20, 2020 06:41
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Menu pure css</title>
    <style>
      html,
      body {
        height: 100%;
      }

      body {
        font-family: monospace;
        margin: 0;
        background: #ededed;
      }

      main {
        padding: 1rem 1rem 0 1rem;
        transition: margin 0.3s;
      }

      .side-nav {
        padding: 1rem;
        box-sizing: border-box;
        background: white;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 300px;
        transform: translatex(-100%);
        transition: transform 0.3s;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
          0 1px 2px 0 rgba(0, 0, 0, 0.06);
      }
      .side-nav:target {
        transform: translatex(0);
      }
      .side-nav:target ~ main {
        margin-left: 300px;
      }
      .side-nav:target ~ main .open {
        display: none;
      }
      .side-nav:not(:target) ~ main .close {
        display: none;
      }
      .side-nav .links {
        display: flex;
        flex-direction: column;
      }
      .side-nav .links > .link {
        font-size: 1.5rem;
        text-decoration: none;
        padding: 0.5rem 1rem;
        border: 1px solid silver;
        margin-bottom: 0.5rem;
        border-radius: 1rem;
      }

      .open,
      .close {
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
          0 1px 2px 0 rgba(0, 0, 0, 0.06);
        border-radius: 1rem;
        font-size: 1.5rem;
        background: white;
        text-transform: uppercase;
        text-decoration: none;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        padding: 0.5rem 1rem;
        border: 1px solid silver;
      }
      .open > svg,
      .close > svg {
        margin-right: 1rem;
      }
    </style>
  </head>
  <body>
    <div class="side-nav" id="nav">
      <div class="links">
        <a class="link" href="#"><span>Home</span></a
        ><a class="link" href="#"><span>Profile</span></a
        ><a class="link" href="#"><span>Settings</span></a>
      </div>
    </div>
    <main>
      <header>
        <a class="open" href="#nav">
          <svg viewBox="0 0 448 512" width="20" title="bars">
            <path
              d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
            ></path>
          </svg>
          ><span>Menu</span></a
        ><a class="close" href="#">
          <svg viewBox="0 0 448 512" width="20" title="outdent">
            <path
              d="M100.69 363.29c10 10 27.31 2.93 27.31-11.31V160c0-14.32-17.33-21.31-27.31-11.31l-96 96a16 16 0 0 0 0 22.62zM432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-128H204.83A12.82 12.82 0 0 0 192 300.83v38.34A12.82 12.82 0 0 0 204.83 352h230.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288zm0-128H204.83A12.82 12.82 0 0 0 192 172.83v38.34A12.82 12.82 0 0 0 204.83 224h230.34A12.82 12.82 0 0 0 448 211.17v-38.34A12.82 12.82 0 0 0 435.17 160zM432 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
            ></path>
          </svg>
          ><span>Close</span></a
        >
      </header>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu felis,
        finibus in lectus vitae, fermentum tempus nisl. Duis libero dolor,
        venenatis et lorem nec, lobortis vestibulum felis. Donec justo enim,
        venenatis vitae ex a, finibus mollis est. Donec placerat magna at nisl
        condimentum tincidunt. Sed eget faucibus elit. Aliquam tristique est non
        diam molestie, eu bibendum ante porta. Donec in lacinia dui.
      </p>
      <p>
        Nulla ac dictum turpis, quis consequat odio. Pellentesque rhoncus est
        quis nibh pulvinar sagittis. Donec rhoncus molestie massa nec
        pellentesque. Maecenas et nisl magna. Sed lorem nulla, aliquam sed nibh
        et, ornare vestibulum lacus. Vivamus suscipit magna et arcu condimentum
        laoreet. Suspendisse venenatis ligula quam, quis ornare libero iaculis
        a. Aenean posuere, libero at ultricies commodo, nibh neque eleifend
        erat, id molestie quam nulla ac libero. Proin dignissim nunc a ante
        viverra, quis facilisis nisl rutrum. Morbi tempus lectus a est placerat
        venenatis. Sed quis risus rhoncus, placerat turpis vitae, lacinia justo.
        Duis massa lectus, auctor et nunc et, egestas dictum orci. Nam ex enim,
        vehicula in lacus vel, fringilla imperdiet velit. Nulla est mi, suscipit
        vel nunc sed, sollicitudin egestas purus. Nulla in dignissim eros.
      </p>
    </main>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Menu pure css</title>
	<style>
	html,
	body {
	height: 100%;
	}

	body {
	font-family: monospace;
	margin: 0;
	background: #ededed;
	}

	main {
	padding: 1rem 1rem 0 1rem;
	transition: margin 0.3s;
	}

	.side-nav {
	padding: 1rem;
	box-sizing: border-box;
	background: white;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 300px;
	transform: translatex(-100%);
	transition: transform 0.3s;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
	0 1px 2px 0 rgba(0, 0, 0, 0.06);
	}
	.side-nav:target {
	transform: translatex(0);
	}
	.side-nav:target ~ main {
	margin-left: 300px;
	}
	.side-nav:target ~ main .open {
	display: none;
	}
	.side-nav:not(:target) ~ main .close {
	display: none;
	}
	.side-nav .links {
	display: flex;
	flex-direction: column;
	}
	.side-nav .links > .link {
	font-size: 1.5rem;
	text-decoration: none;
	padding: 0.5rem 1rem;
	border: 1px solid silver;
	margin-bottom: 0.5rem;
	border-radius: 1rem;
	}

	.open,
	.close {
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
	0 1px 2px 0 rgba(0, 0, 0, 0.06);
	border-radius: 1rem;
	font-size: 1.5rem;
	background: white;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	padding: 0.5rem 1rem;
	border: 1px solid silver;
	}
	.open > svg,
	.close > svg {
	margin-right: 1rem;
	}
	</style>
	</head>
	<body>
	<div class="side-nav" id="nav">
	<div class="links">
	<a class="link" href="#"><span>Home</span></a
	><a class="link" href="#"><span>Profile</span></a
	><a class="link" href="#"><span>Settings</span></a>
	</div>
	</div>
	<main>
	<header>
	<a class="open" href="#nav">
	<svg viewBox="0 0 448 512" width="20" title="bars">
	<path
	d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
	></path>
	</svg>
	><span>Menu</span></a
	><a class="close" href="#">
	<svg viewBox="0 0 448 512" width="20" title="outdent">
	<path
	d="M100.69 363.29c10 10 27.31 2.93 27.31-11.31V160c0-14.32-17.33-21.31-27.31-11.31l-96 96a16 16 0 0 0 0 22.62zM432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-128H204.83A12.82 12.82 0 0 0 192 300.83v38.34A12.82 12.82 0 0 0 204.83 352h230.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288zm0-128H204.83A12.82 12.82 0 0 0 192 172.83v38.34A12.82 12.82 0 0 0 204.83 224h230.34A12.82 12.82 0 0 0 448 211.17v-38.34A12.82 12.82 0 0 0 435.17 160zM432 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
	></path>
	</svg>
	><span>Close</span></a
	>
	</header>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu felis,
	finibus in lectus vitae, fermentum tempus nisl. Duis libero dolor,
	venenatis et lorem nec, lobortis vestibulum felis. Donec justo enim,
	venenatis vitae ex a, finibus mollis est. Donec placerat magna at nisl
	condimentum tincidunt. Sed eget faucibus elit. Aliquam tristique est non
	diam molestie, eu bibendum ante porta. Donec in lacinia dui.
	</p>
	<p>
	Nulla ac dictum turpis, quis consequat odio. Pellentesque rhoncus est
	quis nibh pulvinar sagittis. Donec rhoncus molestie massa nec
	pellentesque. Maecenas et nisl magna. Sed lorem nulla, aliquam sed nibh
	et, ornare vestibulum lacus. Vivamus suscipit magna et arcu condimentum
	laoreet. Suspendisse venenatis ligula quam, quis ornare libero iaculis
	a. Aenean posuere, libero at ultricies commodo, nibh neque eleifend
	erat, id molestie quam nulla ac libero. Proin dignissim nunc a ante
	viverra, quis facilisis nisl rutrum. Morbi tempus lectus a est placerat
	venenatis. Sed quis risus rhoncus, placerat turpis vitae, lacinia justo.
	Duis massa lectus, auctor et nunc et, egestas dictum orci. Nam ex enim,
	vehicula in lacus vel, fringilla imperdiet velit. Nulla est mi, suscipit
	vel nunc sed, sollicitudin egestas purus. Nulla in dignissim eros.
	</p>
	</main>
	</body>
	</html>