Drop-down menu (limited)
Αντιγραφή τον παρακάτω κώδικα:
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
#wrapper {
margin: 10px;
}
/* foulscode.com */
.menu,
.sub-menu {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
background-color: #3E454D;
cursor: pointer;
position: relative;
transition: background-color .5s;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
/* IE lt 10, Chrome lt 1, Opera lt 11.6, Safari lt 3, FF lt 4, Android lt 2.1 и iOS lt 2.0 не поддерэивают transition. */
}
.menu li:hover {
background-color: #353B41 !important; /* .menu > li.home может иметь больше приоритета. Поэтому. */
}
.menu a {
color: #FFF;
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
height: 100%;
margin: 0 5px;
overflow: hidden;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
word-wrap: break-word;
}
.menu a:hover {
/* Защита от простого a:hover. */
color: #FFF;
}
/* END: Общие стили */
/* BEGIN: Главное меню */
.menu {
/* Рекомендуется задать высоту главного меню именно отсюда. */
height: 90px;
}
.menu > li {
float: left;
height: 100%;
width: 15%; /* Мудакам которые не поддерживают calc. */
width: calc((100% - 90px) / 5);
width: -moz-calc((100% - 90px) / 5);
width: -webkit-calc((100% - 90px) / 5);
/* IE lt 9, Chrome lt 19, Opera lt 15, Safari lt 6, FF lt 4, Android и iOS не поддерэивают calc. */
}
.menu > li.home {
background: #3E454D url(http://s26.postimg.org/qbf4q4j9h/home.png) center no-repeat;
width: 90px;
}
.menu > li.current {
background-color: #F2762E !important; /* !important VS .menu li:hover */
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
/* IE lt 9, Chrome lt 1, Opera lt 10.5, Safari lt 3, FF lt 3.5, Android lt 2.1 и iOS lt 2.0 не поддерэивают box-shadow. */
}
.menu > li:not(:first-child) {
box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
-moz-box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
-webkit-box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
}
.menu > li.home > a {
color: transparent !important;
}
.menu > li > a > span {
left: 0; /* Селектор .menu a выравнивает содержимое по центру, из-за чего span начинается от центра. Исправляем. */
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
/* IE lt 9, Chrome lt 5, Opera lt 10.5, Safari lt 3.1, FF lt 3.5, Android lt 2.1 и iOS lt 2.0 не поддерэивают transform. */
}
/* END: Главное меню */
/* BEGIN: Подменю */
.sub-menu {
max-height: 0;
min-width: 100%;
overflow: hidden;
position: absolute;
top: 100%;
transition: max-height .5s .2s;
-moz-transition: max-height .5s .2s;
-o-transition: max-height .5s .2s;
-webkit-transition: max-height .5s .2s;
}
li:hover > .sub-menu {
max-height: 600px;
}
.sub-menu li {
height: 60px;
}
.sub-menu a {
line-height: 60px;
transition: color .5s;
-moz-transition: color .5s;
-o-transition: color .5s;
-webkit-transition: color .5s;
white-space: nowrap;
}
.sub-menu li.current a,
.sub-menu a:hover {
color: #F2762E !important; /* !important VS .menu a:hover */
}
/* foulscode.com */
</style>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Drop-down menu</title>
</head>
<body>
<div id="wrapper">
<nav>
<ul class="menu">
<li class="home current"><a href="URL"><span>Home</span></a></li>
<li><a href="URL"><span>About</span></a></li>
<li><a href="URL"><span>Service</span></a>
<ul class="sub-menu">
<li><a href="URL">Sub-menu 1</a></li>
<li><a href="URL">Sub-menu 2</a></li>
<li><a href="URL">Sub-menu 3</a></li>
</ul>
</li>
<li><a href="URL"><span>Application Form</span></a></li>
<li><a href="URL"><span>Blog</span></a></li>
<li><a href="URL"><span>Contacts</span></a></li>
</ul>
</nav>
</div>
</body>
</html>
DEMO
Κατηγορίες:
Σχόλια