html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--Checkout css and js tab for explaination
Your suggestions are always welcomed 💐
-->
<!DOCTYPE html>
<html>
<head>
<title>Side Bar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , initial-scale=1">
<meta name="description" content="A simple example of sidebar ,Inspired by everything.js page">
</head>
<body>
<button id="opt" onclick="drop()">=</button>
<!--aside as sidebar container
refer: https://html.com/tags/aside/
-->
<aside>
<ul id="list">
<li>Sololearn PRO</li>
<li>Leaderboard</li>
<li>Lesson Factory</li>
<li>Quiz Factory</li>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
margin:0;
background-color: rgb(63, 64, 63);
}
#opt,ul
{
position:fixed;
top:0;
padding:0;
margin:0;
}
/*
Remove paddings,margins for better look.
position:fixed; so that even if page is scrolled element stays unchanged
*/
#opt{
right:0;
width:50px;
background: dodgerblue;
font-size:2em;
border:3px solid rgb(44, 48, 45);
color: rgb(44, 48, 45);
outline:none;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let isOpen=false;
//initially sidebar is close .
/*Function will be called when button is clicked
if else will help to toggle open<->close
*/
function drop(){
/*is sidebar is not open ,then open it*/
if(!isOpen)
{
document.getElementById('list').
style.transform="rotateY(0deg)";
isOpen=true;
}
/*if open ,then close it*/
else
{
document.getElementById('list').
style.transform="rotateY(180deg)";
isOpen =false;
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run