0
我遇到了滾動導航菜單欄的問題。我做了一些工作並找出了一些，但我無法做到的主要部分。用css和jquery響應水平滾動菜單
的Jquery：
<script>
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(){
});
});
<script>
的CSS：
@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;
}
}
HTML：
<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&FileType=IMP_SIP_REG"
target="frmScr">SIP Registration Upload</a></li><li><a
href="BulkFileUpload.aspx?TransType=IMP_SIP&FileType=IMP_SIP_CAN"
target="frmScr">SIP Cancellation Upload</a></li><li><a
href="BulkFileUpload.aspx?TransType=IMP_SHIFT&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&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&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&FileType=IMP_SWP_REG"
target="frmScr">SWP Registration Upload</a></li><li><a
href="BulkFileUpload.aspx?TransType=IMP_SWP&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&FileType=IMP_STP_REG" target="frmScr">STP Registration
Upload</a></li><li><a href="BulkFileUpload.aspx?
TransType=IMP_STP&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 & 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>
鏈接：https://www.bootply.com/RDP650rMxv
我需要一個可滾動的導航菜單，左右兩邊都是雪佛龍，如果極端的轉角菜單有子菜單，它將超出屏幕分辨率。
請在問題本身[mcve]中包含所有相關的代碼。不要只是添加一個鏈接到您的代碼。許多人被禁止訪問代碼共享網站，而且這些網站有時會自行停業。如果沒有Stack Overflow的代碼，這個問題對未來的觀衆是沒有幫助的。 –
我沒有清楚你的問題。你想擺脫菜單中的水平滾動嗎？ – joe
不，確切的相反喬，我想要一個滾動條菜單，我的標題菜單計數是25以上，我需要顯示所有的主菜單到標題導航菜單欄。 – Indradeep