响应水平滚动菜单与CSS和jquery

Question

我遇到了可滚动导航菜单栏的问题。我做了一些工作并想出了一些，但主要部分我无法做到。

＆＃13;

＆＃13;

var hidWidth;
var scrollBarWidths = 40;

var widthOfList = function() {
  var itemsWidth = 0;
  $('.item').each(function() {
    var itemWidth = $(this).outerWidth();
    itemsWidth += itemWidth;
  });
  //alert(itemsWidth);
  return itemsWidth;
};

var widthOfHidden = function() {
  return (($('.cssmenu').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
};

var getLeftPosi = function() {
  //return $('.item:first-child').position().left;
  return $('.list').position().left;
};

var reAdjust = function() {
  if (($('.cssmenu').outerWidth()) < widthOfList()) {
    $('.scroller-right').show();
  } else {
    $('.scroller-right').hide();
    /*
            var leftPos = $('.item:first-child').position().left;
    	    $('.item').animate({left:"-="+leftPos+"px"},'slow');
            */
  }

  if (getLeftPosi() < 0) {
    $('.scroller-left').show();
  } else {
    $('.item').animate({
      left: "-=" + getLeftPosi() + "px"
    }, 'slow');
    $('.scroller-left').hide();
  }
}

reAdjust();

$(window).on('resize', function(e) {
  reAdjust();
});

$('.scroller-right').click(function() {

  $('.scroller-left').fadeIn('slow');
  $('.scroller-right').fadeOut('slow');

  $('.list').animate({
    left: "+=" + widthOfHidden() + "px"
  }, 'slow', function() {
    //reAdjust();
  });
});

$('.scroller-left').click(function() {
  //var leftPos = $('.item:first-child').position().left;
  //$('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
  //$('.scroller-left').hide();

  $('.scroller-right').fadeIn('slow');
  $('.scroller-left').fadeOut('slow');

  $('.list').animate({
    left: "-=" + getLeftPosi() + "px"
  }, 'slow', function() {

  });

});

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu:after,
#cssmenu>ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#cssmenu #menu-button {
  display: none;
}

#cssmenu {
  font-family: Montserrat, sans-serif;
  background: #0090c0;
}

#cssmenu>ul>li {
  float: left;
}

#cssmenu.align-center>ul {
  font-size: 0;
  text-align: center;
}

#cssmenu.align-center>ul>li {
  display: inline-block;
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right>ul>li {
  float: right;
}

#cssmenu>ul>li>a {
  padding: 17px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 700;
  text-transform: uppercase;
}

#cssmenu>ul>li:hover>a {
  color: #ffffff;
  /* Main menu border- */
}

#cssmenu>ul>li.has-sub>a {
  padding-right: 30px;
}

#cssmenu>ul>li.has-sub>a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
  /* Main menu plus sign */
}

#cssmenu>ul>li.has-sub>a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  /* Main menu plus sign */
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

#cssmenu>ul>li.has-sub:hover>a:before {
  top: 23px;
  height: 0;
}

#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}

#cssmenu.align-right ul ul {
  text-align: right;
}

#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

#cssmenu li:hover>ul {
  left: auto;
}

#cssmenu.align-right li:hover>ul {
  left: auto;
  right: 0;
}

#cssmenu li:hover>ul>li {
  height: 35px;
}

#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}

#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}

#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 400;
  background: #ff6030;
}

#cssmenu ul ul li:last-child>a,
#cssmenu ul ul li.last-item>a {
  border-bottom: 0;
}

#cssmenu ul ul li:hover>a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
  background-color: #c04830;
}

#cssmenu ul ul li.has-sub>a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}

#cssmenu.align-right ul ul li.has-sub>a:after {
  right: auto;
  left: 11px;
}

#cssmenu ul ul li.has-sub>a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

#cssmenu.align-right ul ul li.has-sub>a:before {
  right: auto;
  left: 14px;
}

#cssmenu ul ul>li.has-sub:hover>a:before {
  top: 17px;
  height: 0;
}

.scroller {
  color: #333333;
  width: 40px;
  text-align: center;
  cursor: pointer;
  display: none;
  padding: 5px;
  margin-top: 20px;
}

.scroller-right {
  float: right;
}

.scroller-left {
  float: left;
}

.list {
  position: absolute;
  left: 0px;
  top: 0px;
  min-width: 3000px;
  margin-left: 12px;
  margin-top: 0px;
}

.item {
  padding: 10px;
  /*float:left;*/
  display: table-cell;
  margin: 1px;
  position: relative;
  text-align: center;
  cursor: grab;
  cursor: -webkit-grab;
  color: #efefef;
  border: 1px dotted #111;
  vertical-align: middle;
}

@media all and (max-width: 768px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min-resolution: 192dpi) and (max-width: 1024px),
only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
  }
  #cssmenu.align-center>ul {
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu ul ul li,
  #cssmenu li:hover>ul>li {
    height: auto;
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0;
  }
  #cssmenu>ul>li {
    float: none;
  }
  #cssmenu ul ul li a {
    padding-left: 25px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 35px;
  }
  #cssmenu ul ul li a {
    color: #dddddd;
    background: none;
  }
  #cssmenu ul ul li:hover>a,
  #cssmenu ul ul li.active>a {
    color: #ffffff;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu.align-right ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left;
  }
  #cssmenu>ul>li.has-sub>a:after,
  #cssmenu>ul>li.has-sub>a:before,
  #cssmenu ul ul>li.has-sub>a:after,
  #cssmenu ul ul>li.has-sub>a:before {
    display: none;
  }
  #cssmenu #menu-button {
    display: block;
    padding: 17px;
    color: #dddddd;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
  }
  #cssmenu #menu-button:after {
    position: absolute;
    top: 22px;
    right: 17px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    content: '';
  }
  #cssmenu #menu-button:before {
    position: absolute;
    top: 16px;
    right: 17px;
    display: block;
    height: 2px;
    width: 20px;
    background: #dddddd;
    content: '';
  }
  #cssmenu #menu-button.menu-opened:after {
    top: 23px;
    border: 0;
    height: 2px;
    width: 15px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cssmenu #menu-button.menu-opened:before {
    top: 23px;
    background: #ffffff;
    width: 15px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #cssmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    height: 46px;
    width: 46px;
    cursor: pointer;
  }
  #cssmenu .submenu-button.submenu-opened {
    background: #262626;
  }
  #cssmenu ul ul .submenu-button {
    height: 34px;
    width: 34px;
  }
  #cssmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px;
  }
  #cssmenu .submenu-button.submenu-opened:after {
    background: #ffffff;
  }
  #cssmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px;
  }
  #cssmenu .submenu-button.submenu-opened:before {
    display: none;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
  <div id="menu-button">Menu</div>
  <ul class="list">
    <li name="item"><a href="Blank.aspx" target="frmScr"><i class="fa fa-fw fa-
          home"></i>Home</a></li>
    <li name="item">
      <a href="QuickOrderEntry.aspx" target="frmScr">Quick Order</a></li>
    <li name="item">
      <a href="SpreadOrder.aspx" target="frmScr">Spread Order</a></li>
    <li name="item">
      <a href="SwitchOpenMF.aspx" target="frmScr">Switch Order</a></li>
    <li name="item">
      <a href="SpreadViewOrders.aspx" target="frmScr">View Spread Orders</a></li>
    <li name="item">
      <a href="ViewOrder.aspx" target="frmScr">View Order</a></li>
    <li name="item" class="has-sub"><span class="submenu-button"></span>
      <a href="Blank.aspx" rel="SSI0000001" target="frmScr">Systematic Investment</a>
      <ul id="SSI0000001">
        <li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">SIP</a>
          <ul>
            <li><a href="frmSIPRegistration.aspx" target="frmScr">SIP Registration</a></li>
            <li><a href="frmrptCancelSIP.aspx" target="frmScr">SIP Cancellation</a></li>
            <li>
              <a href="frmrptSIPRegistrationView.aspx" target="frmScr">SIP Registration 
         Report</a></li>
            <li><a href="frmrptBrokerSIPReport.aspx" target="frmScr">SIP 
         Installment due Report</a></li>
            <li><a href="frmSIPCancellationReport.aspx" target="frmScr">SIP Cancellation Report</a></li>
            <li><a href="BulkFileUpload.aspx?TransType=IMP_SIP&amp;FileType=IMP_SIP_REG" target="frmScr">SIP Registration Upload</a></li>
            <li><a href="BulkFileUpload.aspx?TransType=IMP_SIP&amp;FileType=IMP_SIP_CAN" target="frmScr">SIP Cancellation Upload</a></li>
            <li><a href="BulkFileUpload.aspx?TransType=IMP_SHIFT&amp;FileType=IMP_SIP_TO_XSP" target="frmScr">Shift SIP To XSIP Upload</a></li>
            <li><a href="SIPExceptionsReport.aspx" target="frmScr">SIP Exception Report</a>
            </li>
          </ul>
        </li>
        <li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Mandate</a>
          <ul>
            <li><a href="frmMandateRegistrationForm.aspx" target="frmScr">Mandate 
        Registration</a></li>
            <li><a href="frmMandateUploadByMember.aspx" target="frmScr">Mandate Registration Upload</a></li>
            <li><a href="frmMandateSearchByMember.aspx" target="frmScr">Mandate Search</a></li>
            <li><a href="frmMandateDownloadForMember.aspx" target="frmScr">Mandate 
          Download</a></li>
          </ul>
        </li>
        <li class="has-sub"><span class="submenu-button">
           </span><a href="Blank.aspx" target="frmScr">X-SIP / I-SIP</a>
          <ul>
            <li><a href="frmXSIPRegistrationMaster.aspx" target="frmScr">X-SIP / I-SIP 
           Registration</a></li>
            <li><a href="BulkFileUpload.aspx?
          TransType=IMP_XSIP&amp;FileType=IMP_XSIP_REG" target="frmScr">X-SIP / I-SIP 
          Registration Upload</a></li>
            <li><a href="frmRptXSIPRegistrationView.aspx" target="frmScr">X-SIP / I-SIP Registration Report</a></li>
            <li><a href="frmRptXSIPInstallmentDueReport.aspx" target="frmScr">X-SIP / I-SIP 
          Installment due Report</a></li>
            <li><a href="frmrptXSIPBrokerageReportForMembers.aspx" target="frmScr">Brokerage 
          Report</a></li>
            <li><a href="frmrptCancelXSIP.aspx" target="frmScr">X-SIP / I-
           SIP Cancellation</a></li>
            <li><a href="BulkFileUpload.aspx?
       TransType=IMP_XSIP&amp;FileType=IMP_XSIP_CAN" target="frmScr">X-SIP / I-SIP 
       Cancellation Upload</a></li>
            <li><a href="frmXSIPCancellationReport.aspx" target="frmScr">X-SIP / I-SIP Cancellation Report</a></li>
          </ul>
        </li>
        <li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">SWP</a>
          <ul>
            <li><a href="SWPRegistrationMaster.aspx" target="frmScr">SWP Registration Master</a></li>
            <li><a href="BulkFileUpload.aspx?TransType=IMP_SWP&amp;FileType=IMP_SWP_REG" target="frmScr">SWP Registration Upload</a></li>
            <li><a href="BulkFileUpload.aspx?TransType=IMP_SWP&amp;FileType=IMP_SWP_CAN" target="frmScr">SWP Cancellation Upload</a></li>
            <li><a href="SWPCancellationRegn.aspx" target="frmScr">SWP Cancellation</a></li>
          </ul>
        </li>
        <li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">STP</a>
          <ul>
            <li><a href="STPRegistrationMaster.aspx" target="frmScr">STP Registration Master</a>
            </li>
            <li><a href="BulkFileUpload.aspx?
           TransType=IMP_STP&amp;FileType=IMP_STP_REG" target="frmScr">STP Registration 
           Upload</a></li>
            <li><a href="BulkFileUpload.aspx?
          TransType=IMP_STP&amp;FileType=IMP_STP_CAN" target="frmScr">STP 
          Cancellation 
           Upload</a></li>
            <li><a href="STPCancellationRegn.aspx" target="frmScr">STP 
           Cancellation</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li name="item" class="has-sub">
      <span class="submenu-button"></span>
      <a href="Blank.aspx" rel="SGB0000001" target="frmScr">SGB</a>
      <ul id="SGB0000001">
        <li><a href="SGBManualEntry.aspx" target="frmScr">SGB Manual Entry</a></li>
        <li><a href="SGBView.aspx" target="frmScr">SGB View</a></li>
        <li><a href="SGBUpload.aspx" target="frmScr">SGB Upload</a></li>
      </ul>
    </li>
    <li name="item" class="has-
            sub"><span class="submenu-button"></span>
      <a href="Blank.aspx" rel="MADM000001" target="frmScr">Admin</a>
      <ul id="MADM000001">
        <li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Member M 
            Masters</a>
          <ul>
            <li><a href="MemberBranches.aspx" target="frmScr">Member 
            Branches</a></li>
          </ul>
        </li>
        <li class="has-sub"><span class="submenu-button">
            </span><a href="Blank.aspx" target="frmScr">User Master</a>
          <ul>
            <li><a href="UserMasterDetails.aspx" target="frmScr">User Master Manual</a></li>
            <li><a href="UserMasterUpload.aspx" target="frmScr">User Master Upload</a>
            </li>
          </ul>
        </li>
        <li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Client Details</a>
          <ul>
            <li><a href="ClientMasterDetails.aspx" target="frmScr">Client Master</a></li>
            <li><a href="FATCA.aspx" target="frmScr">FATCA Manual Entry</a></li>
            <li><a href="CKYC.aspx" target="frmScr">CKYC</a></li>
          </ul>
        </li>
        <li class="has-sub">
          <span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Admin Reports</a>
          <ul>
            <li><a href="frmrptBrokerSIPReport.aspx" target="frmScr">SIP Installment due 
            Report</a></li>
            <li><a href="UserMasterReport.aspx" target="frmScr">User 
            Master Report</a></li>
            <li><a href="ClientMasterReport.aspx" target="frmScr">Client Master Report</a></li>
            <li><a href="frmClientStatusReport.aspx" target="frmScr">Client Status</a></li>
            <li>
              <a href="RptBranchLoginInfo.aspx" target="frmScr">Branch/Login Info</a></li>
            <li><a href="RptMemberAMCList.aspx" target="frmScr">Member AMC List</a></li>
            <li><a href="frmViewBannedClients.aspx" target="frmScr">View Banned 
           Clients</a></li>
          </ul>
        </li>
        <li class="has-sub"><span class="submenu-button">
           </span><a href="Blank.aspx" target="frmScr">Limits</a>
          <ul>
            <li><a href="BranchDeposits.aspx" target="frmScr">Branch Deposits</a></li>
            <li><a href="DealerDeposits.aspx" target="frmScr">Dealer Deposits</a></li>
            <li><a href="ClientDeposits.aspx" target="frmScr">Client Deposits</a></li>
          </ul>
        </li>
        <li><a href="ClientPaymentRejections.aspx" target="frmScr">Payment 
           Rejections</a></li>
        <li><a href="UploadFATCAFile.aspx" target="frmScr">FATCA 
           Upload</a></li>
        <li><a href="AOFDownload.aspx" target="frmScr">AOF 
           Download</a></li>
        <li><a href="ImageUpload.aspx" target="frmScr">Image 
           Upload</a></li>
        <li><a href="MemberBankDetails.aspx" target="frmScr">Member 
           Bank Details</a></li>
        <li><a href="PANUpload.aspx" target="frmScr">PAN 
           Upload</a></li>
      </ul>
    </li>
    <li name="item" class="has-sub"><span class="submenu-button"></span>
      <a href="Blank.aspx" rel="MMR0000001" target="frmScr">Member Reports</a>
      <ul id="MMR0000001">
        <li><a href="ProvORDReport.aspx" target="frmScr">Provisional Orders</a></li>
        <li><a href="RptProvisionalOrderReportNew.aspx" target="frmScr">New Provisional  
            Orders </a></li>
        <li><a href="OCNReport.aspx" target="frmScr">Bulk OCN 
            Generation</a></li>
        <li><a href="CustodianProvOrderReport.aspx" target="frmScr">Custodian Provision Orders</a></li>
        <li><a href="OrderLogReport.aspx" target="frmScr">Order Log</a></li>
        <li><a href="OrderDetailsSearch.aspx" target="frmScr">Order Status</a></li>
        <li><a href="RptOrderStatusReportNew.aspx" target="frmScr">New Order Status</a>
        </li>
      </ul>
    </li>
    <li name="item" class="has-sub"><span class="submenu-button">
             </span>
      <a href="Blank.aspx" rel="UTI0000001" target="frmScr">Utilities</a>
      <ul id="UTI0000001">
        <li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Member 
             Related</a>
          <ul>
            <li><a href="QuickOrderEntry.aspx" target="frmScr">Quick 
             Order</a></li>
            <li><a href="PlaceOrderRedemption.aspx" target="frmScr">Minimum Qty Redemption Order Entry</a></li>
            <li><a href="ViewOrder.aspx" target="frmScr">View Orders</a></li>
            <li><a href="BulkFileUpload.aspx?TransType=IMP_MASTER" target="frmScr">Bulk Upload 
             New</a></li>
            <li><a href="FileUpload.aspx" target="frmScr">Bulk Upload</a>
            </li>
            <li><a href="UploadClientDealerMap.aspx" target="frmScr">Upload 
              Client Mapping &amp; Balances</a></li>
            <li><a href="ManualFileUpload.aspx" target="frmScr">Upload Client Deposits</a></li>
            <li><a href="frmUpdateClientDealerMapping.aspx" target="frmScr">Upload Client 
              Dealer Mapping</a></li>
            <li><a href="frmUploadOrderCancellation.aspx" target="frmScr">Upload Order Cancellation</a></li>
            <li><a href="DealerDeposits.aspx" target="frmScr">Dealer Deposits</a></li>
            <li><a href="frmUploadMemberFundsForGateway.aspx" target="frmScr">Upload Member 
               Funds Gateway</a></li>
          </ul>
        </li>
        <li><a href="ChangePassword.aspx" target="frmScr">Change Password</a></li>
      </ul>
    </li>
    <li name="item"><a href="LogOut.aspx" target="_top"><i class="fa fa-sign-out"></i>Log 
               Out</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

链接：https://www.bootply.com/RDP650rMxv

我需要一个可滚动的导航菜单，左上方和右上方有雪佛龙，如果极端角落菜单有子菜单，则超出屏幕分辨率。

Answer 1

如果我做对了，打开子菜单时的最后一个菜单会向极右侧射击。你可以用这个css修复它

ul#UTI0000001 li ul {
    margin-left: -100%;
}