私の問題を説明するためのデモがあります。
これは、2 つのナビゲーション列 (左) が固定幅で、コンテンツ列 (右) が流動的なシンプルなレスポンシブ 3 列レイアウトです。
固定幅の列がスライドするコンテンツ列の負の右マージンを使用してこれを行いました。
ページのサイズが変更されると、ナビゲーション列がコンテンツの上に移動する必要があります。
私の問題は、固定幅の列のリンクが機能しないことです。ページのサイズが変更され、ナビゲーションがコンテンツの上に移動すると、ナビゲーションが再び機能します。
固定幅の列の html をコンテンツの下に配置しようとしましたが、ナビゲーションは再び機能しますが、ウィンドウのサイズを変更すると、ナビゲーションがコンテンツの下に落ちます。
http://www.ttmt.org.uk/forum/index1.html
コンテンツ内にあるため、ナビゲーションが機能していないと思いますが、どうすれば修正できますか。
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Title of the document</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/master.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
body{
background:#f5f5f3 url('../images/bg.png') 0 0 repeat-x;
font:10px sans-serif;
font-size:1em;
}
a{
color:black;
text-decoration:none;
}
#pageWrap{
max-width:1000px;
margin:0 auto;
border-left: 20px transparent solid;
border-right: 20px transparent solid;
}
/*-----------------
Structure
-------------------*/
header {
height:50px;
}
#rightCol{
float:right;
width:100%;
margin-left:-386px;
}
#rightCol #rightCol-inner{
margin-left:386px;
background:#fff;
padding:20px;
}
#leftCol,
#middleCol{
background:#eee;
float:left;
}
#leftCol{
width:141px;
margin:0 10px 0 0;
}
#middleCol{
width:225px;
}
#leftCol nav,
#middleCol ul{
padding:10px;
}
#leftCol nav li,
#middleCol ul li{
border-top:1px solid black;
}
#leftCol li a,
#middleCol ul li a{
display:block;
padding:10px 12px;
font-size:1em;
margin:4px 0;
color:#555;
}
#leftCol li a:hover,
#middleCol li a:hover{
background:red;
}
/*--------------------
Media Queries
---------------------*/
@media only screen and (max-width : 780px) {
#rightCol{
float:none;
width:100%;
margin:0;
}
#rightCol #rightCol-inner{
margin:0;
background:#fff;
}
#leftCol,
#middleCol{
float:none;
display:block;
margin:10px 0;
width:100%;
}
#leftCol nav{
float:none;
}
#leftCol nav li,
#middleCol ul li{
display:inline-block;
border:0;
}
#leftCol li a,
#middleCol li a{
display:inline-block;
padding:10px 12px;
border-right: 1px solid #999;
border-top:0;
border-bottom:0;
}
}
</style>
</head>
<body>
<div id="pageWrap">
<header>
</header>
<div id="pageContent" class="group">
<aside id="leftCol">
<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
</aside><!--leftCol-->
<aside id="middleCol">
<ul id="second-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</aside><!--middleCol-->
<section id="rightCol">
<div id="rightCol-inner">
<div class="serviceText">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div><!-- #rightCol-inner -->
</section><!--rightCol-->
</div><!-- pageContent-->
</div><!-- #pageWrap -->
</body>
</html>