Home > Mobile >  Change vertical menu to horizontal CSS
Change vertical menu to horizontal CSS

Time：01-28

I'm trying to change this menu from vertical to horizontal, I'm not very familiar with css so I'm not sure about the solution. So far I understand that with the parameter display:inline-block; you can specify that the elements are arranged horizontally but it doesn't work for me. I would appreciate any help.

$(function() {
  // whenever we hover over a menu item that has a submenu
  $('li.parent').on('mouseover', function() {
    var $menuItem = $(this),
      $submenuWrapper = $('> .wrapper', $menuItem);

    // grab the menu item's position relative to its positioned parent
    var menuItemPos = $menuItem.position();

    // place the submenu in the correct position relevant to the menu item
    $submenuWrapper.css({
      top: menuItemPos.top,
      left: menuItemPos.left   Math.round($menuItem.outerWidth() * 0.75),
    });
  });
});
.wrapper {
  position: relative;
}

ul {
  /*width: 200px;
        max-height: 250px;overflow-y: auto;*/
  overflow-x: auto;
}

li {
  position: static;
}

li .wrapper {
  position: absolute;
  z-index: 10;
  display: none;
}

li:hover>.wrapper {
  display: inline-block;
}

ul {
  margin: 1em;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
}

li {
  padding: 1em;
}

li ul {
  margin: 0;
}

li .wrapper {
  cursor: auto;
}

li .wrapper li {
  padding: 0.5em;
}

li:nth-child(2n) {
  background: #0e8ce0;
}

li:nth-child(2n   1) {
  background: #0064b3;
}

.parent {
  background: #00b99b;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div >
    <ul>
      <li>Abc</li>
      <li>Def</li>
      <li>Ghi</li>
      <li>Jkl</li>
      <li >
        Mno >
        <div >
          <ul>
            <li>Abc</li>
            <li>Def</li>
            <li>Ghi</li>
            <li>Jkl</li>
            <li >
              Mno >
              <div >
                <ul>
                  <li>Abc</li>
                  <li>Def</li>
                  <li>Ghi</li>
                  <li>Jkl</li>
                  <li>Mno</li>
                  <li>Pqr</li>
                  <li>Stu</li>
                  <li>Vw</li>
                  <li>Xyz</li>
                </ul>
              </div>
            </li>
            <li>Pqr</li>
            <li>Stu</li>
            <li>Vw</li>
            <li>Xyz</li>
          </ul>
        </div>
      </li>
      <li>Pqr</li>
      <li>Stu</li>
      <li>Vw</li>
      <li>Xyz</li>
      <li >
        Abc >
        <div >
          <ul>
            <li>Abc</li>
            <li>Def</li>
            <li>Ghi</li>
            <li>Jkl</li>
            <li>Mno</li>
            <li>Pqr</li>
            <li>Stu</li>
            <li>Vw</li>
            <li>Xyz</li>
          </ul>
        </div>
      </li>
      <li>Def</li>
      <li>Ghi</li>
      <li>Jkl</li>
      <li>Mno</li>
      <li>Pqr</li>
      <li>Stu</li>
      <li>Vw</li>
      <li>Xyz</li>
    </ul>
  </div>
</body>

</html>

CodePudding user response：

If you set the list to display as flex it will (by default) show its children in one row.

From there you can decide how to cope with it on narrow devices (perhaps a media query which sets the flex direction) and you can also spread the li items out in horizontal mode by looking at the various justify-content settings.

This snippet sets justify-content: spread-between just as an example.

$(function() {
  // whenever we hover over a menu item that has a submenu
  $('li.parent').on('mouseover', function() {
    var $menuItem = $(this),
      $submenuWrapper = $('> .wrapper', $menuItem);

    // grab the menu item's position relative to its positioned parent
    var menuItemPos = $menuItem.position();

    // place the submenu in the correct position relevant to the menu item
    $submenuWrapper.css({
      top: menuItemPos.top,
      left: menuItemPos.left   Math.round($menuItem.outerWidth() * 0.75),
    });
  });
});
.wrapper {
  position: relative;
}

ul {
  /*width: 200px;
        max-height: 250px;overflow-y: auto;*/
  overflow-x: auto;
}
.wrapper > ul {
  display: flex;
  justify-content: space-between;
}

li {
  position: static;
}

li .wrapper {
  position: absolute;
  z-index: 10;
  display: none;
}

li:hover>.wrapper {
  display: inline-block;
}

ul {
  margin: 1em;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
}

li {
  padding: 1em;
}

li ul {
  margin: 0;
}

li .wrapper {
  cursor: auto;
}

li .wrapper li {
  padding: 0.5em;
}

li:nth-child(2n) {
  background: #0e8ce0;
}

li:nth-child(2n   1) {
  background: #0064b3;
}

.parent {
  background: #00b99b;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div >
    <ul>
      <li>Abc</li>
      <li>Def</li>
      <li>Ghi</li>
      <li>Jkl</li>
      <li >
        Mno >
        <div >
          <ul>
            <li>Abc</li>
            <li>Def</li>
            <li>Ghi</li>
            <li>Jkl</li>
            <li >
              Mno >
              <div >
                <ul>
                  <li>Abc</li>
                  <li>Def</li>
                  <li>Ghi</li>
                  <li>Jkl</li>
                  <li>Mno</li>
                  <li>Pqr</li>
                  <li>Stu</li>
                  <li>Vw</li>
                  <li>Xyz</li>
                </ul>
              </div>
            </li>
            <li>Pqr</li>
            <li>Stu</li>
            <li>Vw</li>
            <li>Xyz</li>
          </ul>
        </div>
      </li>
      <li>Pqr</li>
      <li>Stu</li>
      <li>Vw</li>
      <li>Xyz</li>
      <li >
        Abc >
        <div >
          <ul>
            <li>Abc</li>
            <li>Def</li>
            <li>Ghi</li>
            <li>Jkl</li>
            <li>Mno</li>
            <li>Pqr</li>
            <li>Stu</li>
            <li>Vw</li>
            <li>Xyz</li>
          </ul>
        </div>
      </li>
      <li>Def</li>
      <li>Ghi</li>
      <li>Jkl</li>
      <li>Mno</li>
      <li>Pqr</li>
      <li>Stu</li>
      <li>Vw</li>
      <li>Xyz</li>
    </ul>
  </div>
</body>

</html>

CodePudding user response：

Add display:flex it will work

ul {
  /*width: 200px;
        max-height: 250px;overflow-y: auto;*/
        display: flex;
  overflow-x: auto;
}

CodePudding user response：

You just need to add the "display: inline-block" property in the li selector and it will make all the lists horizontal.

$(function() {
  // whenever we hover over a menu item that has a submenu
  $('li.parent').on('mouseover', function() {
    var $menuItem = $(this),
      $submenuWrapper = $('> .wrapper', $menuItem);

    // grab the menu item's position relative to its positioned parent
    var menuItemPos = $menuItem.position();

    // place the submenu in the correct position relevant to the menu item
    $submenuWrapper.css({
      top: menuItemPos.top,
      left: menuItemPos.left   Math.round($menuItem.outerWidth() * 0.75),
    });
  });
});
.wrapper {
  position: relative;
}

ul {
  /*width: 200px;
        max-height: 250px;overflow-y: auto;*/
  overflow-x: auto;
}

li {
  position: static;
  display: inline-block;
}

li .wrapper {
  position: absolute;
  z-index: 10;
  display: none;
}

li:hover>.wrapper {
  display: inline-block;
}

ul {
  margin: 1em;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
}

li {
  padding: 1em;

}

li ul {
  margin: 0;
}

li .wrapper {
  cursor: auto;
}

li .wrapper li {
  padding: 0.5em;
}

li:nth-child(2n) {
  background: #0e8ce0;
}

li:nth-child(2n   1) {
  background: #0064b3;
}

.parent {
  background: #00b99b;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div >
    <ul>
      <li>Abc</li>
      <li>Def</li>
      <li>Ghi</li>
      <li>Jkl</li>
      <li >
        Mno >
        <div >
          <ul>
            <li>Abc</li>
            <li>Def</li>
            <li>Ghi</li>
            <li>Jkl</li>
            <li >
              Mno >
              <div >
                <ul>
                  <li>Abc</li>
                  <li>Def</li>
                  <li>Ghi</li>
                  <li>Jkl</li>
                  <li>Mno</li>
                  <li>Pqr</li>
                  <li>Stu</li>
                  <li>Vw</li>
                  <li>Xyz</li>
                </ul>
              </div>
            </li>
            <li>Pqr</li>
            <li>Stu</li>
            <li>Vw</li>
            <li>Xyz</li>
          </ul>
        </div>
      </li>
      <li>Pqr</li>
      <li>Stu</li>
      <li>Vw</li>
      <li>Xyz</li>
      <li >
        Abc >
        <div >
          <ul>
            <li>Abc</li>
            <li>Def</li>
            <li>Ghi</li>
            <li>Jkl</li>
            <li>Mno</li>
            <li>Pqr</li>
            <li>Stu</li>
            <li>Vw</li>
            <li>Xyz</li>
          </ul>
        </div>
      </li>
      <li>Def</li>
      <li>Ghi</li>
      <li>Jkl</li>
      <li>Mno</li>
      <li>Pqr</li>
      <li>Stu</li>
      <li>Vw</li>
      <li>Xyz</li>
    </ul>
  </div>
</body>

</html>

Page link：https//www.codepudding.com/Mobile/279982.html

Prev:How can i have elispsis on my table cell without using max-width?
Next:CSS how to display boxes as a grid
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding