How to Make Jquery UI Nav Menu Horizontal

How to make jQuery UI nav menu horizontal?

You can do this:

/* Clearfix for the menu */
.ui-menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

and also set:

.ui-menu .ui-menu-item {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
}

JQuery UI: Horizontal Menu

I've found this CSS NAV Generator which would solve the problem (kind of ..):

http://cssmenumaker.com/builder/1444006

How to create a horizontal JQuery 1.9 Menu?

Possible duplicate from How to make jQuery UI nav menu horizontal?

But you can definitely do it: it is not a jQuery issue, you just need to style the affected elements with CSS, which are the .ui-menu and .ui-menu-item classes.

Menu and menuitem orientation issue in Jquery

Using some menu params you can get this working as horizontal menu

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Menu</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
    $(function() {
    $( "#menu" ).menu({ position: { my: "left top-10", at: "right" } });
    });
    </script>
<style>
    .ui-menu li{ display: inline-block;}
    .ui-menu li ul { 
        top: 100%!important;
        left: 0!important;
    }
    .ui-menu li ul ul { 
        top: 0%!important;
        left: 100%!important;
    }
</style>
</head>
<body>
<ul id="menu">
    <li class="ui-state-disabled">Aberdeen</li>
    <li>Ada</li>
    <li>Adamsville</li>
    <li>Addyston</li>
    <li>Delphi
    <ul>
        <li class="ui-state-disabled">Ada</li>
        <li>Saarland</li>
        <li>Salzburg an der schnen Donau</li>
    </ul>
    </li>
    <li>Saarland</li>
    <li>Salzburg
    <ul>
        <li>Delphi
        <ul>
            <li>Ada</li>
            <li>Saarland</li>
            <li>Salzburg</li>
        </ul>
        </li>
        <li>Delphi
        <ul>
            <li>Ada</li>
            <li>Saarland</li>
            <li>Salzburg</li>
        </ul>
        </li>
        <li>Perch</li>
    </ul>
    </li>
    <li class="ui-state-disabled">Amesville</li>
</ul>
</body>
</html>

Has anyone seen a jQuery horizontal nav menu that will dynamically adjust its size?

You can easily do it yourself, take a look at this Fiddle, or run the snippet below (full page):

$(document).on('ready', function () {    function getHiddenItems() {        var isOneLine = true;        var topPosition = false;        var invisibleItems = $('<ul/>');        $('.menu li').each(function () {            var thisPosition = $(this).position();            if (topPosition === false) {                topPosition = thisPosition.top;            } else if (thisPosition.top > topPosition) {                invisibleItems.append($(this).clone());                isOneLine = false;            };        });        return isOneLine ? false : invisibleItems;    };
    function checkMenu() {        $('.more').hide();        var hiddenItems = getHiddenItems();        if (!hiddenItems) {
            $('.more_menu').html('');        } else {            $('.more').show();            /* What items are not visible now? */            hiddenItems = getHiddenItems();            $('.more_menu').html('<ul>' + hiddenItems.html() + '</ul>');        };    };    $('.more').on('click', function (e) {        e.preventDefault();        $('.more').toggleClass('more_menu_opened');        $('.more_menu').toggleClass('active');    });    $(window).on('resize', checkMenu);    checkMenu();});

* {    margin: 0;    padding: 0;}body {    margin: 20px 0;    font-family: Arial, sans-serif;}.menu {    list-style-type: none;    height: 35px;    overflow: hidden;}.more_menu {    display: none;}.more_menu.active {    display: block;}.menu li {    display: block;    float: left;    height: 35px;    line-height: 35px;    white-space: nowrap;    padding: 0 10px;}.more {    display: block;    float: right;    height: 35px;    line-height: 35px;    white-space: nowrap;    padding: 0 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><a class="more" href="#show_all">More</a><ul class="menu">    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>    <li>Item 4</li>    <li>Item 5</li>    <li>Item 6</li></ul><br /><br /><div class="more_menu"></div>

How can I get my menu dropdown direction to change at the edge of the viewport?

I've managed to do, what I want, with less expenses than thought ) Idea that do not touch all children let menu handle it itself, but instead correct first child behavior.

$(document).ready(function() {
  $('.information_menu_root_ul').menu();
  $('.information_menu_root_ul > li > .ui-menu').addClass('information_menu_first_child');
});

.information_menu_root_ul {
    display: none;
    position: relative;
    background-color: #c7e6b3 !important;
    }

.information_menu_item {
  width: 300px;
  }
  
.information_menu_first_child {
  position: absolute;
  top: 101% !important;
  left: 0px !important;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<div class="information_menu_item">Header(for hover)
  <ul class="information_menu_root_ul">
    <li>
      <div class="information_menu_item">Item 1</div>
        <ul>
          <li>
            <div class="information_menu_item">Item 2</div>
              <ul>
                <li>
                  <div class="information_menu_item">Item 3</div>
                  <ul>
                    <li>
                      <div class="information_menu_item">Item 4</div>
                    </li>
                  </ul>
                </li>
              </ul>
          </li>
        </ul>
    </li>
  </ul>
</div>

How to Make Jquery UI Nav Menu Horizontal