私はナビゲーションバー (「私たちについて」、「ヘルプを探しています」、「サポートしてください」、「トレーニング」、「私たちのために働く」と書かれたもの) を持っています。マウスオーバーすると、その特定の見出しのドロップダウンが表示されます。ドロップダウンは、次のdivの「上に」表示されます...それはまさに私が欲しいものです。
問題は、マウスオーバーで表示されるドロップダウン div を、「About Us」、「Looking for Help」などを含む div の下部と正確に並べたいということですが、現時点ではそうではありません。
どうすればそれを達成できるかについてのアイデアはありますか?
ところで、私はブループリント フレームワークと jquery を使用しています ...
<style type="text/css" media="screen">
<!--
BODY {
font: .72em Candara, "Trebuchet MS", verdana, arial, sans-serif;
font-size: 86%;
background: url(./images/body-bg.jpg) repeat-y scroll center top #eae9e7;}
h2 {
color: #262161;
margin-bottom: 5px;
}
h3 {
color:white;
padding:5px;
margin-bottom:0;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
}
#tabH {margin-bottom:10px;}
div.tabs > div h2 {
margin-top: 0;
}
div.tabs > a {
text-decoration:none;
}
#topnav li {
list-style:none;
}
.navhead {
width:135px;
padding:3px;
margin-right:2px;
float:left;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
background-color: #F3F3F4;
border-top: 1px silver solid;
border-right: 1px silver solid;
}
.navhead a
{
font-size:1.2em;
text-decoration:none;
}
.navheadhover {
background: #262161;
color: white;
}
.navcontent {
background-color:white;
border: 1px solid #262161;
padding: 3px;
position:absolute;
}
.navcontent p, headTxt p {padding:5px;}
#headline {
margin-bottom:20px;
}
.blue-bg {
background-color:#262161;
}
#footer {
clear:both;
background: url(./images/footer.jpg) no-repeat scroll 0 0;
background: url(./images/body-bg.jpg) repeat-y scroll center top #eae9e7;
}
-->
</style>
<script>
$(document).ready(function()
{
var navContainers = $('.navcontent');
navContainers.hide();
$('div.tabs a').mouseover(function ()
{
var myhash=$(this).attr('hash');
console.log ('hash = ' + myhash);
navContainers.hide();
navContainers.filter(this.hash).show();
$('.navhead').removeClass('navheadhover');
$(this.parentNode).addClass('navheadhover');
return false;
})
$('.navcontent, .navigation-container').mouseleave(function ()
{
$('.navhead').removeClass('navheadhover');
navContainers.hide();
return false;
})
});
</script>
html は次のとおりです。
<script type="text/javascript" src="jquery152.js"></script>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Tabs</title>
</head>
<body class="container">
<div class=span-24>
<BR>
<div id=logo class='span-4'>
<img src="./images/CANFull10.jpg">
</div>
<div id=tabH class="tabs span-20 last navigation-container">
<br><br>
<ul id=topnav class="right">
<li class='navhead'><a href="#first" id=mark>About Us</a><br>What we do & how you can help.</li>
<li class='navhead'><a href="#second" id=services>Looking For Help</a><br>Find a service to help you.</li>
<li class='navhead'><a href="#third" id=otherstuff>Support Us</a><br>More here. Second line of text</li>
<li class='navhead'><a href="#fourth" id=otherstuff>Training</a><br>See our courses. more text here.</li>
<li class='navhead'><a href="#fifth" id=otherstuff>Work for Us</a><br>See what we offer. more text here.</li>
</ul>
<div id="first" class="navcontent span-20">
<h2>About Us</h2>
<p> Some text here maybe followed by some links</p>
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
</div>
<div id="second" class="navcontent span-20">
<h2>Looking for Help</h2>
<p>Eastman Kodak, the company that invented the hand-held camera, has filed for bankruptcy protection. The move gives the company time to reorganise itself without facing its creditors, and Kodak said that it would mean business as normal for customers. The company has recently moved away from cameras to refocus on making printers to stem falling profits. The 133-year-old firm has struggled to keep up with competitors who were quicker to adapt to the digital era. Announcing the move to seek bankruptcy protection, Antonio M Perez, Kodak's chairman and chief executive, said: "The board of directors and the entire senior management team unanimously believe that this is a necessary step and the right thing to do for the future of Kodak." </p>
</div>
<div id="third" class="navcontent span-20">
<h2>Support Us</h2>
<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 ostrud 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 id="fourth" class="navcontent span-20">
<h2>Training</h2>
<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 ostrud 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 id="fifth" class="navcontent span-20">
<h2>Work for Us</h2>
<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 ostrud 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>
</div>
<div id=headline class="span-24">
<div class='span-16'>
<img src="./images/place.jpg" alt="CAN is a one of the Best Companies to work for." title="CAN is a one of the Best Companies to work for.">
</div>
<div class='span-8 last' >
<h3 class=blue-bg>One of the best!</h3>
<p>Being a best company goes beyond the bottom line. <br><br>
It's about excelling in every area throughout the workplace and an organisation's commitment to its most important assets - its workforce.<br><br>
Focusing on employees brings real benefits such as, improved workplace engagement, better staff retention.</p>
</div>
</div>
<div id=footer class='span-24'>
<div class='span-12'>Footer</div>
</div>