Hi, i need help with the responsive menu.
I need help with showing up my menu when i clic on my burger menu.
One of the main reason i don’t know how to do it is the “grid” display i think.
One easy thing i would like is click on burger and then it pop up in the middle of the page.
Codepen:
https://codepen.io/pocahontas123/pen/ XVGEey
jsFiddle:
git:
HTML
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
<!--FCC script CHECK-->
<!--<script type="text/javascript" src="https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js"></script>-->
<title>FCC: Technical Documentation Page</title>
</head>
<body>
<div class="container">
<div class="menu">
<header>HTML Documentation</header>
<button id="icon-menu">
<span></span>
<span></span>
<span></span>
</button>
<nav>
<ul>
<li><a href="#anchor1" class="nav-link">Basics of HTML5</a></li>
<li><a href="#anchor2" class="nav-link">Organize the text</a></li>
<li><a href="#anchor3" class="nav-link">Create Links</a></li>
<li><a href="#anchor4" class="nav-link">Images</a></li>
</ul>
</nav>
</div>
<div class="content">
<section id="section1">
<h3 id="anchor1">Basics of HTML5 ?</h3>
<p>
HTML and CSS are the ground of work of every websites. When you're consulting a site with your navigator,
you have to know that, in the background, machineries are starting to make the websites able to show itself.
The computer is basing on what HTML and CSS tell him to know what he have to show.
<img class="centerImage" src="https://image.noelshack.com/fichiers/2018/03/4/1516294468-htmlcsscomputer.png" alt="csshtmlatWork"/>
<!--<img class="centerImage" src="img/htmlCssComputer.png" alt="csshtmlatWork"/>-->
HTML and CSS are two "languages" you have to speak to creat websites. It's the web navigators (firefox, chrome, edge...)
which will traduct between the two languages and what you see on your screen.
HTML (HyperText Markup Language): it's the skeleton of any websites.
CSS (Cascading Style Sheets): it's the "look of" the websites.
<img class="centerImage" src="https://image.noelshack.com/fichiers/2018/03/4/1516295372-withorwithoutcss.png" alt="withOrWithoutCSS"/>
<!-- <img class="centerImage" src="" alt="withOrWithoutCSS"/> -->
To work on HTML and css, you only need a simple windows text editor or a more advanced one like notepadd++ or sublime Text.
<img class="centerImage" src="https://image.noelshack.com/fichiers/2018/03/4/1516295922-wnotes.png" alt="sublimeText"/>
<!-- <img class="centerImage" src="css/wNotes" alt="sublime" />-->
<img class="centerImage" src="https://s3-eu-west-1.amazonaws.com/sdz-upload/prod/upload/sublimetext1.png" alt="sublimeText"/>
<!-- <img class="centerImage" src="css/sublimetext1.png" alt="sublime" />-->
</p>
<h5>Tags and Attributs</h5>
<p>
In HTML we use what we call "Tags" and in css "Attributs". "Tags" are keywords surrounded by <code><span class="tags"><></span></code> like <code><span class="tags"><p></span></code>.
It is use to tell to the navigator the nature of how you want the information between the tags, to be treated like.
Generaly, Tags comes by group of two: an opening and one closing it:
<code class="outText"><span class="tags"><title></span>This is a title<span class="tags"></title></span></code> <br/>
<code class="outText"><span class="tags"><p></span>This is a paragraph<span class="tags"></p></span></code> <br/>
You can find "self-closing tag" too. It mean that you don't need to use specific closing tag:
<br/><code class="outText"><span class="tags"><img/></span></code> <br/>
About the "Attributs". They are a bit like the tags' options. They complet them to give more informations:
They look commonly like this:
<br/><code class="outText"><span class="tags"><tags <span class="attributs">attribut</span>=<span class="value">"value"</span>></span></code> <br/>
Here a real exemple:
<br/><code class="outText"><span class="tags"><img <span class="attributs">src</span>=<span class="value">"localOrURLadress"</span> <span class="attributs">alt</span>=<span class="value">"My Image description"</span>/></span></code> <br/>
</p>
<h5>The basics structure of an HTML page</h5>
<p>
This code responde to a basic HTML5 page:
</p>
<code class="preCode">
<PRE>
<!DOCTYPE html>
<span class="tags"><html></span>
<span class="tags"><head></span>
<span class="tags"><meta <span class="attributs">charset</span>=<span class="value">"utf-8"</span> /></span>
<span class="tags"><title></span>Titre<span class="tags"></title></span>
<span class="tags"></head></span>
<span class="tags"><body></span><span class="tags"></body></span>
<span class="tags"></html></span>
</PRE>
</code>
<p>
The first line is the DOCTYPE. It is essential and unique because it say that it is a HTML5 page.</br>
The <code><span class="tags"><html></html></span></code> represent the contents of the page.</br>
The <code><span class="tags"><head></head></span></code> represent general informations about the page.</br>
The <code><span class="tags"><body></body></span></code> represent the principal part of the page. It's where we write.</br>
The <code><span class="tags"><meta <span class="attributs">charset</span>=<span class="value">"utf-8"</span> /></span></code> is the "encoding".</br>
The <code><span class="tags"><title></title></span></code> represent the title of the page:
<img class="centerImage" src="https://image.noelshack.com/fichiers/2018/03/5/1516372076-titlepage.png" alt="titlePage"/>
<!--<img class="centerImage" src="img/titlePage" alt="titlePage"/>-->
</p>
<h5>The commentary</h5>
<p>
Commentaries are used to help you and others understanding your code better. It is only visible in the code itself:
<br/><code class="outText"><span class="comment"><!-- this is a commentary --></span></code> <br/>
You have to understand that your code is completly visible by every one if it's on the web.
In many browser, it's accessible by right clicking on the page then clic "Show the source code of the page".
<img class="centerImage widthControl" src="https://user.oc-static.com/files/340001_341000/340562.png" alt="showSourceCodeButton"/>
<!--<img class="centerImage" src="img/showSourceCodeButton.png" alt="showSourceCodeButton.png"/>-->
</p>
</section>
<section id="section2">
<h3 id="anchor2">Organize the text</h3>
<p>
We will se how to:
<ul class="ulPresentation">
<li>How to write paragraphes</li>
<li>How to structure your page with a title</li>
<li>How to give importance to certain words in your text</li>
<li>How to organize information like a list</li>
</ul>
</p>
<h5>The paragraphes</h5>
<p>
Most of the time, when we write simple text in a web page, we do it inside a paragraph.
<code class="outText"><span class="tags"><p></span>This is a paragraph<span class="tags"></p></span></code> <br/>
Like i said before, we write the the website content into the tag <code><span class="tags"><body></body></span></code>
If you want one way to "line break", you have to use more than one <code><span class="tags"><p></span></code>: <br/>
</p>
<code class="preCode">
<PRE>
<!DOCTYPE html>
<span class="tags"><html></span>
<span class="tags"><head></span>
<span class="tags"><meta <span class="attributs">charset</span>=<span class="value">"utf-8"</span> /></span>
<span class="tags"><title></span>Titre<span class="tags"></title></span>
<span class="tags"></head></span>
<span class="tags"><body></span>
<span class="tags"><p></span>
My Text 1
<span class="tags"></p></span>
<span class="tags"><p></span>
My Text 2
<span class="tags"></p></span>
<span class="tags"></body></span>
<span class="tags"></html></span>
</PRE>
</code>
<p>
To do the same, you can use <code><span class="tags"></br></span></code> where you want it to happen.
</p>
<h5>The Titles</h5>
<p>
To help you to manage your paragraphs better, you can use title. In HTML, we're lucky because we can directly use 6 tags for this use.
It go from very big to very little:
</br><code class="outText"><span class="tags"><h1></h1></span></code>Very big boy<br/>
<code class="outText"><span class="tags"><h2></h2></span></code><br/>
<code class="outText"><span class="tags"><h3></h3></span></code><br/>
<code class="outText"><span class="tags"><h4></h4></span></code><br/>
<code class="outText"><span class="tags"><h5></h5></span></code><br/>
<code class="outText"><span class="tags"><h6></h6></span></code>Very little boy<br/>
</p>
<h5>HighLight your text</h5>
<p>
All of these tags will have default 'css' associated to them. It mean that for exemple, one will be italic and the other one strong.
But it's just the default 'look' and you should not use it like this. Their primary goal is not catch your eyes and the google robots eyes:
<br/><code class="outText"><span class="tags"><em></em></span></code> it make the text <em>italic</em><br/>
<p><code class="outText"><span class="tags"><strong></strong></span></code> it make the text <strong>strong</strong></p>
<p><code class="outText"><span class="tags"><strong></strong></span></code> it make the text <strong>strong</strong></p>
<p><code class="outText"><span class="tags"><mark></mark></span></code> it surround the text with a <mark>yellow</mark> color</p>
It's important to point out that css is for the form and HTML the content.
</p>
<h5>Lists</h5>
<p>
Lists are commonly use to help to structurate our text and order informations. Two type of list exist:
<ul class="ulPresentation">
<li>Unordered list</li>
<li>Ordoned list</li>
</ul>
<p>An unordered list look like this:</p>
<ul class="ulPresentation">
<li>Tomatos</li>
<li>Carotts</li>
</ul>
<code class="preCode">
<PRE>
<span class="tags"><ul></span>
<span class="tags"><li></span>Tomatoes<span class="tags"></li></span>
<span class="tags"><li></span>Carotts<span class="tags"></li></span>
<span class="tags"></ul></span>
</PRE>
</code>
<p>An unordered list look like this:</p>
<ol class="ulPresentation">
<li>Tomatos</li>
<li>Carotts</li>
</ol>
<code class="preCode">
<PRE>
<span class="tags"><ol></span>
<span class="tags"><li></span>Tomatoes<span class="tags"></li></span>
<span class="tags"><li></span>Carotts<span class="tags"></li></span>
<span class="tags"></ol></span>
</PRE>
</code>
</p>
</section>
<section id="section3">
<h3 id="anchor3">Create Links</h3>
<p>
Like you already know, the web is compose of multiple pages. How do you do come go from one to an other ? With the help of links ! To do this, you will need this tag:<br/>
<code class="outText"><span class="tags"><a </span><span class="attributs">href</span>=<span class="value">"http://url.com"</span>>Click me<span class="tags"></a></span></code><br/>
It can be use for directing some one to an webpage, a local page or to make him download a file.<br/>
<code class="outText"><span class="tags"><a </span><span class="attributs">href</span>=<span class="value">"http://url.com"</span>>Click me<span class="tags"></a></span></code><br/>
<code class="outText"><span class="tags"><a </span><span class="attributs">href</span>=<span class="value">"folder/myfile.html"</span>>Click me<span class="tags"></a></span></code><br/>
<code class="outText"><span class="tags"><a </span><span class="attributs">href</span>=<span class="value">"downloadme.zip"</span>>Click me<span class="tags"></a></span></code><br/>
And finaly you can create what is call "Anchor". It give you the possibility to go, in the same page or in an other one, somewhere in it by just clicking:</br>
<code class="outText"><span class="tags"><h2</span> <span class="attributs">id=</span><span class="value">"my-anchor"<span class="tags">></span>Title<span class="tags"></h2></span></code></br>
Then where you want to go to:</br>
<code class="outText"><span class="tags"><a </span> <span class="attributs">href=</span><span class="value">"#my_anchor"</span>>Click me<span class="tags"></a></span></code><br/>
</p>
</section>
<section id="section4">
<h3 id="anchor4">Images</h3>
<p>
Like i showed your before, img tag is an auto closing tags. You can use this tags with local files and web url:
<br/><code class="outText"><span class="tags"><img <span class="attributs">src</span>=<span class="value">"localfolder/localimage.png"</span> <span class="attributs">alt</span>=<span class="value">"My Image description"</span>/></span></code> <br/>
<br/><code class="outText"><span class="tags"><img <span class="attributs">src</span>=<span class="value">"https://urlImage.png"</span> <span class="attributs">alt</span>=<span class="value">"My Image description"</span>/></span></code> <br/>
</p>
</section>
</div>
<div class="footer"><p>Copyright © 2018 Pocahontas123</p></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#icon-menu').on('click', function() {
$('nav').toggleClass('expand');
$('header').toggleClass('expand');
});
$('#icon-menu').on('click', function() {
$('#icon-menu').toggleClass('trigger');
});
});
</script>
</body>
</html>
CSS
a { text-decoration : none; color : grey; }
/* BASIC LAYOUT */
.container > div {
display: flex;
/* justify-content: center; */
/* align-items: center; */
font-size: 2em;
color: #ffeead;
}
html, body {
background-color: #ffeead;
}
.container > div:nth-child(1n) {
background-color: #96ceb4;
}
.container > div:nth-child(2n) {
background-color: #ff6f69;
}
.container > div:nth-child(3n) {
background-color: #88d8b0;
}
.container {
display: grid;
height: 100%;
grid-gap: 15px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1000px 100px;
grid-template-areas:
"m m m c c c c c c c c c"
". . . f f f f f f f f f";
}
.menu {
grid-area: m;
}
.content {
grid-area: c;
}
.footer {
grid-area: f;
}
.footer p {
margin: 0 auto;
display: flex;
align-items: center;
}
.menu header {
text-align: center;
}
.menu, .content {
flex-direction: column;
overflow: auto;
overflow-x: hidden;
-ms-overflow-x: hidden;
}
/* END BASIC LAYOUT */
.menu ul {
width: 100%;
margin: 0px;
padding: 0px;
}
.menu ul li {
list-style: none;
}
.menu a {
text-align: center;
display: block;
width: 100%;
text-decoration: none;
cursor: pointer;
border-bottom: 1px solid black;
padding: 10px;
box-sizing: border-box;
}
.menu ul li:nth-child(9) a {
border-bottom: none;
}
section {
margin: 0px 0px 50px 0px;
}
section h3 {
text-align: left;
margin-left: 15px;
}
section p, section h5 {
text-align: justify;
margin: 25px 20px 25px 45px;
font-size: 0.8em;
}
h5 {
color: black;
}
.centerImage {
display: block;
margin: 0 auto;
padding: 15px;
}
.widthControl {
width: 80px;
height: 400px;
}
.ulPresentation {
margin: 0px 0px 20px 50px;
}
pre {
white-space: pre;
/* overflow: auto; */
padding: 0px;
margin: 0px;
font-size: 0.7em;
}
pre {
display: inline-block;
padding: 10px;
border-radius: 5px;
margin: 15px 0px 15px 0px;
white-space: pre-line;
}
code, pre {
color: white;
background-color: rgb(39, 40, 34);
border-radius: 5px;
}
.outText {
display: inline-block;
padding: 10px;
border-radius: 5px;
margin: 15px 0px 15px 30px;
}
.preCode {
margin: 15px 0px 15px 40px;
}
.tags{
color: rgb(254, 68, 129);
}
.attributs{
color: rgb(166, 226, 46);
}
.value {
color: rgb(230, 219, 116);
}
.comment {
color: rgb(140, 137, 119);
}
#icon-menu {
position: fixed;
right: 0px;
width: 40px;
height: 35px;
top: 20px;
z-index: 999;
}
#icon-menu span {
position: absolute;
width: 100%; /* 40px */
height: 5px;
border-radius: 4px;
background-color: white;
left: 0px;
transition: all 0.2s ease;
}
#icon-menu span:nth-child(1) {
top: 0px;
}
#icon-menu span:nth-child(2) {
top: 15px;
}
#icon-menu span:nth-child(3) {
top: 30px;
}
button {
background: transparent;
border: none;
}
/* disable focus clic on button */
button:focus {
outline: none;
}
#section1 img:nth-child(3), #section1 img:nth-child(4) {
width: 500px;
}
.expand {
/* */
}
#icon-menu.trigger span:nth-child(1) {
transform: rotate(45deg);
top: 12px;
}
#icon-menu.trigger span:nth-child(2) {
opacity: 0;
}
#icon-menu.trigger span:nth-child(3) {
transform: rotate(-45deg);
top: 12px;
}
@media only screen and (min-width: 881px) {
#icon-menu {
display: none;
}
}
@media only screen and (max-width: 882px) {
.container {
display: grid;
height: 100%;
grid-gap: 15px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1000px 100px;
grid-template-areas:
"c c c c c c c c c c c c"
"f f f f f f f f f f f f";
}
nav, header{
display: none;
}
}
@media only screen and (max-width: 865px) {
img {
width: 50%;
}
#section1 img:nth-child(3), #section1 img:nth-child(4) {
width: 50%;
}
PRE {
width: 50%;
overflow: auto;
}
}