Skip to content

add sidebar #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

add sidebar #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8557cea
add folders html and css
Jun 2, 2018
d2a9d1d
split html-css-cheat-sheet.html in to html-cheat-sheet.html and css-c…
Jun 2, 2018
666f74b
add sidebar to all pages
Jun 2, 2018
521d6f8
remove vscode folder
Jun 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.vscode/settings.json
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ A simple, curated HTML5 and CSS cheat sheet.

## Viewing the cheat sheet

Just open [html-css-cheat-sheet.html](https://acchou.github.io/html-css-cheat-sheet/html-css-cheat-sheet.html) in your browser. There are no external dependencies.
Just open [html/html-cheat-sheet.html](https://acchou.github.io/html-css-cheat-sheet/html/html-cheat-sheet.html) in your browser. There are no external dependencies.

## Features

Expand Down
0 animate.css → css/animate.css
View file
Open in desktop
File renamed without changes.
49 changes: 49 additions & 0 deletions css/sidebar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/* //////////////////////// The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 5px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
7 changes: 6 additions & 1 deletion style.css → css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,9 @@ body {
}

#html,
#css,
#animation-transitions {
padding-top: 60px;
padding-top: 0px;
}

.size-box {
Expand Down Expand Up @@ -258,6 +259,10 @@ h6 {
font-weight: normal;
}

section {
padding-top: 30px;
}

section > h1 {
grid-column: 1/-1;
}
Expand Down
29 changes: 22 additions & 7 deletions animation.html → html/animation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,52 @@

<head>
<title>Animation and Transitions</title>
<link href="style.css" type="text/css" rel="stylesheet">
<link href="../css/style.css" type="text/css" rel="stylesheet">
<link href="../css/sidebar.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet">
<link href="animate.css" type="text/css" rel="stylesheet">
<link href="../css/animate.css" type="text/css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<script src="../js/sidebar.js"></script>
</head>

<body>
<nav>
<ul class="left">
<li>
<a href="html-css-cheat-sheet.html#html">HTML</a>
<a href="../html/html-cheat-sheet.html">HTML</a>
</li>
<li>
<a href="html-css-cheat-sheet.html#css">CSS</a>
<a href="../html/css-cheat-sheet.html">CSS</a>
</li>
<li>
<a href="animation.html#animation">Animation</a>
<a href="../html/animation.html#animation">Animation</a>
</li>
<li>
<a href="tools.html">Tools</a>
<a href="../html/tools.html">Tools</a>
</li>
</ul>
<ul class="right">
<li>
<a href="https://github.com/acchou/html-css-cheat-sheet" target="_blank" rel="noopener noreferrer">
<img class="social-logo" src="github.svg">
<img class="social-logo" src="../github.svg">
</a>
</li>
</ul>
</nav>
<div id="side-navigation" style="padding-top: 60px">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
</div>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()" style="padding-top: 60px">&times;</a>
<a href="#transition-template">Template</a>
<a href="#transition-css">CSS</a>
<a href="#transition-examples">Example</a>
<a href="#animation-css">Animation CSS</a>
</div>

<div id="main">
<section id="animation-transitions">
<h1>Animation and Transitions</h1>
<section id="transition-template">
Expand Down Expand Up @@ -1054,6 +1068,7 @@ <h2 class="animated rollOut">rollOut</h2>
</div>
</section>
</section>
</div>
</body>

</html>
Loading