Positioning submenu with JavaScript and CSS

Question

How can I make the boxes to be responsive? For example, the last submenu falls out of boundary. I don't know how I can validate if the boxes are visible or not on the space and how to move them correctly. In this case I want so see how to move the second level if that is not visible or also move the second and third level when they are both visible but just the third level is not visible.

document.addEventListener('click', function(e) {
    e = e || window.event;
    console.log(e);
    var target = e.target || e.srcElement;
    console.log(target);
    if (target.parentElement.className.indexOf('has-submenu') > -1) {
        e.target.classList.toggle('open');
    }
}, false);

#menu {
background: #343434;
color: #eee;
height: 35px;
border-bottom: 4px solid #eeeded
}

#menu ul,
#menu li {
margin: 0 0;
padding: 0 0;
list-style: none
}

#menu ul {
height: 35px
}

#menu li {
float: left;
display: inline;
position: relative;
font: bold 12px Arial;
text-shadow: 0 -1px 0 #000;
border-right: 1px solid #444;
border-left: 1px solid #111;
text-transform: uppercase
}

#menu li:first-child {
border-left: none
}

#menu a {
display: block;
line-height: 35px;
padding: 0 14px;
text-decoration: none;
color: #eee;
}

#menu li:hover > a,
#menu li a:hover {
background: #111
}

#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 35px;
opacity: 0;
cursor: pointer
}

#menu label {
font: bold 30px Arial;
display: none;
width: 35px;
height: 36px;
line-height: 36px;
text-align: center
}

#menu label span {
font-size: 12px;
position: absolute;
left: 35px
}

#menu ul.menus {
height: auto;
width: 180px;
background: #111;
position: absolute;
z-index: 99;
display: none;
border: 0;
}

#menu ul.menus li {
display: block;
width: 100%;
font: 12px Arial;
text-transform: none;
}

#menu li:hover ul.menus {
display: block
}

#menu a.home {
background: #c00;
}

#menu a.prett {
padding: 0 27px 0 14px
}

#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: #eee transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px
}

#menu a.prett.open::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: transparent transparent #eee transparent;
position: absolute;
top: 9px;
right: 9px
}

#menu ul.menus a:hover {
background: #333;
}

#menu ul.menus .submenu {
display: none;
position: absolute;
left: 180px;
background: #111;
top: 0;
width: 180px;
}

#menu ul.menus .submenu li {
background: #111;
}

#menu ul.menus .has-submenu a.open ~ .submenu {
display: block;
}

<nav>
  <ul id='menu'>
  <li><a class='home' href='/'>Home</a></li>
  <li><a class='prett' href='#' title='Menu'>Menu</a>
    <ul class='menus'>
      <li class='has-submenu'><a class='prett' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
        <ul class='submenu'>
          <li><a href="#" title="Sub Menu">Sub Menu</a></li>
          <li><a href="#" title="Sub Menu">Sub Menu 2</a></li>
          <li><a href="#" title="Sub Menu">Sub Menu 3</a></li>
        </ul>
      </li>
      <li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
      <li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
    </ul>
  </li>
  <li><a class='prett' href='#' title='Menu'>Menu</a>
    <ul class='menus'>
      <li class='has-submenu'><a class='prett' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
        <ul class='submenu'>
          <li><a href="#" title="Sub Menu">Sub Menu</a></li>
          <li><a href="#" title="Sub Menu">Sub Menu 2</a></li>
          <li><a href="#" title="Sub Menu">Sub Menu 3</a></li>
        </ul>
      </li>
      <li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
      <li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
    </ul>
  </li>
  <li><a class='prett' href='#' title='Menu'>Menu</a>
    <ul class='menus'>
      <li class='has-submenu'><a class='prett' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
        <ul class='submenu'>
          <li><a href="#" title="Sub Menu">Sub Menu</a></li>
          <li><a href="#" title="Sub Menu">Sub Menu 2</a></li>
          <li><a href="#" title="Sub Menu">Sub Menu 3</a></li>
        </ul>
      </li>
      <li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
      <li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
    </ul>
  </li>
  <li><a class='prett' href='#' title='Menu'>Menu</a>
    <ul class='menus'>
      <li class='has-submenu'><a class='prett' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
        <ul class='submenu'>
          <li><a href="#" title="Sub Menu">Sub Menu</a></li>
          <li><a href="#" title="Sub Menu">Sub Menu 2</a></li>
          <li><a href="#" title="Sub Menu">Sub Menu 3</a></li>
        </ul>
      </li>
      <li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
      <li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
    </ul>
  </li>
  <li><a class='prett' href='#' title='Menu'>Menu</a>
    <ul class='menus'>
      <li class='has-submenu'><a class='prett' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
        <ul class='submenu'>
          <li><a href="#" title="Sub Menu">Sub Menu</a></li>
          <li><a href="#" title="Sub Menu">Sub Menu 2</a></li>
          <li><a href="#" title="Sub Menu">Sub Menu 3</a></li>
        </ul>
      </li>
      <li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
      <li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
    </ul>
  </li>
  </ul>
  </nav>

example

https://jsfiddle.net/mwb2caht/

image of submenu before fix and after

score 0 · Answer 1 · answered Sep 11 '20 at 10:55

0

Use the information here, it is about @media queries. You can give the specified properties for a certain screen dimension

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

EDIT: you can press F12 in your browser window ( on Chrome) and then ctrl + shift + M to get the responsive "tester"

answered Sep 11 '20 at 10:55

George Tiganila

519
1
5
18

1

Actually that wont work correct because the width of the boxes can be different, what Im looking is with js to figure out if the 2nd and 3rd level are out of the boundary and move them to the left if needed. I edit my question with the screenshoot – Angelin83 Sep 11 '20 at 17:10
do you have a solution yet? – George Tiganila Sep 12 '20 at 19:56
how did you fix it? – George Tiganila Sep 12 '20 at 21:29
Here is another question with the same issue, with a solution https://stackoverflow.com/questions/11512032/detect-if-dropdown-navigation-would-go-off-screen-and-reposition-it – George Tiganila Sep 14 '20 at 11:52
Thanks for the link it really help me out – Angelin83 Sep 14 '20 at 19:53

Positioning submenu with JavaScript and CSS

1 Answers1