0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
2
<ul><li>Theory</li>
2
<ul><li>Theory</li>
3
<li>Theory</li>
3
<li>Theory</li>
4
<li>Comments</li>
4
<li>Comments</li>
5
</ul><h2>Flexible menu with overflow, part 2</h2>
5
</ul><h2>Flexible menu with overflow, part 2</h2>
6
<p>Now all we have to do is assign a growth factor to the menu items and test how the menu behaves if we decide to change its width or add items.</p>
6
<p>Now all we have to do is assign a growth factor to the menu items and test how the menu behaves if we decide to change its width or add items.</p>
7
<p>We can conveniently adapt the resulting solution to mobile interfaces. You don’t even need to add additional styles for mobile viewports.</p>
7
<p>We can conveniently adapt the resulting solution to mobile interfaces. You don’t even need to add additional styles for mobile viewports.</p>
8
<h2>Comments</h2>
8
<h2>Comments</h2>
9
<ul><li>index.html</li>
9
<ul><li>index.html</li>
10
<li>style.css</li>
10
<li>style.css</li>
11
</ul><p>HTML</p>
11
</ul><p>HTML</p>
12
<p><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Flexible menu with overflow, part 2</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="subtle"> <header> <div class="logo"> <img src="img/keksby.svg" alt="Keksby"> </div> <nav class="menu"> <div> <a href="#">Norwegian salmon</a> </div> <div> <a href="#">Wolffish</a> </div> <div> <a href="#">Crucian</a> </div> <div> <a href="#">Perch</a> </div> <div> <a href="#">Mirror carp</a> </div> <div> <a href="#">Shark</a> </div> </nav> </header> </body> </html></p>
12
<p><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Flexible menu with overflow, part 2</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="subtle"> <header> <div class="logo"> <img src="img/keksby.svg" alt="Keksby"> </div> <nav class="menu"> <div> <a href="#">Norwegian salmon</a> </div> <div> <a href="#">Wolffish</a> </div> <div> <a href="#">Crucian</a> </div> <div> <a href="#">Perch</a> </div> <div> <a href="#">Mirror carp</a> </div> <div> <a href="#">Shark</a> </div> </nav> </header> </body> </html></p>
13
<p>CSS</p>
13
<p>CSS</p>
14
<p>.menu { display: flex; flex-wrap: wrap; }</p>
14
<p>.menu { display: flex; flex-wrap: wrap; }</p>
15
<p>Thanks! We’ll fix everything at once!</p>
15
<p>Thanks! We’ll fix everything at once!</p>
16
<p>The code has changed, click “Refresh” or turn autorun on.</p>
16
<p>The code has changed, click “Refresh” or turn autorun on.</p>
17
<p>You’ve gone to a different page</p>
17
<p>You’ve gone to a different page</p>
18
<p>Click inside the mini-browser to shift the focus onto this window.</p>
18
<p>Click inside the mini-browser to shift the focus onto this window.</p>
19
<p>100%</p>
19
<p>100%</p>
20
<ol><li>Set a growth factor of 1 for all child divs in the .menu,</li>
20
<ol><li>Set a growth factor of 1 for all child divs in the .menu,</li>
21
<li>and then add another div with the text link Som as the last item in the menu.</li>
21
<li>and then add another div with the text link Som as the last item in the menu.</li>
22
<li>Then assign a width of 300px to the .menu block,</li>
22
<li>Then assign a width of 300px to the .menu block,</li>
23
<li>and then assign 200px to it.</li>
23
<li>and then assign 200px to it.</li>
24
</ol>
24
</ol>