CSSだけで作る横メニュー
リキッドデザイン用に作ったナビゲーション。
hoverすると子メニューが出現します。PC幅用のメニューです。
隣接セレクタの”+”を使用して、.nav_list_innerをhoverしたとき、.nav_list_innerの中にある.nav_cを表示させるようにしています。
HTML
<div class="l_nav">
<nav class="nav">
<ul class="nav_menu">
<li>
<div class="nav_list_inner">
<a href="">メニュー1</a>
</div>
</li>
<li>
<div class="nav_list_inner">
<a href="">メニュー2</a>
</div>
<ul class="nav_c pc">
<li>
<div class="nav_c_inner">
<a href="">メニュー2-1</a>
</div>
</li>
<li>
<div class="nav_c_inner">
<a href="">メニュー2-2</a>
</div>
</li>
<li>
<div class="nav_c_inner">
<a href="">メニュー2-3</a>
</div>
</li>
<li>
<div class="nav_c_inner">
<a href="">メニュー2-4</a>
</div>
</li>
</ul>
</li>
<li>
<div class="nav_list_inner">
<a href="">メニュー3</a>
</div>
<ul class="nav_c pc">
<li>
<div class="nav_c_inner">
<a href="">メニュー3-1</a>
</div>
</li>
<li>
<div class="nav_c_inner">
<a href="">メニュー3-2</a>
</div>
</li>
<li>
<div class="nav_c_inner">
<a href="">メニュー3-3</a>
</div>
</li>
<li>
<div class="nav_c_inner">
<a href="">メニュー3-4</a>
</div>
</li>
<li>
<div class="nav_c_inner">
<a href="">メニュー3-4</a>
</div>
</li>
<li>
<div class="nav_c_inner">
<a href="">メニュー3-5</a>
</div>
</li>
</ul>
</li>
<li>
<div class="nav_list_inner">
<a href="">メニュー4</a>
</div>
<ul class="nav_c pc">
<li>
<div class="nav_c_inner">
<a href="">メニュー4-1</a>
</div>
</li>
<li>
<div class="nav_c_inner">
<a href="">メニュー4-2</a>
</div>
</li>
<li>
<div class="nav_c_inner">
<a href="">メニュー4-3</a>
</div>
</li>
</ul>
</li>
<li>
<div class="nav_list_inner">
<a href="">メニュー5</a>
</div>
<ul class="nav_c pc">
<li>
<div class="nav_c_inner">
<a href="">メニュー5-1</a>
</div>
</li>
<li>
<div class="nav_c_inner">
<a href="">メニュー5-2</a>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- div[l_nav] -->
<div class="l_content">
</div>
CSS
.l_nav {
display: table-cell;
width: 190px;
min-width: 190px;
height: 100%;
left: 0;
background: #fff;
-webkit-transition: .3s;
transition: .3s;
vertical-align: top;
}
.l_nav .sp_nav_contact {
width: 0;
height: 0;
padding: 0;
}
.l_nav .nav_menu {
width: 190px;
padding: 140px 0 0;
z-index: 10001;
}
.l_nav .nav_menu li {
list-style-type: none;
border-bottom: 1px solid #ececec;
}
.l_nav .nav_menu .nav_list_inner:before {
content: none;
}
.l_nav .nav_menu a {
display: block;
font-size: 1.8rem;
padding: 10px 0 10px 15px;
font-weight: bold;
-webkit-transition: .3s;
transition: .3s;
}
.l_nav .nav_menu a:hover {
padding-left: 25px;
color: #674498;
background: #ececec;
-webkit-transition: .3s;
transition: .3s;
}
.l_nav .nav_menu .nav_contact_a {
color: #fff;
background: #674498;
}
.l_nav .nav_menu .nav_contact_a:hover {
background: #b585f8;
color: #fff;
}
.l_nav .nav_c {
position: fixed;
top: 0px;
left: 190px;
width: 0px;
height: 100%;
padding: 0;
background: #ddd;
z-index: 1;
overflow: hidden;
-webkit-transition: .3s;
transition: .3s;
}
.l_nav .nav_c li {
width: 200px;
border-bottom: 1px solid #fff;
}
.l_nav .nav_c li:nth-child(1) {
margin-top: 140px;
}
.l_nav .nav_c a {
font-size: 1.4rem;
}
.l_nav .nav_c a:hover {
background: #fff;
}
.l_nav .nav_c:hover {
width: 200px;
z-index: 10001;
-webkit-transition: .3s;
transition: .3s;
}
.l_nav .nav_list_inner:hover+.nav_c {
width: 200px;
z-index: 10001;
-webkit-transition: .3s;
transition: .3s;
}
.l_content{
display: table-cell;
}
body{
position: relative;
display: table;
width: 100%;
height: 100%;
margin: 0;
}
