мобильное адаптивное меню на css
Нарабатываю навыки, делая свою версию учебного проекта от freeCodeCamp. Хочу сверстать адаптивный дизайн. Как можно сделать так чтобы меню сворачивалось при нажатии на пункт меню на чистом css без js и фреймворков. Желательно кроссбраузерный вариант.
/* RESET.CSS */
*,
* html {
margin: 0;
padding: 0;
border: 0;
outline: none;
box-sizing: border-box;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
main,
header,
footer,
section,
aside,
nav,
menu,
article,
details,
figcaption,
figure,
hgroup {
display: block;
}
body {
line-height: 1;
}
blockquote,
q {
quotes: none;
}
blockquote: before,
blockquote: after,
q: before,
q: after {
content: '';
content: none;
}
.clearfix {
zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.horizontal-menu {
display: block;
height: 100%;
}
.horizontal-menu li {
display: inline-block;
vertical-align: middle;
}
.h-aligner {
display: inline-block;
height: 100%;
width: 0 !important;
padding: 0;
overflow: hidden;
}
/* STYLES.CSS */
html,
body,
aside {
min-height: 100%;
}
body {
color: #4d4e53;
font: 16px/1.5 "Open Sans", Arial, sans-serif;
}
aside {
position: fixed;
left: 0;
width: 300px;
border-right: 2px solid gray;
}
main {
margin-left: 300px;
padding: 20px;
}
header {
margin: 10px;
font-size: 28px;
}
.toogle-menu {
position: relative;
text-align: right;
}
#toogle-btn {
display: none;
}
.toogle-btn {
position: absolute;
top: -51px;
right: 6px;
z-index: 9999;
display: inline-block;
width: 40px;
height: 40px;
border: 1px solid #bbb;
border-radius: 5%;
text-align: center;
line-height: 38px;
}
.toogle-btn:hover {
cursor: pointer;
}
.toogle-btn span {
display: inline-block;
box-sizing: content-box;
width: 70%;
height: 4px;
padding: 6px 0;
border-top: 4px solid #bbb;
border-bottom: 4px solid #bbb;
background: #bbb;
background-clip: content-box;
vertical-align: middle;
}
.submenu {
overflow-y: scroll;
overflow-x: hidden;
text-align: left;
}
.submenu li {
padding: 10px 30px;
border-top: 1px solid #bbb;
}
.submenu a {
text-decoration: none;
color: black;
}
.submenu {
display: block;
overflow-y: auto;
max-height: 80vh;
}
input.toogle-btn:checked~.submenu {
display: none;
}
p {
text-indent: 20px;
margin: 16px 0;
text-align: justify;
}
code {
margin: 10px;
padding: 15px;
background-color: rgb(247, 247, 247);
}
ul {
padding: 40px;
}
li {
list-style-type: disc;
}
code {
display: block;
margin: 10px;
padding: 15px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FCC: Technical Documentation Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="../../libcss/reset.css">
<link rel="stylesheet" href="styles.css"> -->
</head>
<body>
<aside>
<header>JS Documentation</header>
<nav class="toogle-menu">
<input type="checkbox" name="toogle-btn" id="toogle-btn" class="toogle-btn" checked>
<label for="toogle-btn" class="toogle-btn"><span></span></label>
<ul class="submenu">
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
<li><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></li>
<li><a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a></li>
<li><a class="nav-link" href="#Hello_world">Hello world</a></li>
<li><a class="nav-link" href="#Variables">Variables</a></li>
<li><a class="nav-link" href="#Declaring_variables">Declaring variables</a></li>
<li><a class="nav-link" href="#Variable_scope">Variable scope</a></li>
<li><a class="nav-link" href="#Global_variables">Global variables</a></li>
<li><a class="nav-link" href="#Constants">Constants</a></li>
<li><a class="nav-link" href="#Data_types">Data types</a></li>
<li><a class="nav-link" href="#if...else_statement">if...else statement</a></li>
<li><a class="nav-link" href="#while_statement">while statement</a></li>
<li><a class="nav-link" href="#Function_declarations">Function declarations</a></li>
<li><a class="nav-link" href="#Reference">Reference</a></li>
<li><a class="nav-link" href="#Reference">Reference</a></li>
<li><a class="nav-link" href="#Reference">Reference</a></li>
</ul>
</nav>
</aside>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<article>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (forexample, a web browser), JavaScript can be connected to the objects ofits environment to provide programmatic
control over them.</p>
<p>JavaScript contains a standard library of objects, such as Array, Date,and Math, and a core set of language elements such as operators, controlstructures, and statements. Core JavaScript can be extended for avariety of purposes by supplementing
it with additional objects; forexample:</p>
<ul>
<li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events
such as mouse clicks, form input, and page navigation.</li>
<li>Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from
one invocation to another of the application, or perform file manipulations on a server.</li>
</ul>
</article>
</section>
<section class="main-section" id="What_you_should_already_know">
<header>What you should already know</header>
<article>
<p>This guide assumes you have the following basic background:</p>
<ul>
<li>A general understanding of the Internet and the World Wide Web (WWW).</li>
<li>Good working knowledge of HyperText Markup Language (HTML).</li>
<li>Some programming experience. If you are new to programming, try one of the tutorials linked on the main page about JavaScript.</li>
</ul>
</article>
</section>
<section class="main-section" id="JavaScript_and_Java">
<header>JavaScript and Java</header>
<article>
<p>JavaScript and Java are similar in some ways but fundamentally differentin some others. The JavaScript language resembles Java but does not haveJava's static typing and strong type checking. JavaScript follows mostJava expression syntax, naming
conventions and basic control-flowconstructs which was the reason why it was renamed from LiveScript toJavaScript.</p>
<p>In contrast to Java's compile-time system of classes built bydeclarations, JavaScript supports a runtime system based on a smallnumber of data types representing numeric, Boolean, and string values.JavaScript has a prototype-based object model
instead of the more commonclass-based object model. The prototype-based model provides dynamicinheritance; that is, what is inherited can vary for individual objects.JavaScript also supports functions without any special declarativerequirements.
Functions can be properties of objects, executing asloosely typed methods.</p>
<p>JavaScript is a very free-form language compared to Java. You do nothave to declare all variables, classes, and methods. You do not have tobe concerned with whether methods are public, private, or protected, andyou do not have to implement interfaces.
Variables, parameters, andfunction return types are not explicitly typed.</p>
</article>
</section>
<section class="main-section" id="Hello_world">
<header>Hello world</header>
<article>
<p>To get started with writing JavaScript, open the Scratchpad and write yourfirst "Hello world" JavaScript code:</p>
<code>function greetMe(yourName) { alert("Hello " + yourName); }greetMe("World");</code>
<p>Select the code in the pad and hit Ctrl+R to watch it unfold in yourbrowser!</p>
</article>
</section>
<section class="main-section" id="Variables">
<header>Variables</header>
<article>
<p>You use variables as symbolic names for values in your application. Thenames of variables, called identifiers, conform to certain rules.</p>
<p>A JavaScript identifier must start with a letter, underscore (_), ordollar sign ($); subsequent characters can also be digits (0-9). BecauseJavaScript is case sensitive, letters include the characters "A" through"Z" (uppercase) and the characters
"a" through "z" (lowercase).</p>
<p>You can use ISO 8859-1 or Unicode letters such as å and ü in identifiers.You can also use the Unicode escape sequences as characters inidentifiers. Some examples of legal names are Number_hits, temp99, and_name.</p>
</article>
</section>
<section class="main-section" id="Declaring_variables">
<header>Declaring variables</header>
<article>You can declare a variable in three ways:
<p>With the keyword var. For example, <code>var x = 42.</code> This syntaxcan be used to declare both local and global variables.</p>
<p>By simply assigning it a value. For example, <code>x = 42.</code> Thisalways declares a global variable. It generates a strict JavaScriptwarning. You shouldn't use this variant.</p>
<p>With the keyword let. For example, <code> let y = 13.</code> This syntaxcan be used to declare a block scope local variable. See Variable scopebelow.</p>
</article>
</section>
<section class="main-section" id="Variable_scope">
<header>Variable scope</header>
<article>
<p>When you declare a variable outside of any function, it is called aglobal variable, because it is available to any other code in thecurrent document. When you declare a variable within a function, it iscalled a local variable, because it is available
only within thatfunction.</p>
<p>JavaScript before ECMAScript 2015 does not have block statement scope;rather, a variable declared within a block is local to the function (orglobal scope) that the block resides within. For example the followingcode will log 5, because the scope
of x is the function (or globalcontext) within which x is declared, not the block, which in this caseis an if statement.</p>
<code>if (true) { var x = 5; } console.log(x); // 5</code>
<p>This behavior changes, when using the let declaration introduced inECMAScript 2015.</p>
<code>if (true) { let y = 5; } console.log(y); // ReferenceError: y is notdefined</code>
</article>
</section>
<section class="main-section" id="Global_variables">
<header>Global variables</header>
<article>
<p>Global variables are in fact properties of the global object. In webpages the global object is window, so you can set and access globalvariables using the window.variable syntax.</p>
<p>Consequently, you can access global variables declared in one window orframe from another window or frame by specifying the window or framename. For example, if a variable called phoneNumber is declared in adocument, you can refer to this variable
from an iframe asparent.phoneNumber.</p>
</article>
</section>
<section class="main-section" id="Constants">
<header>Constants</header>
<article>
<p>You can create a read-only, named constant with the const keyword. Thesyntax of a constant identifier is the same as for a variableidentifier: it must start with a letter, underscore or dollar sign andcan contain alphabetic, numeric, or underscore
characters.</p>
<code>const PI = 3.14;</code>
<p>A constant cannot change value through assignment or be re-declaredwhile the script is running. It has to be initialized to a value.</p>
<p>The scope rules for constants are the same as those for let block scopevariables. If the const keyword is omitted, the identifier is assumed torepresent a variable.</p>
<p>You cannot declare a constant with the same name as a function orvariable in the same scope. For example:</p>
<code>// THIS WILL CAUSE AN ERROR function f() {}; const f = 5; // THIS WILLCAUSE AN ERROR ALSO function f() { const g = 5; var g; //statements}</code>
<p>However, object attributes are not protected, so the following statementis executed without problems.</p>
<code>const MY_OBJECT = {"key": "value"}; MY_OBJECT.key = "otherValue";</code>
</article>
</section>
<section class="main-section" id="Data_types">
<header>Data types</header>
<article>
<p>The latest ECMAScript standard defines seven data types:</p>
<ul>
<li>
<p>Six data types that are primitives:</p>
<ul>
<li>Boolean. true and false.</li>
<li>null. A special keyword denoting a null value. Because JavaScriptis case-sensitive, null is not the same as Null, NULL, or anyother variant.</li>
<li>undefined. A top-level property whose value is undefined.</li>
<li>Number. 42 or 3.14159.</li>
<li>String. "Howdy"</li>
<li>Symbol (new in ECMAScript 2015). A data type whose instances areunique and immutable.</li>
</ul>
</li>
<li>and Object</li>
</ul>
<p>Although these data types are a relatively small amount, they enable youto perform useful functions with your applications. Objects and functionsare the other fundamental elements in the language. You can think ofobjects as named containers for
values, and functions as procedures thatyour application can perform.</p>
</article>
</section>
<section class="main-section" id="if...else_statement">
<header>if...else statement</header>
<article>
<p>Use the if statement to execute a statement if a logical condition istrue. Use the optional else clause to execute a statement if the conditionis false. An if statement looks as follows:
<code>if (condition) { statement_1; } else { statement_2; }</code> condition can be any expression that evaluates to true or false. SeeBoolean for an explanation of what evaluates to true and false. Ifcondition evaluates to true, statement_1
is executed; otherwise,statement_2 is executed. statement_1 and statement_2 can be any statement,including further nested if statements.</p>
<p>You may also compound the statements using else if to have multipleconditions tested in sequence, as follows: <code>if (condition_1) { statement_1; } else if (condition_2) { statement_2;} else if (condition_n) { statement_n; } else { statement_last; }</code></p>
<p>In the case of multiple conditions only the first logical condition whichevaluates to true will be executed. To execute multiple statements, groupthem within a block statement ({ ... }) . In general, it's good practiceto always use block statements,
especially when nesting if statements:
<code>if (condition) {statement_1_runs_if_condition_is_true;statement_2_runs_if_condition_is_true; } else {statement_3_runs_if_condition_is_false;statement_4_runs_if_condition_is_false; }</code> It is advisable to not use simple assignments
in a conditional expression,because the assignment can be confused with equality when glancing overthe code. For example, do not use the following code:
<code>if (x = y) { /* statements here */ }</code> If you need to use anassignment in a conditional expression, a common practice is to putadditional parentheses around the assignment. For example:
<code>if ((x = y)) { /* statements here */ }</code></p>
</article>
</section>
<section class="main-section" id="while_statement">
<header>while statement</header>
<article>
<p>A while statement executes its statements as long as a specified conditionevaluates to true. A while statement looks as follows: <code>while (condition) statement</code> If the condition becomes false,statement within the loop stops executing
and control passes to thestatement following the loop.</p>
<p>The condition test occurs before statement in the loop is executed. Ifthe condition returns true, statement is executed and the condition istested again. If the condition returns false, execution stops andcontrol is passed to the statement following
while.</p>
<p>To execute multiple statements, use a block statement ({ ... }) to groupthose statements.</p>Example:
<p>The following while loop iterates as long as n is less than three:</p>
<code>var n = 0; var x = 0; while (n < 3) { n++; x += n; }</code>
<p>With each iteration, the loop increments n and adds that value to x.Therefore, x and n take on the following values:</p>
<ul>
<li>After the first pass: n = 1 and x = 1</li>
<li>After the second pass: n = 2 and x = 3</li>
<li>After the third pass: n = 3 and x = 6</li>
</ul>
<p>After completing the third pass, the condition n < 3 is no longertrue, so the loop terminates.</p>
</article>
</section>
<section class="main-section" id="Function_declarations">
<header>Function declarations</header>
<article>
<p>A function definition (also called a function declaration, or functionstatement) consists of the function keyword, followed by:</p>
<ul>
<li>The name of the function.</li>
<li>A list of arguments to the function, enclosed in parentheses andseparated by commas.</li>
<li>The JavaScript statements that define the function, enclosed in curlybrackets, { }.</li>
</ul>
<p>For example, the following code defines a simple function named square:</p>
<code>function square(number) { return number * number; }</code>
<p>The function square takes one argument, called number. The functionconsists of one statement that says to return the argument of thefunction (that is, number) multiplied by itself. The return statementspecifies the value returned by the function.</p>
<code>return number * number;</code>
<p>Primitive parameters (such as a number) are passed to functions byvalue; the value is passed to the function, but if the function changesthe value of the parameter, this change is not reflected globally or inthe calling function.</p>
</article>
</section>
<section class="main-section" id="Reference">
<header>Reference</header>
<article>
<ul>
<li>
<span>All the documentation in this page is taken from </span>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN</a>
</li>
</ul>
</article>
</section>
</main>
</body>
</html>