JavaScript: thanh điều hướng động với thanh trượt thả xuống phần tử thả xuống chiều rộng

Question

Cảm ơn bạn đã xem xét câu hỏi này.

Mã có thể được tìm thấy trên GitHub, here.

Có một vài điều đang diễn ra ở đây, vì vậy trước khi chúng tôi nhận được mã tôi muốn giải thích một chút về nó.

Tôi có hàm makeNavigation lấy ba tham số để tạo thanh điều hướng: một mảng các mục cho thanh điều hướng, id phần tử của nơi thanh điều hướng sẽ đi và kích thước.

Điều này hoạt động khá tốt khi không bao gồm lợi nhuận. Tuy nhiên ngay sau khi hai dòng cho các lề không được chú ý, thì nội dung thả xuống lớn hơn nhiều so với mức cần thiết. Suy nghĩ?

Ngoài ra, khi cửa sổ sụp đổ càng nhỏ càng tốt, thay vì chỉ có một phần tử thả xuống, "Trang chủ" và các thanh thả xuống được xếp chồng lên nhau. Tại sao/làm thế nào tôi có thể sửa lỗi này?

Chú ý: Tôi nguồn W3 CSS và hover-master

Vì vậy, cho các biến chúng ta có trang và "Kích thước".

var pages = ["HOME","ABOUT","PAGE3","PAGE4","PAGE5","PAGE6","PAGE7","PAGE8"]; 
var extraSmall, small, medium, large; 
extraSmall = 610; 
small = 700; 
medium = 800; 
large = 1250; 

Đối với các chức năng:

function getSizeInText(size) { 

    if (size > large) { 
    return("large") 
    }; 
    if (extraSmall < size && size < medium) { 
    return("small") 
    }; 
    if (medium <= size && size <= large) { 
    return("medium") 
    }; 
    if (size <= extraSmall) { 
    return("extraSmall") 
    } 
} 

function makeNavigation(navArray, navID, size) { 

    var theID = document.getElementById(navID); 
    var mar = 8; 
    var pad = 2; 
    theID.innerHTML = null; 
    // theID.style.marginRight = mar + "%"; 
    // theID.style.marginLeft = mar + "%"; 
    theID.style.marginTop = mar/4 + "%"; 
    if (size == "extraSmall") { 
    var numNav = navArray.length; 
    theID.innerHTML += '<li class="w3-dropdown-hover w3-centered" '+ 
    'style="width:' + spaceAllocated + '%" >' + 
    '<a class="hvr-reveal navFont">' + 
    '<i class="fa fa-bars"></i></a>' + 
    '<ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%">' + 
    '</ul>' + '</li>'; 
    for (var i = 0; i < numNav; i++) { 
     document.getElementById('dropDownContent').innerHTML+= 
     '<li style="width:' + 
     (100 - 2*pad) + '%">'+ 
     '<a class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html">' + 
     navArray[i] + '</a></li>'; 
    } 
    } 


    if (size == "small") { 
    var numNav = navArray.length; 
    var spaceAllocated = (100)/2; 
    for (var i = 0; i < 1; i++) { 
     theID.innerHTML += 
     '<li style = "width:' + 
     spaceAllocated + 
     '%"><a class="hvr-reveal navFont"' + 
     ' href="' + 
     navArray[i].toLowerCase() + 
     '.html">' + 
     navArray[i] + '</a></li>'; 
    }; 
    theID.innerHTML += '<li class="w3-dropdown-hover w3-centered" '+ 
    'style="width:' + spaceAllocated + '%" >' + 
    '<a class="hvr-reveal navFont">' + 
    '<i class="fa fa-bars"></i></a>' + 
    '<ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%">' + 
    '</ul>' + '</li>'; 
    for (var i = 1; i < numNav; i++) { 
     document.getElementById('dropDownContent').innerHTML+= 
     '<li style="width:' + 
     (100 - 2*pad) + '%">'+ 
     '<a class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html">' + 
     navArray[i] + '</a></li>'; 
    } 
    } 

    if (size == "medium") { 
    var numNav = navArray.length; 
    var half = Math.floor(numNav/2); 
    var spaceAllocated = (100)/(half+1); 

    for (var i = 0; i < half; i++) { 
     theID.innerHTML += 
     '<li style = "width:' + 
     spaceAllocated + 
     '%"><a class="hvr-reveal navFont"' + 
     ' href="' + 
     navArray[i].toLowerCase() + 
     '.html">' + 
     navArray[i] + '</a></li>'; 
    }; 

    theID.innerHTML += '<li class="w3-dropdown-hover w3-centered" '+ 
    'style="width:' + spaceAllocated + '%" >' + 
    '<a class="hvr-reveal navFont">' + 
    '<i class="fa fa-bars"></i></a>' + 
    '<ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%">' + 
    '</ul>' + '</li>'; 
    for (var i = half; i < numNav; i++) { 
     document.getElementById('dropDownContent').innerHTML+= 
     '<li style="width:' + 
     (100 - 2*pad) + '%">'+ 
     '<a class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html">' + 
     navArray[i] + '</a></li>'; 
    } 
    }; 

    if (size == "large") { 
    var numNav = navArray.length; 
    var spaceAllocated = (100)/numNav; 

    for (var i = 0; i < numNav; i++) { 
     theID.innerHTML += 
     '<li style = "width:' + 
     spaceAllocated + 
     '%"><a class="hvr-reveal navFont"' + 
     ' href="' + 
     navArray[i].toLowerCase() + 
     '.html">' + 
     navArray[i] + '</a></li>'; 
    }; 
    }; 
} 

và sau đó trong HTML:

<div class="w3-container w3-section"><ul id="navBar" class="w3-navbar w3-center"></ul></div> 

<script type="text/javascript"> 
    var windowWidth; 
    var size; 

    jQuery(document).ready(function(){ 
     windowWidth = jQuery(window).width(); 
     size = getSizeInText(windowWidth); 
     if (windowWidth > large) {} 
     if (windowWidth < medium) {} 
     if (medium <= windowWidth && windowWidth <= large) {} 
    }); 

    jQuery(window).resize(function() { 
     windowWidth = jQuery(window).width(); 
     size = getSizeInText(windowWidth); 
     if (windowWidth > large) { 
     makeNavigation(pages, "navBar", size); 
     } 

     if (windowWidth < medium) { 
     makeNavigation(pages, "navBar", size); 
     } 

     if (medium <= windowWidth && windowWidth <= large) { 
     makeNavigation(pages, "navBar", size); 
     } 



    }); 
    </script> 

Cập nhật

programmer5000 đã đưa ra một giải pháp cho vấn đề cụ thể này. Tuy nhiên các giải pháp tương tự không hoạt động khi không sử dụng w3-css. Làm thế nào mà?

/* Drop down content */ 
li a, .dropbtn { 
    display: inline-block; 
    text-align: center; 
    text-decoration: none; 
} 

li.dropdown { 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    text-align: center; 
    width: inherit; 
    z-index: 1; 
} 

.dropdown-content a { 
    text-decoration: none; 
    display: block; 
} 


.dropdown:hover .dropdown-content { 
    display: block; 
} 




<nav id ='navigation-bar'> 
    <ul> 
    <li><a href="#"> HOME </a></li>  
    <li class="dropdown"> 
     <a class="dropbtn">TEST</a> 
     <div class="dropdown-content"> 
     <a>1</a> 
     <a>2</a> 
     <a>3</a> 
     </div> 
    </li> 
    </ul> 
</nav> 

Answer 1

Các tiền thưởng nói:

2.) tại sao khi cửa sổ có chiều rộng tối thiểu, "HOME" được xếp chồng lên nhau trên đầu trang của các thanh thả xuống.

Hóa ra đó là vấn đề cụ thể. Hãy thử điều này:

@media screen and (max-width: 600px){ 
    .w3-navbar li:not(.w3-opennav) { 
     width: 50% !important; 
     float: left !important; 
    } 
} 

Điều đó sẽ giải quyết được sự cố đó.

Đối # 1:

1.) độ rộng khác nhau từ các yếu tố thanh điều hướng chính và thả xuống

#dropDownContent li { 
    width: 100% !important; 
} 
.w3-dropdown-hover:hover .w3-dropdown-content{ 
    position: initial; 
} 

Đối với cả hai, đó chỉ là một số lạ tuyệt đối vị trí điều và một số vấn đề cụ thể. Tổng cộng: 12 dòng CSS !! Chỉ cần dán nhãn này vào một thẻ kiểu ở cuối <head> và đề cập đến câu hỏi này hoặc tôi (programmer5000) trong một nhận xét.