Inspiring

Question

responsive, mobile friendly, navbar with hamburger menu

Forum|Forum|3 years ago
May 31, 2022
3 replies
2431 views

Is there a video tuturial available for this topic? The videos I see on youtube are either incomplete or they produce incorrect results.

Please advise.

Thanks.

Regards,

Aaron Anderson

This topic has been closed for replies.

L

L e n a

Community Expert

actually @osgood_ , you are probably right, I think my frenglish is not yet well attenuated, and twists the interpretations I have of the questions and answers asked on this forum.

in that case... in addition to what i said earlier about the hamburger menu...

The menus as for them are reduced in hamburger... there again two axes of answer... the icon itself and its possible animation, but also the mechanical management of this switch... and then why switch, why not preserve this type of menu whatever the device? Here again a vast debate

https://css-tricks.com/snippets/svg/svg-hamburger-menu/

https://css-tricks.com/hamburger-menu-with-a-side-of-react-hooks-and-styled-components/

https://css-tricks.com/line-animated-hamburger-menu/

https://css-tricks.com/three-line-menu-navicon/

https://alvarotrigo.com/blog/hamburger-menu-css/

https://dev.to/ljcdev/easy-hamburger-menu-with-js-2do0

https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/

By @L e n a

@default0vaokg78cv42 this video from codefoxx, concerning hamburger menu, is quite interesting

https://www.youtube.com/watch?v=flItyHiDm7E

well, depending of your code knowledge, it is probably necessary to supplement , by a better explanation of some concepts used in the video, as :

flex which is not detailed, by supplementing by https://css-tricks.com/snippets/css/a-guide-to-flexbox/ easiest to use as a cheat sheet
as well as the use of arrows functions https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions idem as above

the rest is classic HTML structure, basic CSS properties, and finally plain vanilla javascript, using listener and loop

Nancy OShea

Community Expert

Real coders are a rare occurrence in this space.

The average DW user is not seeking to become a career developer. Most are part -time amateurs & hobbyists who just want quick and easy, menu clicks or copy & paste code solutions. Unless they ask to be schooled on the subject, I try to keep things as simple as possible.

Too much information leads to overload. I think that's why leading online academies tell instructors to limit content to 10 minute segments. Mini-bites engage viewers without causing brain freeze.

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

SHORT ANSWER: Use Bootstrap.

Bootstrap contains a built-in navbar component that does all that out of the box.

This example uses Bootstrap 5.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--latest minified Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="d-flex flex-column min-vh-100">
<!--navbar-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link3</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link4</a></li>
</ul>
</div>
</div>
</nav><!--/nav-->

<div class="container mt-3">
<div class="row">
<div class="col-10 mx-auto">
<h3 class="mt-3">Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner. When button is tapped/clicked, navigation bar opens to reveal vertically stacked links.</p>
</div>
</div>
</div>
<!--latest minified Bootstrap JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap Resources:

https://www.w3schools.com/bootstrap5/

https://getbootstrap.com/

Nancy O'Shea— Product User & Community Expert

B i r n o u

Legend

I tought the question was about a tutorial for responsive, mobile friendly, hamburger... and so on... Bootstrap is a tool isn't it ?

Nancy OShea

Community Expert

I posted links to TWO Bootstrap tutorial sites.

Nancy O'Shea— Product User & Community Expert

L

L e n a

Community Expert

Although your question is not exclusively about DW, I will try to answer it...

Admittedly there are only three words, but the field they cover is very large... Responsive, Mobile, Hamburger... !!!

I'm afraid there is no single video that is complete on this subject. You need to go for a complete tutorial, like those accessible in Linkedin, Linda.com, tutos.com and many others...

However, here are some things to think about:

Just there is matter for debate... should we load all the contents and hide them, even if it means eating bandwidth, or should we only take into account the screen dimensions or the intrinsic qualities of the screen, or even the bandwidth levels of the network used... in short, this is vast...

while remaining based only on the screen... check out these URLs

The links do not respect a hierarchical order of importance... they are indicated randomly

The images must also be able to meet the requirements of each device's screen

But technique is not everything... there are also approaches... especially mobile first... what about it?...; and should we be Progressive Enhancement or Graceful Degradation... see on this subject the article

https://www.linkedin.com/pulse/why-responsive-websites-just-simple-step-website-birnou-s%C3%A9barte/

or https://rapidlab.io/blog-en/mobile-first-pros-cons-use-cases/

The menus as for them are reduced in hamburger... there again two axes of answer... the icon itself and its possible animation, but also the mechanical management of this switch... and then why switch, why not preserve this type of menu whatever the device? Here again a vast debate

Well, doing all the above doesn't mean that your page will be mobile friendly

Does your page adapted to mobile… plenty tools out there

first of all testing it https://search.google.com/test/mobile-friendly

Then, some reads

Can this answer help you to start in a more serene way?

I agree that is not video, but again the subject is too vast and opens so many doors to fit in a single Youtube

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded