How do I make a hamburger menu? #651

glow12121 · 2021-04-29T07:19:23Z

glow12121
Apr 29, 2021

Hi,

Is there an easy way to make a hamburger menu for a Yellow-generated page, if display space is too small for a regular navigation menu. Something in the way Github does with its menu.

Thanks.

Answered by glow12121

May 2, 2021

@IngoBelka, @GiovanniSalmeri, thank you for your ideas. In my view, the simplest and best burger menu is something along the lines of what GitHub has. A menu that drops down upon tap and moves the rest of the page down. It is the most good-looking and least glitchy option, from my experience. It is something like what the W3 School suggests, too.

View full answer

nzyeehaa · 2021-04-29T09:51:57Z

nzyeehaa
Apr 29, 2021

sounds like you need a web designer, but for learning purposes - have a look here #213

https://github.com/richi/yellow-plugin-burger-menu

3 replies

glow12121 Apr 29, 2021
Author

@nzyeehaa thanks, that's probably what I need. Will try the plugin out later.

I don't want to hire a designer because I don't take my site that seriously for now.

schulle4u Apr 29, 2021
Maintainer

Note: This extension currently is not compatible with latest Yellow API and probably will break your site. I suggest to file an issue to @richi if he still maintains this project and could update the extension.

glow12121 Apr 29, 2021
Author

Thanks, @schulle4u, I've done this.

GiovanniSalmeri · 2021-04-29T13:00:14Z

GiovanniSalmeri
Apr 29, 2021

Hello @thumos333 This site is made with Yellow: https://mondodomani.org/filosofiatorvergata/ Do you mean a hamburger menu like this? I could explain how I made it

0 replies

glow12121 · 2021-04-30T07:14:55Z

glow12121
Apr 30, 2021
Author

Yes, please do.

0 replies

IngoBelka · 2021-05-01T18:19:44Z

IngoBelka
May 1, 2021

I'm was looking for a solution since a long time, too. For that I played around with W3Schools:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
For my tries I took the navigation of my page.
This is my current state and not the goal yet:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

ul {
  padding: 0;
  margin: 0;
  border: 0;
}

.navigation {
  overflow: hidden;
  background-color: #333;
}

.navigation li {
  float: left;
  display: block;
}
.navigation li a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navigation li a:hover {
  background-color: #ddd;
  color: black;
}

.navigation li a.active {
  background-color: #04AA6D;
  color: white;
}

.navigation li.icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .navigation li {display: none;}
  .navigation li.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .navigation.responsive {position: relative;}
  .navigation.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navigation.responsive li {
    float: none;
    display: block;
}
  .navigation.responsive li a {

    text-align: left;
  }
}
</style>
</head>
<body>

<div class="navigation" role="navigation" id="navigation">
<ul>
<li><a class="active" aria-current="page" href="/kristall/">Start</a></li>
<li><a href="/kristall/das-bündnis/">Das Bündnis</a></li>
<li><a href="/kristall/die-partner/">Die Partner</a></li>
<li><a href="/kristall/blog/">Neuestes</a></li>
<li><a href="/kristall/Impressum/">Impressum</a></li>
<li class="icon">
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
    </a>
</li>  
</ul>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<script>
function myFunction() {
  var x = document.getElementById("navigation");
  if (x.className === "navigation") {
    x.className += " responsive";
  } else {
    x.className = "navigation";
  }
}
</script>

</body>
</html>

You can take this code to try yourself in W3Schools.
I stuck now, because I don't know, how to get this into Yellow.

What do you think about it? It's certainly nothing special, but one have to start somewhere.

0 replies

GiovanniSalmeri · 2021-05-02T14:54:58Z

GiovanniSalmeri
May 2, 2021

@thumos333 I have published an extension https://github.com/GiovanniSalmeri/yellow-burger

It is not an entire layout, I think that it can be easily used with different layouts. ~~As soon as possible I will made a screenshot, but the final result is as in the site https://mondodomani.org/filosofiatorvergata/~~ Comments are welcome!

6 replies

GiovanniSalmeri May 5, 2021

You are welcome, I'm glad I could help!

satori-books Dec 10, 2023

@GiovanniSalmeri probably this is not the point here but is it possible to adapt this useful extension to show the 'tags' ?

GiovanniSalmeri Dec 10, 2023

@satori-books I didn't ever think about this possibility, but probably it is easy to achieve this. (Anyway, are you speaking about miniburger or about burger? They are rather different beasts.)

satori-books Dec 10, 2023

I was speaking about the burger : ) like having a few pages + subpages followed by the list of 'tags', but a 'only tags' version would be also highly appreciated ..

satori-books Dec 10, 2023

@GiovanniSalmeri I've tried to insert in the burger.html different solutions proposed in #842 but nothing works.. That said I have to admit to be a total noobie with code/php etc.

glow12121 · 2021-05-02T15:56:13Z

glow12121
May 2, 2021
Author

@IngoBelka, @GiovanniSalmeri, thank you for your ideas. In my view, the simplest and best burger menu is something along the lines of what GitHub has. A menu that drops down upon tap and moves the rest of the page down. It is the most good-looking and least glitchy option, from my experience. It is something like what the W3 School suggests, too.

8 replies

GiovanniSalmeri May 2, 2021

Here you are: https://github.com/GiovanniSalmeri/yellow-miniburger

I tried to modify the solution of W3Schools as little as possible. In miniburger.css you will find the stylesheet (identical, I just added a little tweak); in miniburger.js a slightly modified js code (Yellow does not allow the attribute onclick, therefore it must be dinamically added); in miniburger.php the little boilerplate; in miniburger.html a variation of navigation.html which create the menu with the format expected by the stylesheet. It's not perfect, but in simple cases I hope it will be useful!

glow12121 May 5, 2021
Author

Many thanks for your work, @GiovanniSalmeri. I've noticed that the extension creates an additional folder for layouts. Layouts, in the plural, is the original one:

Otherwise, the extension works just fine for my site!

markseuffert May 5, 2021
Maintainer

Good work @GiovanniSalmeri. I would recommend to use the file actions create, update, careful for layout files. Then people can customise layouts, without them being accidentally overwritten in an update.

GiovanniSalmeri May 6, 2021

@markseu @thumos333 Thank you very much, fixed.

glow12121 May 6, 2021
Author

@GiovanniSalmeri, thank you.

JetGum · 2021-07-09T05:31:21Z

JetGum
Jul 9, 2021

This is great, love its simplicity. Any plans to adapt this for navigation-tree?
Cheers!

Carsten

2 replies

GiovanniSalmeri Jul 9, 2021

Well, more than plans there are desires :-) Navigation is one of the key aspect of usability, so efforts would be well spent, but just now I am in great shortage of time... But I have written this in my wish-list!

glow12121 Jul 9, 2021
Author

I actually had a suggestion to update all default Yellow templates so they include a hamburger menu in navigation on smaller screens. I could contribute simple pictures explicating the idea.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How do I make a hamburger menu? #651

{{title}}

Replies: 7 comments 19 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How do I make a hamburger menu? #651

Replies: 7 comments · 19 replies

glow12121 Apr 29, 2021 Author

schulle4u Apr 29, 2021 Maintainer

glow12121 Apr 29, 2021 Author

glow12121 Apr 30, 2021 Author

glow12121 May 2, 2021 Author

glow12121 May 5, 2021 Author

markseuffert May 5, 2021 Maintainer

glow12121 May 6, 2021 Author

glow12121 Jul 9, 2021 Author

Replies: 7 comments 19 replies

glow12121 Apr 29, 2021
Author

schulle4u Apr 29, 2021
Maintainer

glow12121 Apr 29, 2021
Author

glow12121
Apr 30, 2021
Author

glow12121
May 2, 2021
Author

glow12121 May 5, 2021
Author

markseuffert May 5, 2021
Maintainer

glow12121 May 6, 2021
Author

glow12121 Jul 9, 2021
Author