無限階層メニューの作り方を紹介します。
-
まずはナビタグを書きましょう。
<nav class="headerNav" style="display: block;">
<h2><span>Menu</span></h2>
</nav>
-
書き終わったら、ルート項目を入れましょう。
<nav class="headerNav" style="display: block;">
<h2><span>Menu</span></h2>
<ul class="father">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
</ul>
</nav>
-
そして、子項目を書き入れましょう。（※青色はルートの１階下の子項目で、赤色はそれ以下の子項目です。）
<nav class="headerNav" style="display: block;">
<h2><span>Menu</span></h2>
<ul class="father">
<li>
<a href="#">Menu1</a>
<ul class="fchild">
<li>
<a href="#">test</a>
<ul class="child">
<li>
<a href="#">test1</a>
<ul class="child">
<li><a href="#">test1-1</a></li>
<li><a href="#">test1-2</a></li>
<li>
<a href="#">test1-3</a>
<ul class="child">
<li><a href="#">test1-3-1</a></li>
<li><a href="#">test1-3-2</a></li>
</ul>
</li>
<li><a href="#">test1-4</a></li>
<li>
<a href="#">test1-5</a>
<ul class="child">
<li><a href="#">test1-5-1</a></li>
<li><a href="#">test1-5-2</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">test2</a>
<ul class="child">
<li>
<a href="#">test2-1</a>
<ul class="child">
<li><a href="#">test2-1-1</a></li>
</ul>
</li>
<li><a href="#">test2-2</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">test</a>
<ul class="child">
<li><a href="#">test3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
</ul>
</nav>
-
そしたら、cssスタイルを入れましょう。（※青色はコアコードです。）
<style>
.headerNav {
height:60px;
width: 100%;
border-top: 1px solid #EEEEEE;
border-bottom: 10px solid #E1EDD5;
background: #6aa52e;
z-index: 998;
clear: both;
}.headerNav h2 {
margin: 0;
width: auto;
height: 40px;
background: #6aa52e;
font-size: 14px;
font-size: 0.875rem;
cursor: pointer;
display: none;
}.headerNav h2 span {
padding: 0 10px 0 20px;
background: url(/img/common/ico_menu.gif) no-repeat left center;
display: block;
line-height: 40px;
color: #FFF;
float: right;
}.headerNav ul {
margin: 0 auto;
padding: 0;
width: 1100px;
}.headerNav ul li {
width: 16.66666%;
float: left;
line-height: 60px;
list-style: none;
text-align:center;
}.headerNav ul li a {
width: 100%;
color: #FFF;
display: block;
-webkit-transition-property: background-color, color;
-moz-transition-property: background-color, color;
-o-transition-property: background-color, color;
-ms-transition-property: background-color, color;
transition-property: background-color, color;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
-ms-transition-timing-function: ease;
transition-timing-function: ease;
text-decoration: none;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}.headerNav ul li a:hover {
background-color: #FFF;
color: #6aa52e;
}.headerNav ul li:first-child a {
border-left: 1px solid rgba(255, 255, 255, 0.2);
}ul.father li ul{
display: none;
}
ul.father li ul.fchild {
position:absolute;
z-index: 100;
}
ul.father li ul li{
float:none;
background:#A6D875;
margin: 1px 0px;
display:block;
_display:inline;
position:relative;
}
ul.father li ul.child {
position:absolute;
margin-left:183px;
margin-top:-61px;
z-index: 100;
}
ul.fchild li a span {
float:right;
margin-right: 8px;
font-size: 10px;
}
@media only screen and (min-width: 1111px) {
.headerNav ul {
display: block;
}
}
</style>
-
最後にJQueryライブラリを入れて、下のコードを入れたらできます。
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
$(function() {
$(".father li ul").hide();
$(".father").find("li").each(function() {
$(this).hover(function() {
$(this).find("ul:first").stop().fadeIn("slow");
}, function() {
$(this).find("ul:first").stop().fadeOut("slow");
})
});
$(".fchild li").each(function() {
if ($(this).find("ul").length > 0) {
var content = $(this).find("a:first").html();
$(this).find("a:first").html(content + "<span>▶</span>");
}
});
})
</script>
