サブメニュー内のリンクがクリックされるたびにドロップダウンメニュー項目を折りたたむという1つのことを除いて、うまく機能しているように見えるCSSドロップダウンメニューがあります。したがって、ユーザーがサブメニューのリンクをクリックすると、JQuery を使用して同じページにあるコンテンツを表示できます。
onClick でドロップダウン メニューを折りたたむ方法に関するさまざまな質問を見てきましたが、私の場合は役に立たないようです。
これが私のサンプルhtmlとCSSです。誰かがこの問題を修正するのを手伝ってくれることを願っています. 最初は、コンテンツを
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css_dropdown.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<title>CSS Dropdown menu with load content in DIV element</title>
</head>
<body>
<ul class="sectiontitle">
<li>Documents <ul class="section">
<li><a href="./docs/test1.html">Document 1</a></li>
<li><a href="./docs/test2.html">Document 2</a></li>
<li><a href="./docs/test3.html">Document 3</a></li>
</ul></li>
<li>Items <ul class="section">
<li><a href="./items/test1.html">Item 1</a></li>
<li><a href="./items/test2.html">Item 2</a></li>
<li><a href="./items/test3.html">Item 3</a></li>
</ul></li>
<li>Products <ul class="section">
<li><a href="./prods/test1.html">Product 1</a></li>
<li><a href="./prods/test2.html">Product 2</a></li>
<li><a href="./prods/test3.html">Product 3</a></li>
</ul></li>
</ul>
<div class="container">
<!-- This is an empty container for loading linked content allowing to stay on the same page as the dropdown list -->
</div>
<!--This script needs to be loaded last for the browser to accept to make it work.-->
<script type="text/javascript">
$(".section").on("click", "a", function(e){
e.preventDefault();
$(".container").load( $(this).prop("href") );
// Stop regular handling of "click" in IE (and some others)
return false;
});
</script>
</body>
</html>
そしてここにCSSがあります
body, .title.topictitle2 {
width:auto;
margin-top:0;
margin-left:.8em;
font-family:"news cycle", helvetica, sans-serif;
font-size: .95em;
height:auto;
}
#container {
position:fixed;
top:2.25em;
text-transform:capitalize;
background: #c65;
width: 100%;
/*overflow:inherit;*/
z-index: 1;
}
.sectiontitle{
margin:0;
padding:0 1em;
background:#194879;
height:2.25em;
list-style:none;
z-index: 2;
/* position:fixed;*/
}
.sectiontitle > li{ /* We target only the list element inside ul.sectiontitle class*/
float:left;
height:100%;
margin-right:0; /*To control how far apart from the right each <li> should be positioned from the other*/
padding:0 .02em;
}
.sectiontitle > li{
float:left;
height:100%;
color:white;
font-family:"news cycle", helvetica, sans-serif;
font-size:.9em;
text-decoration:none;
line-height:2;
text-transform:capitalize;
/* border-right: solid white .03em;*/
}
ul.sectiontitle li:hover{
color:orange;
border-bottom:.1em dotted #224480;
/* text-decoration:underline; */
}
/* Contextual positioning for the children under the .sectiontitle list items*/
ul.section{
position:relative;
left:-1.12em;
z-index: 3;
}
ul.section{
/* width:10em;*/
margin:0 0 0;
padding:0 0 0;
list-style:none;
background:repeat scroll 0% 0% rgb(15, 161, 224);
position:relative; /*Very important to keep the children ul.section aligned with its parent ul.sectiontitle*/
top:-1000em;
}
ul.section{
width:auto; /* dropdown list width better when set to auto*/
margin:0 auto 0.3em auto;
white-space:inherit;
border: solid #224480 0.01em;
}
ul.section li a{
height:100%;
display:block;
padding:0.3em 1em 0; /*Set padding around the text in the list items under ul.section elements*/
color:#fff;
/*font-weight:bold;*/
text-decoration:none;
}
ul.section li a:hover{
background:#69F;
/*text-decoration:underline;*/
}
/* This controls the position of the child ul.section from the top horizontal bar*/
.sectiontitle > li:hover ul.section{
top:.47em;
}
.container p:last-child:focus {
background: #399;
}