Change width of menu items depending on amount of menu items

Question

Using Joomla I have got 4 menu items. One of them is optional. If I want to unpublish this menu item, the other menu items width should be increased, but only at viewport min-width 980px. The menu has the id #menu, the elements width I want to change is #menu li. The menu item which is optional has .optMenuitem as its classname. For four menu items the width should be 25%, for three 33.33% than. I thought of sth like:

function changeWidth (){
 var four = document.getElementsByClassName('optMenuitem');
 var opt = document.getElementByID('menu');
 if (four==true){
  opt.li.style.width = "25%";
 } else {
  opt.li.style.width = "33.33%";
 }
}

Does not work. I'm a newbie. Any suggestions?

I meant yes. "opt.li" is undefined. How do I target the #menu li element to change it's width? — , Jan 11 '18 at 13:09
What happends exactly, are they all at 25%? Can you show the HTML of the menu? — Liora Haydont, Jan 11 '18 at 13:12

score 2 · Answer 1 · 2018-01-11T13:50:35.480

2

EDIT I added simple JS to show you how to add classes to elements

If you're not against using flexboxes, here is the solution.

The only drawback of flexboxes is that they work on recent browsers and not old ones.

Anyway, here is the answer (I will give you the CSS + HTML and I'll let you handle the JS side, you will just have to apply the class to your menu items and add/delete them on demand)

const containers = document.getElementsByClassName('container');

for (let container of containers) {
  for (const item of container.children) {
    item.className += ' menu';
  }
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 20px 0;
}

.menu {
  flex: 1 1 auto;
  height: 50px;
  background: lightgrey;
  
  /* Just to align them to center and style them */
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  border: 1px solid #aaa;
  margin-left: -1px;
};

<div class="container">
  <div>Menu 1</div>
  <div>Menu 2</div>
  <div>Menu 3</div>
  <div>Menu 4</div>
</div>

<div class="container">
  <div>Menu 1</div>
  <div>Menu 2</div>
  <div>Menu 3</div>
</div>

edited Jan 11 '18 at 13:50

answered Jan 11 '18 at 13:14

you may consider your code with `ul li` so it's more suitable for menu items ;) – Temani Afif Jan 11 '18 at 13:23
And if we do it HTML5 style, I should also use the `nav` tag for my container. That's your opinion, mine is that lists need more styling to look like that. Whatever floats your boat ;) – Jan 11 '18 at 13:25
the problem is that the html is generated automatically. I think this would work fine, but in regard to Joomla it's awkward – Jan 11 '18 at 13:28
Well all you need in this case is a class. I don't know joomla that much, but I guess you can at least give your automatically generated element a class ? – Jan 11 '18 at 13:36
no, the system give the class by itself. But every single Element in for example a menu will get it's own class. It's more likely an ID than a class, but it is declarated as a class. – Jan 11 '18 at 13:39
I have edited my post to show you how to add classes to your elements. All you need to do is know the class / ID of your menu container, and voilà ! – Jan 11 '18 at 13:51

Temani Afif · Accepted Answer · 2018-01-11T14:03:22.060

1

If you want to target #menu li you should do something like this:

function changeWidth() {
  var four = document.getElementsByClassName('optMenuitem');
  // You select all the menu items
  var opt = document.querySelectorAll('#menu li');
  if (four == true) {
    // You loop on all of them and you set the width
    for (var i = 0; i < opt.length; i++)
      opt[i].style.width = "25%";
  } else {
    for (var i = 0; i < opt.length; i++)
      opt[i].style.width = "33%";
  }
}

edited Jan 11 '18 at 14:03

answered Jan 11 '18 at 13:42

Temani Afif

245,468
26
309
415

that's the (almost) perfect solution and it's working. Thanks! Last but not least: I only want to change the width, if the viewports min-width is 980px. Is that possible too? – Jan 11 '18 at 13:57
@RicardoMüller yes you can, simply add a test to see if the width of screen is bigger or not than 980 px and apply your logic .. you can read this https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window and you will see a lot of method to get the window width – Temani Afif Jan 11 '18 at 14:00

Change width of menu items depending on amount of menu items

2 Answers2