菜单分层水平和垂直CSS

下面代码的独特之处在于它允许您创建无限数量的平滑附加附件而无需更改样式。

[blok]

另一个特点是,为了将垂直菜单转换为水平菜单,只需更改样式中的一个值即可。 我将在代码中的注释中指出。

我只提供一个缩略图菜单。 设计和直接美,每个人都会喜欢你。

1. 垂直。

 

 

2. 横

 

Код:

[blok]

HTML


<div class="nav">
<ul class="topmenu">
<li><a href="">Meny1</a>
<ul class="submenu">
<li><a href="">Meny 1-2</a>
<ul class="submenu">
<li><a href="">Meny 1-2-1</a></li>
<li><a href="">Meny 1-2-2</a></li>
</ul>
</li>
<li><a href="">Meny 1-3</a>
<ul class="submenu">
<li><a href="">Meny 1-3-1</a></li>
<li><a href="">Meny 1-3-2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Meny 2</a>
<ul class="submenu">
<li><a href="">Meny 2-1</a>
<ul class="submenu">
<li><a href="">Meny 2-1-1</a></li>
<li><a href="">Meny 2-1-2</a></li>
</ul>
</li>
<li><a href="">Meny 2-2</a>
<ul class="submenu">
<li><a href="">Meny 2-2-1</a></li>
<li><a href="">Meny 2-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

为了不布置巨大的代码,我只使用了两个级别的两个块,但是您可以为此代码添加尽可能多的块,并根据需要在每个块中创建多个级别。

添加和添加的所有块的样式都是相同的。

[blok]

CSS


.nav {
background: white;
text-align: center;
}
.nav a {
text-decoration: none;
display: block;
transition: .5s linear;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.topmenu > li {
display: block;
/*Если вместо block задать inline-block,
меню будет горизонтальным*/
position: relative;
}
.topmenu > li > a {
font-weight: bold;
padding: 10px 30px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: #1c1c1c;
border: 1px solid #999;
}
.submenu {
position: absolute;
left: 10px;
z-index: 5;
width: 240px;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: .5s ease-in-out;
}
.submenu li {
position: relative;
border: 1px solid #999;
margin:2px;
}
.submenu a {
background: white;
color: #1c1c1c;
text-align: center;
font-size: 14px;
letter-spacing: 1px;
padding: 10px 20px;
}
.submenu .submenu {
position: absolute;
top: 0;
left: 200px;

}
.nav li:hover > .submenu {
visibility: visible;
opacity: 1;
transform: translateY(0px);
}

祝你创造性的成功。

Рекомендую: Готовые HTML шаблоны на русском

此条目发表在免费网站脚本分类目录。将固定链接加入收藏夹。
А так же:

发表评论

电子邮件地址不会被公开。 必填项已用*标注