さて、これを説明するのは難しいでしょう。2 つの折りたたみ可能なメニューを含むページがあります。1 つは絶対に左上に配置されます。折りたたむと、予想どおり、残りのコンテンツがすべて左上に押しつぶされます。
もう 1 つのメニューは、絶対に右下に配置されます。展開されているとき (ページをロードするときのデフォルト状態) は、期待どおり、右下から 5 ピクセル離れた右下に配置されます。しかし、それを折りたたむと、突然、残りのコンテンツが右下から 5 ピクセル離れたところから始まり、ページから右と下の両方に流れて、ページが拡大し、スクロールバーが発生します。
望ましい動作は、ページのサイズを変更せずに、残りのコンテンツをページの右下に押し込むことです。
コードの多くは JavaScript を介して動的に生成されるため、コードを投稿するのは難しいでしょう。
各メニューは、コンテナ div 内の 2 つの子 div で構成されます。コンテナ div は絶対に配置されます (メニューに応じて、左上または右下)。最初の子 div は、アクティブなメニュー タブのコンテンツであり、左にフロートされ、メニュー タブの下に配置するのに十分な高さのマージントップがあります。2 番目の子 div はメニュー タブです。この div は絶対に配置されます (コンテンツ div が背後に流れるようにするため)。タブ div 内の各タブは左にフローティングされるため、さらに動的に追加できます。
タブの 1 つは常に「非表示/表示」タブであり、基本的にはメニューのコンテンツ div で display:hidden を切り替えるだけです。
したがって、私が理解しているように、フロートされたコンテンツ div はメニューがページからはみ出さないようにし、「折りたたまれた」(つまり非表示の) 場合、絶対に配置されたタブ div がページからはみ出さないようにするものは何もありません。
問題のある div と css コードを独自のページに切り出して、動作を分離し、一貫したコードを投稿できるようにしようと思います。それまでの間、どんな提案も大歓迎です。
ありがとう！==マット
PS 通常、メニュー内のすべてを相対的に配置するだけでした。フローティング コンテンツ div の上に絶対配置 div を使用した理由は、アクティブなタブの下部がコンテンツ div に「接続」されているように見えるかどうかを制御できるようにするためです。両方の div が相対的で、タブ div がコンテンツ div の上にある場合、アクティブなタブが接続されているように見せるために、コンテンツ div の黒い上部の境界線を適切な場所に削除する方法がありません。両方のdivを相対的に保ちながら、誰かがこれを回避する方法を考えることができれば、私もそれを望んでいます。
画像を投稿する担当者がいないので、ここにいくつかのリンクがあります：
メニューを展開すると次のようになります: http://theroach.net/igp_menutest/css_menus1.png
ここでは折りたたまれています: http://theroach.net/igp_menutest/css_menus2.png
これが私が目指しているものです： http://theroach.net/igp_menutest/css_menus3.png
更新: JavaScript からメニュー コードを可能な限り削除しました。これは、作業コードを含むJSFiddleです。何らかの理由で、onclick イベントは JSFiddle 内では機能しませんが、テスト ページのコードとまったく同じです。そのため、JSFiddle で機能しない場合は、このリンクを試して動作を確認してください。参考までに、javascript は通常、巨大な if-else ステートメントに依存していません。動的メニュー生成コードをすべて投稿する必要がないように、単純にそうしただけです。
PPS 私は基本的に Chrome v20 でのみこれをテストしていますが、Firefox v13 と IE9 をテストしたところ、同じ動作が得られました。クロスブラウザのサポートについてはあまり気にしません。このページは、最新かつ最高のブラウザーを使用しているユーザー向けにのみ設計されています。
UPDATE2 : リンクを更新しました。問題の新しいコード要件を満たすために、jsfiddle コードの関連部分を追加しました。
JS
function tab(id) {
if(id == 'menuCtrlTab1') {
toggle('menuCtrlTab1');
toggle('menuCtrlTab2');
hide('menuCtrlForm2');
show('menuCtrlForm1');
}
else if(id == 'menuCtrlTab2') {
toggle('menuCtrlTab1');
toggle('menuCtrlTab2');
hide('menuCtrlForm1');
show('menuCtrlForm2');
}
else if(id == 'menuCtrlTabHide') {
hide('menuCtrlTab1');
hide('menuCtrlTab2');
hide('menuCtrlFormDiv');
hide('menuCtrlTabHide');
show('menuCtrlTabShow');
}
else if(id == 'menuCtrlTabShow') {
show('menuCtrlTab1');
show('menuCtrlTab2');
show('menuCtrlFormDiv');
hide('menuCtrlTabShow');
show('menuCtrlTabHide');
}
else if(id == 'menuInfoTab1') {
toggle('menuInfoTab1');
toggle('menuInfoTab2');
hide('menuInfoForm2');
show('menuInfoForm1');
}
else if(id == 'menuInfoTab2') {
toggle('menuInfoTab1');
toggle('menuInfoTab2');
hide('menuInfoForm1');
show('menuInfoForm2');
}
else if(id == 'menuInfoTabHide') {
hide('menuInfoTab1');
hide('menuInfoTab2');
hide('menuInfoFormDiv');
hide('menuInfoTabHide');
show('menuInfoTabShow');
}
else if(id == 'menuInfoTabShow') {
show('menuInfoTab1');
show('menuInfoTab2');
show('menuInfoFormDiv');
hide('menuInfoTabShow');
show('menuInfoTabHide');
}
else {
}
}
function toggle(id) {
if(activated(id)) {
deactivate(id);
}
else {
activate(id);
}
}
function hide(id) {
docAddClass(id, 'hidden');
}
function show(id) {
docRemoveClass(id, 'hidden');
}
function activate(id) {
docRemoveClass(id, 'inActive');
docAddClass(id, 'active');
}
function deactivate(id) {
docRemoveClass(id, 'active');
docAddClass(id, 'inActive');
}
function activated(id) {
var e = docGet(id);
if(e.className.search('active') == -1) {
return false;
}
return true;
}
function docGet(id) {
return document.getElementById(id);
}
function docAddClass(id, classToAdd) {
var e = docGet(id);
if(e.className.length <= 0) {
e.className = classToAdd;
}
else {
if(e.className.search(classToAdd) == -1) {
e.className = e.className + ' ' + classToAdd;
}
}
}
function docRemoveClass(id, classToRem) {
var e = docGet(id);
if(e.className.length > 0) {
if(e.className.search(classToRem) != -1) {
e.className = e.className.replace(classToRem, "");
}
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name='Author' content='Matt Seng' />
<meta name="Description" content="IGP" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./style.css" media="screen" />
</head>
<body>
<div id="menuDiv">
<div id="menuCtrl">
<div id="menuCtrlWrapper" class="menuWrapper">
<div id='menuCtrlFormDiv'>
<div id="menuCtrlForm1" class="menuForm">
Tab 1 contents<br>
Lorem ipsum dolor sit amet, consectetur<br>
adipiscing elit. Duis est orci, malesuada<br>
vitae pulvinar nec, varius id felis. Vivamus<br>
et accumsan dui. Donec a nisl id dui gravida<br>
porttitor. Integer sed turpis arcu. Curabitur<br>
nec dolor urna, ac molestie neque. Nunc ac<br>
augue non mi imperdiet semper.
</div>
<div id="menuCtrlForm2" class="menuForm hidden">
Tab 2 contents<br>
Lorem ipsum dolor sit amet, consectetur<br>
adipiscing elit. Duis est orci, malesuada<br>
vitae pulvinar nec, varius id felis. Vivamus<br>
et accumsan dui. Donec a nisl id dui gravida<br>
porttitor. Integer sed turpis arcu. Curabitur<br>
nec dolor urna, ac molestie neque. Nunc ac<br>
augue non mi imperdiet semper.
</div>
</div>
<div id="menuCtrlTabs" class="menuTabs">
<div id="menuCtrlTabShow" class="clickable tab showHide inActive hidden" onclick="tab(this.id);">
Show
</div>
<div id="menuCtrlTabHide" class="clickable tab showHide inActive" onclick="tab(this.id);">
Hide
</div>
<div id="menuCtrlTab1" class="clickable tab secondary active" onclick="tab(this.id);">
1
</div>
<div id="menuCtrlTab2" class="clickable tab secondary inActive" onclick="tab(this.id);">
2
</div>
</div>
</div>
</div>
<div id="menuInfo">
<div id="menuInfoWrapper" class="menuWrapper">
<div id='menuInfoFormDiv'>
<div id="menuInfoForm1" class="menuForm">
Tab 1 contents<br>
Lorem ipsum dolor sit amet, consectetur<br>
adipiscing elit. Duis est orci, malesuada<br>
vitae pulvinar nec, varius id felis. Vivamus<br>
et accumsan dui. Donec a nisl id dui gravida<br>
porttitor. Integer sed turpis arcu. Curabitur<br>
nec dolor urna, ac molestie neque. Nunc ac<br>
augue non mi imperdiet semper.
</div>
<div id="menuInfoForm2" class="menuForm hidden">
Tab 2 contents<br>
Lorem ipsum dolor sit amet, consectetur<br>
adipiscing elit. Duis est orci, malesuada<br>
vitae pulvinar nec, varius id felis. Vivamus<br>
et accumsan dui. Donec a nisl id dui gravida<br>
porttitor. Integer sed turpis arcu. Curabitur<br>
nec dolor urna, ac molestie neque. Nunc ac<br>
augue non mi imperdiet semper.
</div>
</div>
<div id="menuInfoTabs" class="menuTabs">
<div id="menuInfoTabShow" class="clickable tab showHide inActive hidden" onclick="tab(this.id);">
Show
</div>
<div id="menuInfoTabHide" class="clickable tab showHide inActive" onclick="tab(this.id);">
Hide
</div>
<div id="menuInfoTab1" class="clickable tab secondary active" onclick="tab(this.id);">
1
</div>
<div id="menuInfoTab2" class="clickable tab secondary inActive" onclick="tab(this.id);">
2
</div>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='./script.js'></script>
</body>
</html>
CSS
/* removes the top and left whitespace */
* { margin:0; padding:0; }
/* ensure full screen */
html, body {
width:100%;
height:100%;
font-family: "Courier New", Courier, monospace;
font-size: 95%;
}
/* remove the scrollbars */
canvas {
display:block;
}
#menuCtrl {
position: absolute;
margin: 5px;
}
#menuInfo {
position: absolute;
bottom: 0;
right: 0;
margin: 5px;
}
.menuWrapper {
}
.menuForm {
float: left;
margin-top: 22px;
padding: 5px;
background-color: white;
border: 2px solid black;
border-radius: 10px;
border-top-left-radius: 0;
box-shadow: 3px 3px 5px #333;
}
.menuForm table {
padding-top: 3px;
}
.menuForm td, th {
white-space: nowrap;
}
.menuForm th {
text-align: left;
}
.menuTabs {
position: absolute;
white-space: nowrap;
top: 0;
}
.menuTabs div.tab {
float: left;
height: 20px;
min-width: 20px;
margin: 0;
padding: 0 5px 0 5px;
text-align: center;
background-color: white;
border: 2px solid black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.menuTabs div.secondary {
border-left: 0px;
}
.menuTabs div.active {
opacity: 1;
border-bottom: 2px solid white;
}
.menuTabs div.active.showHide {
border-bottom: 2px solid black;
}
.menuTabs div.inActive {
opacity: .75;
border-bottom: 2px solid black;
}
.clickable {
cursor: pointer;
}
.visible {
text-decoration: underline;
text-decoration-color: black;
}
.invisible {
text-decoration: line-through;
text-decoration-color: red;
}
.hidden {
display: none;
}