ブラウザのサイズが変更されたときに、liがオーバーラップしていて、それらが定義されているセクションが省略されているため、固定メニューに大きな問題があります:(。したがって、使用できる2つのオプションについて考えていました：1：メニュー全体が固定されています幅は％ではなくピクセル単位で、ブラウザのサイズを変更してそのメニューを左右にスクロールする場合。2：liは、境界線で定義された同じセクションに再配置されます。
ブラウザのサイズが変更されたときにオーバーフローを使用してメニューを左右にスクロールすると機能しないため、これまで何もできませんでした。誰かが私にこの蒸し暑い問題の解決策を与えることができれば、私は感謝するでしょう:)
これがページテストです：http： //mainpage.ueuo.com/Pagina%20start.htm
ありがとうございました。
追加min-width: 1000px（またはそれ以上...あなたのメニューは本当に長すぎます）
固定要素#headerとbody要素の両方に。
これoverflow-xで動作します（指定する必要はありません）。
または、スクリプトを使用して、パディングとフォントサイズのプロパティを書き直すことができます。
function renderMenuCorection(){
if ($('#containerHeader').exists()) {
var resizeObject = {
'0-640': '9px,2px,-3px',
'640-800': '10px,2px,-5px',
'800-1024': '10px,8px,-13px',
'1024-1300': '12px,12px,-13px',
'1300-2000': '14px,20px,-21px'
}
var win = $(window);
var win_width = win.width();
if (win_width > 0 && win_width <= 640) {
var value = getValueByKey(resizeObject, '0-640')
modifayMenu(value);
console.log(win_width + ' : ' + value);
}
else
if (win_width > 640 && win_width <= 800) {
var value = getValueByKey(resizeObject, '640-800')
modifayMenu(value);
console.log(win_width + ' : ' + value);
}
else
if (win_width > 800 && win_width <= 1024) {
var value = getValueByKey(resizeObject, '800-1024')
modifayMenu(value);
console.log(win_width + ' : ' + value);
}
else
if (win_width > 1024 && win_width <= 1300) {
var value = getValueByKey(resizeObject, '1024-1300')
modifayMenu(value);
console.log(win_width + ' : ' + value);
}
else
if (win_width > 1300 ) {
var value = getValueByKey(resizeObject, '1300-2000')
modifayMenu(value);
console.log(win_width + ' : ' + value);
}
}
}
function modifayMenu(value){
var vals = value.split(',')
$('#containerHeader').find('.roundMenuLi').each(function(index, item){
$(item).find('a').css('font-size', vals[0]);
$(item).css('padding-right', vals[1]);
$(item).css('padding-left', vals[1]);
$(item).find('ul').css('margin-left', vals[2]);
});
}
function getValueByKey(obj, myKey){
$.each(obj, function(key, value){
if (key == myKey) {
returnValue = value;
}
});
return returnValue;
}
-最初に解像度を0-600...1300-2000と宣言し、modifayMenu関数でcssのプロパティを設定します：0position-font、1position-padding left＆right、2position margin left for seconullevel。
スクリプトを呼び出す：
<body onresize="renderMenuCorection();" onload="renderMenuCorection();">
#firstUl > li {
display:inline-block;
vertical-align:top;
display:inline; /* display:inline & zoom:1 for ie7 */
zoom:1;
}
ulとulコンテナから高さを削除し、containerHeaderから高さを削除します。メニューとコンテナの間のギャップを維持するために上下にパディングを使用します。
置く
overflow:hidden;
ディビディオのインラインスタイルで